How do I add a banner above the page title on just one page?

We're using Confluence 5.2 with a customised theme, not the documentation theme. I'd like to insert a banner at the top of one page in a space and struggling to find out if this is possible. I've found some instructions about displaying a global banner or a banner for the whole space, but not for single pages. Can anyone help please?

2 answers

You can write a user macro that checks against the page name, and if the page name matches, then insert the banner content.

If you add the macro into the Layout Decorator, you can use the variable $title to get the page's title. Then wrap an if statement around your banner that looks for a page that matches the title string you want to match.

Thank you Matthew for your reply. It seems this is a little beyond my capabilities at the moment, and sounds like something we're going to look into to increase our knowledge of adapting Confluence to our needs.

Is this the only way to do it?

It's the easiest way to do it that I could think of.

0 vote
Davin Studer Community Champion Jan 15, 2014

You could also do this by creating a user macro that simply has a css block in it that uses the :before pseudo selector to insert dynamic content. Then just include the user macro on that page at the bottom of your content ... or anywhere really. The :before pseudo selector will create a block of content before any other content in the targeted css element(s). So,if you wanted something to appear above the top nav bar, for instance, the css for this would be ...

<style>
#page:before {
display: block;
content: "content";
background: #FFFF00;
}
</style>

You could style this block however you want using css. I just gave it a yellow background to show you how it can be styled.

Davin Studer Community Champion Jan 15, 2014

Here is an example of a user macro...

Macro Name:
banner

Macro Title:
Banner

Macro Body Processing:
No Body

Template:
## Developed by: Davin Studer
## Date created: 01/16/2014
## @paramText:title=Banner Text|type=string|required=true|desc=Enter the text to display in the banner. (required)

<style>
#page:before {
display: block;
content: '$paramText';
background: #FFFF00;
}
</style>

Thank you Davin for your suggestions. This is something more like I was thinking of. I tried creating a user macro based on your example and inserted it onto the page, but unfortunately it doesn't display the banner.

I would need to extend this macro further and allow several lines of text with formatting and the ability to include links to other pages. I'm a new user of Confluence so it may take me some time. Any good tips on where to learn this 'stuff'?

Davin Studer Community Champion Jan 21, 2014

Not sure this solution would work super well for something like that as is if you need to add links and stuff. It would work fine for static content, but not more advanced stuff. Maybe a better thought would be to insert it at the top via javascript. That way you could have more of that kind of dynamic content. I'll alter the user macro a bit. In the meantime you could check out these pages if you want to learn a bit on user macros and velocity(the language used in user macros). Unfortunately the documentation by Atlassian for user macros is pretty slim and it takes a bit of wrestling sometimes to get Velocity to do what you want. It is a pretty slim scripting model. The Answer's site has a number of examples of user macros and Velocity so it is a pretty good resource as well. Also the last link below is a page with a bunch of community created User Macros that if nothing else is a good place to look at some code for a little help.

https://confluence.atlassian.com/display/DOC/Guide+to+User+Macro+Templates

https://developer.atlassian.com/display/CONFDEV/Confluence+Objects+Accessible+From+Velocity

http://velocity.apache.org/engine/releases/velocity-1.5/user-guide.html

https://confluence.atlassian.com/pages/viewpage.action?title=Shared+User+Macros&spaceKey=DISC

Davin Studer Community Champion Jan 22, 2014

Try this. You will have to edit the style for #custombanner to look the way you want it to. The javascript in this user macro will take whatever you put in the body of the macro and will insert a div at the top of the page and put that content into the div. The banner macro body can contain any confluence macros. If you put in html it will get escaped out, so if you need to link to something do it the same way you would create a link in Confluence ... via the link button in the edit bar.

Macro Name:
banner

Macro Title:
Banner

Macro Body Processing:
Rendered

Template:
## Developed by: Davin Studer
## Date created: 01/16/2014
## @noparams

<style type="text/css">
#custombanner {
display: block;
background: #FFFF00;
}
</style>

<script type="text/javascript">
AJS.toInit(function() {
console.log(AJS.$('body').hasClass('edit'));
if('$!body'.trim() != '' && AJS.$('#custombanner').length == 0) {
AJS.$('#page').prepend('<div id="custombanner">$!body</div>');
}

AJS.$('#editPageLink').click(function() {
AJS.$('#custombanner').addClass('hidden');
});
});
</script>

Fantastic Davin. Thank you for posting. I'll give this a try.

Davin Studer Community Champion Feb 05, 2014

Did this work for you?

Apologies Davin. I got sidetracked by another project but I should be able to try it later this week. I'll let you know how it goes.

Thank you!

Suggest an answer

Log in or Sign up to answer
Atlassian Community Anniversary

Happy Anniversary, Atlassian Community!

This community is celebrating its one-year anniversary and Atlassian co-founder Mike Cannon-Brookes has all the feels.

Read more
Community showcase
Kesha Thillainayagam
Posted Friday in Confluence

We want to hear how your non-technical teams are using Confluence!

Hi Community! Kesha (kay-sha) from the Confluence marketing team here! Can you share stories with us on how your non-technical (think Marketing, Sales, HR, legal, etc.) teams are using Confluen...

251 views 11 10
Join discussion

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