Can I change a page title via CSS?

[Manny Sousa]

Hi,

I am trying to edit a page title via CSS (or some other means) without actually changing a page title. Essentially, I want to append titles of new pages with the word "NEW!" without actually changing the name of the page so that links wouldn't be an issue. Is this possible?

Thanks,
Manny 

[Davin Studer · Accepted solution]

This would add the word new after the page title. You could put this in a user macro and then drop it on pages that are new.

#title-text a::after {
    content: " NEW!";
}

Edit:

Here is an example user macro.

## @noparams
<style type="text/css">
	#title-text a::after {
    	content: ' NEW!';
	}
</style>

[Jonathan Simonoff]

That's great, Davin. I didn't realize you could do that in CSS.

[Davin Studer]

Yup. Pseudo-elements are pretty awesome.

[Manny Sousa]

Hi Davin, I tried making a user macro, but all it did was display the code on the page. Any ideas on what I'm doing wrong? I've never made a user macro before, so I apologize for any confusion on my side.

[Davin Studer]

Check my above edit.

[Manny Sousa]

Well, I still couldn't get it to work as a user macro, but I added it in to the page in an HTML macro and it works like a charm. I'll take it! Thanks!

[Davin Studer]

I edited the user macro again. Apparently Confluence is escaping out the quote marks. Used single quotes instead and it works. Try it now.

[Mark Allen]

I'm new to user macros and am trying to figure out a way to keep my tech doc URLs clean and short, but want to add more description to the page titles that is seen in the page tree. Would the above macro help me with that? I'm not having much luck adding it to my site successfully. Can anyone provide me with a little advice on getting this (or a version of this) macro to work the way I need? Thanks in advance!

[Jonathan Simonoff]

I don't think you can do that with CSS, but you probably can with JavaScript.  Basically, you would do

1) Get the element with it "title-text" – that is the h1 tag containing the title.

2) Get the child of that element (the <a> tag that contains the actual title text)

3) Do something like child.innerHtml=child.innerHtml+" NEW!"

You could do this in a user macro that an author could drop onto a page to put the "NEW!" text in.

BTW. Tom's solution would also work – one thing good about it is that if the author initially includes the exclamation point, the URL for the page won't use the page title – the special character will force it to use the "viewpage.action?pageId=" form, which, like the permalink format, will always work even if the page title changes.

[TomC]

Manny,

I don't know a CSS way, but did you know if you used the 'Tiny Link' under Tools>Link to this page... that the link doesn't break even if you change the page title?

Try it by copying a tiny link for a page, adding 'NEW!' to a title, and then entering that same link onto a new browser page and clicking Enter. 

This should work equally well if you use the link process in Edit mode and link to a given page through Search or Recently Viewed in the Edit Link popup (vs to a full hyperlink that includes the current title, don't do that!!).

[Manny Sousa]

Hi Tom, We use the tiny link wherever possible, but we tend to use anchors fairly often. The way Confluence handles anchors makes using the tiny link useless in those cases. Thanks for the tip though!