Atlassian Confluence Look & Feel Tricks: Adding Info to the Page Header and Footer

March 25, 2014
#How To#Confluence
5 min
Edit long Confluence pages by parts with InPlace Editor.  Check the demo and try for free.

If you ever wondered how to share some important info with all Confluence users, here’s the answer – try using headers and footers. You can rest assured that a message added to the header will be read by everyone who opens Confluence. And keeping stuff like useful links in the footer is more productive than searching for it in Confluence or in bookmarks.

Follow the steps below to try this out. Please, note that we assume that you’re using the standard theme on Confluence 5.4. Other themes have their own ways of customizing headers and footers. And the code we provide here can be slightly different for other Confluence versions.

Ok, let’s say we want to make some global warning for everyone working with Confluence. To do that, we need to go to Confluence Admin – Look&Feel – Custom HTML and add something like this to the At beginning of the BODY section:

<div>
    <p>
        <span></span>
        <strong>Hey guys!</strong>
    </p>
    <p>Confluence is going to be down from 4pm.</p>
</div>

Save the changes and see how it looks like in Confluence:

Header

If you want to make the message look different from this example, you can choose various message styles in Atlassian AUI.

Being a less prominent part of a pafe than the header, the footer can, however, contain important info you want always be at hand, for example, a privacy policy or help links. Although Atlassian provides some recommendations on changing footers, they involve editing Confluence files and system restarting.

We’d suggest an easier way to change the footer. Again, in Confluence Admin – Look&Feel – Custom HTML, add the code for the Privacy Policy and Support links (lines 4 and 5) to the At end of the BODY section:

<script type="text/javascript">
AJS.toInit(function ($) {
    AJS.$("div#footer .footer-body").prepend("<ul id='footer-custom-links'/>");
    AJS.$("ul#footer-custom-links").append("<li class='noprint'><a href='https://stiltsoft.com'>Privacy Policy</a></li>",
                                           "<li class='noprint'><a href='https://stiltsoft.desk.com/customer/portal/emails/new'>Support</a></li>");
});
</script>

And your footer will look like this:

footer

Please, note that according to the Atlassian EULA you can’t remove the Powered by Atlassian Confluence line from the footer. So be careful about this when experimenting.

For other our posts about Confluence customization, see here. Follow us on Twitter and Facebook to stay tuned for future hints and tricks.