Get product advice from experts

Ask a question →

Join a community group

Find a group →

Advance your career with learning paths

Take a free class →

Earn badges and rewards

Connect and share ideas at events

See the calendar →

Community
Answers Developer Questions
Questions
Changing The Body Tag for Individual Confluence Pages

Changing The Body Tag for Individual Confluence Pages

Hello!

I am trying to customize a CSS menu from within Confluence so that the active page displays in a different color than the other menu items. I believe this can be accomplished by altering the "body" tag within the HTML of a given page (<body id="homepage"> for example). Unfortunately, as far as I know, you can only modify the "body" element for every page within Confluence - I am looking to add a body id for each individual page. Is there any way that this can be accomplished? Any help would be greatly appreciated.

Thank you for a great product!

8 answers

Comments for this post are closed

Community moderators have prevented the ability to post new answers.

Post a new question

1 vote

The body ID in Confluence is set to the product signature, so you can't actually change that without (likely) breaking things:

<body ... id="com-atlassian-confluence" class="theme-default dashboard">

So you would need to apply the ID as a class, eg:

<body ... id="com-atlassian-confluence" class="theme-default dashboard page-123456">

It will work the same way for your CSS, albeit with a lower selector weight but it will identify the page for you.

Content pages do have a page ID number available in the dom:

<meta name="ajs-page-id" content="1964970115">

You could prefix that number (because IDs must start with a letter), eg. pageid1964970115 and use that a class.

However the velocity code to add that escapes me, maybe someone else can comment with that info as this should really be done in the Velocity (you could patch it in with some javascript but you are likely to see some page redraw that way).

You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.

Comment

Reply

0 votes

Providing a wireframe of what you're trying to achieve may help, because that might not be the best or only way how to achieve your goal.

You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.

Comment

Reply

0 votes

You can't modify the <body> element of each page; the ID of the body is already used by Confluence and if you change it things will start breaking.

There is already information in the page header that can be used to identify the page ID (eg. look at the <meta name="ajs-page-id"> tag), which you could access using Javascript or by editing the Confluence theme to include this information as a class on the body.

You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.

Comment

oops, snap ;)

You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.

Comment

Like

I voted for your answer, since I just regurgitated what you IM'ed to me :-p

You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.

Comment

Like

Thank you to everyone who has helped on this issue thus far. I really appreciate all of the help you provide for your wonderful service.

You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.

Comment

Like

Reply

0 votes

Not to pry, but are there no answers for this? My basic question concerns whether or not I can actually modify the body tag to include an ID on each individual page. Is this even possible?

You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.

Comment

Reply

0 votes

It's a CSS menu. I'm still learning CSS, but basically, what I'm trying to do is get the current page, let's say "Home" to display as a different color from the other links, signifying to the website user which page they are currently on. Using CSS, it seems I can do this; however, I need to be able to modify the "body" tag in HTML so that I can give each individual page an ID, such as <body id="homepage">. Thus, my question is, can I modify the "body" tag in this way? I am currently using the Adaptavist Theme Builder Plugin to make changes to my current layout.

You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.

Comment

Reply

0 votes

Ok, so what is this menu you're trying to customise? Is it something built in to Confluence or something else that's been installed or customised? perhaps via a plugin?

You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.

Comment

Reply

0 votes

By active page, I mean the page which the user is already on/viewing.

You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.

Comment

Reply

0 votes

What do you mean by "active page"?

You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.

Comment

Reply

Comments for this post are closed

Community moderators have prevented the ability to post new answers.

Post a new question

Was this helpful?

Thanks!

Answers Developer Questions

TAGS