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

Accepted Answer
1 vote

Nicholas,

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.

Regards,

Shannon

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!

Regards,

Shannon

Suggest an answer

Log in or Sign up to answer
Community showcase
Posted Oct 11, 2018 in Confluence

What are your project planning tips?

Hello Community,  Jessica here from the Confluence product marketing team! Today I wanted to get your takes on project planning –– what works, what doesn’t, how do you know if you’re doing it r...

210 views 0 3
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