nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

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!

Accepted answers

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

&lt;link rel="stylesheet" type="text/css" href="protocol://server/path/to/style.css" /&gt;

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.

All comments

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/

David at David Simpson Apps

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

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

tominwood

Hi Alain:

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

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)

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

&lt;link rel="stylesheet" type="text/css" href="protocol://server/path/to/style.css" /&gt;

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

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

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

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

&lt;link rel="stylesheet" type="text/css" href="protocol://server/path/to/style.css" /&gt;

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

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

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

&lt;link rel="stylesheet" type="text/css" href="/path/to/style.css" /&gt;

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.

Kenn North1

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 North1

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 North1

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.

Miles Jordan1

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;

}

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 Patel3

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.

Bob Murata

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

Lilian Tong_62w03c

Thank you! This is perfect!

Welcome!

It looks like you're new here. Sign in or register to get started.

Quick Links

Find more posts tagged with

confluence

documentation

css

theme