Can I change a page title via CSS?

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 

3 answers

1 accepted

1 vote
Accepted answer
Davin Studer Community Champion Feb 10, 2015

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>

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

Davin Studer Community Champion Feb 10, 2015

Yup. Pseudo-elements are pretty awesome.

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 Community Champion Feb 11, 2015

Check my above edit.

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 Community Champion Feb 11, 2015

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

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!

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.

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!!).

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!

Suggest an answer

Log in or Sign up to answer
Community showcase
Published Nov 29, 2018 in New to Confluence

How to use Confluence Cloud for stakeholder management

Most of us don’t need much convincing that stakeholder management is important. It just makes sense that keeping everyone in-the-know on projects and assigning clearly defined roles is key to having ...

1,168 views 4 6
Read article

Atlassian User Groups

Connect with like-minded Atlassian users at free events near you!

Find a group

Connect with like-minded Atlassian users at free events near you!

Find my local user group

Unfortunately there are no AUG chapters near you at the moment.

Start an AUG

You're one step closer to meeting fellow Atlassian users at your local meet up. Learn more about AUGs

Groups near you