Documentation Theme: Global CSS (in external file)

Stefan Eike
Rising Star
Rising Star
Rising Stars are recognized for providing high-quality answers to other users. Rising Stars receive a certificate of achievement and are on the path to becoming Community Leaders.
January 22, 2013

Hi,

I would like to have two global CSS files in Confluence. I read the post "How do I override css / styles in the documentation theme?", but it did not help me so far.

I would like to have:

  • One stylesheet for the Dashboard and all themes, including specifications for header and fonts.
  • One stylesheet for the Documentation theme with special stuff.

I tried to import the stylesheet via Admin Panel > Administration > Look and Feel > Custom HTML > At end of the HEAD.

<link rel="stylesheet" type="text/css" href="http://my.confluence.url.com/download/attachments/14073389/confluence.css" />

But that does not work in spaces, which are using the documentation theme, even if I specify the ID at the body element:

body#com-atlassian-confluence.theme-documentation

The CSS does only work, if I use it in a space stylesheet via My Space > Space Administration > Space Stylesheet.

I'd appreciate any kind of help.

Thank you very much and best regards!

Stefan

5 answers

1 accepted

1 vote
Answer accepted
Daniel Borcherding
Rising Star
Rising Star
Rising Stars are recognized for providing high-quality answers to other users. Rising Stars receive a certificate of achievement and are on the path to becoming Community Leaders.
January 22, 2013

Hello Stefan,

I mocked this up in my own instance and it seems to be working alright. If you past the link to your stylesheet in another window are you presented with the css that you expect?

You also may want to try uploading the stylesheet to a third party host. This would ensure there is no confounding factor of the content ID of the attachment being changed and you linking to an old version of the document.

If you have physical access to the machine and are running on our standalone version of Confluence the webroot is the <confluence_install>/confluence directory. You could make a css folder here and link to your stylesheet that way.

1 vote
Stefan Eike
Rising Star
Rising Star
Rising Stars are recognized for providing high-quality answers to other users. Rising Stars receive a certificate of achievement and are on the path to becoming Community Leaders.
January 23, 2013

Hi Daniel,

thanks for your reply.

If you past the link to your stylesheet in another window are you presented with the css that you expect?

No, Confluence tried to download the file, instead of rendering it. I found the error. The CSS had the wrong content type.

I had to change it from application/x-upload-data to text/css. Now it works!

BEFORE


AFTER



Daniel Borcherding
Rising Star
Rising Star
Rising Stars are recognized for providing high-quality answers to other users. Rising Stars receive a certificate of achievement and are on the path to becoming Community Leaders.
January 23, 2013

Stefan,

Excellent catch! Sounds like you have a good handle on how this fix works.

Enjoy your upvotes!

Stefan Eike
Rising Star
Rising Star
Rising Stars are recognized for providing high-quality answers to other users. Rising Stars receive a certificate of achievement and are on the path to becoming Community Leaders.
January 23, 2013

Hi Daniel,

thanks! Unfortunately the content-type switches back to application/x-upload-data, if I upload the file again. That does not make sense to me, because the object should have a content-type and not its version.

0 votes
Sean King
Rising Star
Rising Star
Rising Stars are recognized for providing high-quality answers to other users. Rising Stars receive a certificate of achievement and are on the path to becoming Community Leaders.
January 24, 2013

You can also post external style sheets using regular confluence markup. Not sure if you've tried this in the documentation theme's customation menu.

Wiki Markup would be:

{style:import=url}{style}

I haven't had any issues attaching an external .css file with this method.

0 votes
Stefan Eike
Rising Star
Rising Star
Rising Stars are recognized for providing high-quality answers to other users. Rising Stars receive a certificate of achievement and are on the path to becoming Community Leaders.
January 22, 2013

Strange, removing the last two stylesheets did not help. Firebug tells be, that my resource is not text...

0 votes
Stefan Eike
Rising Star
Rising Star
Rising Stars are recognized for providing high-quality answers to other users. Rising Stars receive a certificate of achievement and are on the path to becoming Community Leaders.
January 22, 2013

There is another stylesheet in the header after my own. Maybe this stylesheet overrules mine.

Suggest an answer

Log in or Sign up to answer
TAGS
AUG Leaders

Atlassian Community Events