It's not the same without you

Join the community to find out what other Atlassian users are discussing, debating and creating.

Atlassian Community Hero Image Collage

How can I force my header CSS to load first

The header and footer I am using for my confluence site make some significant changes to the visual user interface to make the website more comfortable to members of the public who may not have used the confluence ui before, and are not members of our organisation. 

Some of these changes affect the styling of the confluence side bar, which works fine once the website is completely loaded however before the header and footer are loading there is a brief flicker in which the orginal user interface can be seen, which doesnt look great. 

I am wondering if there is a good way of fixing this issue within confluence cloud, I went looking for a way to edit the sites actual css but it seems this feature has been disabled (probably to stop people like me doing this). 

1 answer

1 accepted

1 vote
Answer accepted


Using Custom CSS at all is a Restricted Function of Confluence Cloud, and actually shouldn't be working at all.

What sort of CSS were you inserting on your Header/Footer? You should only be able to use plain text and Wiki Markup here.



I was just using a style macro on a page, which gets {include:_Header} to get the css in the header (and footer), curious as to why you would restrict custom css at all? Maybe for low-level users, you don't want to restyle the whole site but why stop the site administrators from doing some site-wide changes? 

Also if allowing the CSS in the header is an error please leave the bug in the software, our external documentation site is currently looking fairly good because of it, and I'm sure there are plenty of other people who would also be fairly bummed if the ability to style their pages got taken away.

Hi Nicholas,

Thank you for your patience while I researched this for you.

Prior to the New Look in Confluence, users were able to workaround the Custom CSS Restriction with macros, such as {css} (now deprecated) and {style}.

At this time, you can still use it for some customization, but once that customization falls outside of what the macro is able to control, it won't work.

Have a look at this:

At this time you can still do some customizations using the {style} macro, but I predict in the future that this may no longer work, so be aware of that. 

The reason we restrict it is for a few reasons:

  1. Users would style parts of a page using CSS, and expect it to be maintained such as API is.
  2. The Cloud environment is constantly updated. It is unlike Server, where you could stay on one version for a while and your CSS will work. In Cloud, your CSS customization could work on Friday and by Monday no longer functions as expected. This would cause a negative experience for users.
  3. In the New Look, the {style} macro only affects page content, and not surrounding areas, as you have seen.
  4. Additionally, we have found that custom CSS can cause other aspects of the page to break.

You may be able to use 3rd party theming add-ons such as Refined Spaces for Confluence

Let me know if you have any questions!



Suggest an answer

Log in or Sign up to answer
Community showcase
Published in Confluence

6 Awesome Ways to Apply Trello, JIRA and Confluence to your Project

I attended  Atlassian Summit 2019  and learned a lot from the presenters, attendees and knowledgeable Atlassian product managers. The presentations I attended focused on applying Agile, pla...

3,764 views 15 37
Read article

Community Events

Connect with like-minded Atlassian users at free events near you!

Find an event

Connect with like-minded Atlassian users at free events near you!

Unfortunately there are no Community Events near you at the moment.

Host an event

You're one step closer to meeting fellow Atlassian users at your local event. Learn more about Community Events

Events near you