How do I add a banner above the page title on just one page?
Asked by Liz Canham:

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?


Answers:
author: Davin Studer
body: 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.

comments: author: Davin Studer
body: 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\>


author: Liz Canham
body: 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'?


author: Davin Studer
body: 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://confluence.atlassian.com/display/DOC/Guide+to+User+Macro+Templates>

[](https://developer.atlassian.com/display/CONFDEV/Confluence+Objects+Accessible+From+Velocity)<https://developer.atlassian.com/display/CONFDEV/Confluence+Objects+Accessible+From+Velocity>

[](http://velocity.apache.org/engine/releases/velocity-1.5/user-guide.html)<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)[https://confluence.atlassian.com/pages/viewpage.action?title=Shared+User+Macros\&spaceKey=DISC](https://confluence.atlassian.com/pages/viewpage.action?title=Shared+User+Macros&spaceKey=DISC)


author: Davin Studer
body: 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\>


author: Liz Canham
body: Fantastic Davin. Thank you for posting. I'll give this a try.


author: Davin Studer
body: Did this work for you?


author: Liz Canham
body: 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!


author: Matthew J. Horn
body: 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.

comments: author: Liz Canham
body: 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?


author: Matthew J. Horn
body: It's the easiest way to do it that I could think of.