How do I override css / styles in the documentation theme?

[tominwood]

Hi!

I'm trying to apply CSS to the confluence using both the global stylesheet page and space-specific stylesheet pages. Nothing seems to have any effect!

I'm testing with the following basic CSS and nothing happens:

h2 {

color: red;

}

.div {

background-color: red;

}

Please help!

[David at David Simpson Apps · Accepted solution]

Another maybe slightly hacky approach would be to externally host your CSS file...

In Confluence Admin | Look & Feel | Custom HTML

...reference your external CSS in At the end of the HEAD

<link rel="stylesheet" type="text/css" href="protocol://server/path/to/style.css" />

In the external CSS, prefix all your styles to be documentation theme specific, e.g.

body#com-atlassian-confluence.theme-documentation h2 {
  /* formatting here */
}

As your CSS is loaded last, it will overide the default. The stylesheet would be loaded for all themes, but body#com-atlassian-confluence.theme-documentation prefix will target the documentation theme only.

This approach overcomes problems such as the global custom stylesheet not being displayed when the Documentation theme is not the default theme.

[tominwood]

That's actually a pretty good idea...

I wonder if I could reference a css file that is uploaded to confluence maybe...

[David at David Simpson Apps]

Sure, why not. Reduce to...

<link rel="stylesheet" type="text/css" href="/path/to/style.css" />

[Alain Moran]

Yes, you should be able to reference an attachment on a page, however this will lead to it not having been given the headers that are required to ensure the browser caches it (since most often when you want an attachment you want to do the opposite - IE ensure that the copy you download is the latest version)

You can also store files in the images folder (the same place confluence gets many of it's icons from)

A final alternative would be to use a theme that is deliberatley designed around being customised - theme builder is a good example of this, however it has a pretty steep learning curve. Refined Wiki can also be customised to some extent.

[Sharon Hinde]

Alternatively you could simplify David's answer by writing your css into the head instead of linking to a style sheet. This would work well for those who can access the Confluence admin section but cannot add resources to the filesystem.

Example (In Confluence Admin | Look & Feel | Custom HTML | HEAD):

<style type="text/css">
#header {
    background-color: #cc3300;
}
</style>

[Miles Jordan]

All of the above answers go way too far.

You just need to set the style for ".wiki-content h2" instead of just "h2":

.wiki-content h2 {

color: red;

}

[Bob Murata]

This is exactly what I needed! Way simpler than some of the other answers. Thanks!

[Lilian Tong]

Thank you! This is perfect!

[David Boden]

Atlassian team, I see people on this comment thread trying to update heading styles (.h1, .h2 etc.). Would you please consider improving the styles that come installed as standard? There's nowhere near enough difference between .h1 and .h2. Both are underlined and difficult to distinguish. Please treat this request to change the styles as an indication that the styles are not satisfactory at the moment. Thanks.

[Hemal Patel]

I so agree. The existing CSS is way too old-fashioned. The editor doesn't offer many options either. It becomes very difficult to create an interactive technical document.

[Alain Moran]

Depending on confluence version, global css will not be applied unless you are using the default theme.

Also to make your styles apply you will need to use css that is more 'specific' than that supplied by confluence, for example if you want to make a div and then style it you would need to refer to the css class applied to the div, eg:

{div:class=mydiv} some content {div}

with css

div.myclass { background-color: red; }

Note that in css the 'type' of the element goes before the . and the classname applied to the element comes after, so your example css would apply to elements of all types whose css classname was 'div'.

You may find the w3schools tutorial pages handy: http://www.w3schools.com/css/

[tominwood]

Hi Alain:

I'm reasonably CSS proficient normally - the .div was just a typo and was meant to just be a div :)

[Kenn North]

The other way to do it is...

There is a CSS file within the doctheme jar called splitter.css. That contains the CSS for the theme. If you overwrite that will all you need you should be good to go.

Extract, the atlassian-bundled-plugins.zip
Extract doctheme-1.9.jar (or whatever version you have)
Edit the decorators in \doctheme\decorators
Edit the CSS in \doctheme\splitter-1.5.1

zip the files up again to doctheme-1.9.jar, overwrite to old one and zip up atlassian-bundled-plugins.zip..

Put atlassian-bundled-plugins.zip back where it goes on the server and restart.

I have done this on 3.5.3

[Alain Moran]

If you are going to go to this extreme, then rather than replacing the bundled plugins zip, I would suggest also editing the atlassian-plugin.xml file and changing the 'key' of the theme - you can then upload this in the normal way and it will appear as a separate theme to the inbuilt one (making it much more convenient for updating as you develop your changes)

More information can be found here:
http://confluence.atlassian.com/display/CONF31/Creating+a+Theme
https://developer.atlassian.com/display/CONFDEV/Theme+Module

[Kenn North]

Fair point and I think I'll do that, for the most part my response answers the question of how to modify the CSS of the documentation theme, which I didn't see answered very clearly and I had to figure it out myself. Your suggestion is a good one once you learn how to edit these themes.

[Kenn North]

I changed the key and it repackaged the files, and uploaded the theme. However I cannot choose it as a theme in a Space. Not sure why.

[David at David Simpson Apps]

Another maybe slightly hacky approach would be to externally host your CSS file...

In Confluence Admin | Look & Feel | Custom HTML

...reference your external CSS in At the end of the HEAD

<link rel="stylesheet" type="text/css" href="protocol://server/path/to/style.css" />

In the external CSS, prefix all your styles to be documentation theme specific, e.g.

body#com-atlassian-confluence.theme-documentation h2 {
  /* fornatting here */
}

As your CSS is loaded last, it will overide the default. The stylesheet would be loaded for all themes, but body#com-atlassian-confluence.theme-documentation prefix will target the documentation theme only.

This approach overcomes problems sure as the global custom stylesheet not being displayed when the Documentation theme is not the default theme.

[tominwood]

Hi Alain:

I'm reasonably CSS proficient normally - the .div was just a typo and was meant to just be a div :)

David:

Do you mean this?

#com-atlassian-confluence h2 {
color: red;
}

I have also tried:

#com-atlassian-confluence h2 {

color: red !important;

}

and

.wiki-content h2 {

color: green !important;

}

But this doesn't make much difference

[David at David Simpson Apps]

Try prefixing selectors with #com-atlassian-confluence selector { ... } This should aide things

[tominwood]

David:

Do you mean this?

#com-atlassian-confluence h2 {
color: red;
}

I have also tried:

#com-atlassian-confluence h2 {

color: red !important;

}

and

.wiki-content h2 {

color: green !important;

}

But this doesn't make much difference

[Alain Moran]

Confluence CSS can quite specific when it comes to heading styles ... your best bet is to use a tool like firebug to find out what is being used to apply the current style and then go one more layer more specific ... I've not done much customisation of the documentation theme since, oddly enough, we tend to use builder quite a bit :)

[tominwood]

I've tried adding

#main #content .wiki-content .sectionMacro .confluenceTd h2 {

color: green !important;

}

to the global stylesheet - but it has no effect.

Do I need to be more more specific than this?

It seems crazy that it is so complex to make minor CSS tweaks to the documentation theme (which is shipped as part of confluence - and which many people are using)

T

[tominwood]

It looks to me, like the contents of the global stylesheet page are not be applied to the Documentation theme at all (as in, the css file is not being referenced). So my only option currently is to copy and paste the same CSS to each space. And to update each space whenever I make a change. Is this really the suggested way of tweaking the appearance of the documentation theme?

I have been using Jquery to add inline styles using the custom HTML page - but this isn't exactly efficient either!