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

[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?

[Davin Studer]

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]

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>

[Liz Canham]

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]

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]

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>

[Liz Canham]

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

[Davin Studer]

Did this work for you?

[Liz Canham]

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!

[Matthew J. Horn]

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.

[Liz Canham]

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?

[Matthew J. Horn]

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