How can I force my header CSS to load first

[Nicholas Thorne]

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). 

[Shannon S · Accepted solution]

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

[Nicholas Thorne]

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? 

[Nicholas Thorne]

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.

[Shannon S]

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:

• CONFCLOUD-57189

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