nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

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

Accepted answers

Davin Studer

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
&lt;style type="text/css"&gt;
	#title-text a::after {
    	content: ' NEW!';
	}
&lt;/style&gt;

All comments

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

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.

Davin Studer

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
&lt;style type="text/css"&gt;
	#title-text a::after {
    	content: ' NEW!';
	}
&lt;/style&gt;

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.

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!

Welcome!

It looks like you're new here. Sign in or register to get started.

Quick Links

Find more posts tagged with

confluence

confluence-administration

css

page-title