How do I change the way the content looks?

[Phil Pinder]

Hi,

I'm using Confluence 3.5. I want to change the way the content of my documentation looks but not the way the space looks. I cannot find which stylesheet(s) or classes I should modify to do this. I feel that it must be possible!

We use the Documentation Theme.

Any help would be very welcome!

Thanks

Phil

[Dennis Kromhout van der Meer · Accepted solution]

You can do this by going to Browse -> Confluence Admin -> Look and Feel -> Stylesheet. This stylesheet edits the look and feel site wide, not just restricted to a single space. However, as some variables are already set, you need to make sure you override them, which can be done with the "!important" attribute. For example, try the following css:

#main {
    background-color: SeaShell !important;
}

This should set the document background color to a pastel color instead of plain white. You can also use css to change the style of headers, paragraphs, lists, etc.

[Phil Pinder]

Hi Dennis, thanks for the reply. I just tried peeking some rendered HTML with Firebug to get the classes, then tried something out - it works! Great news, and thanks again. I'll remember the !important attribute too.

[Dennis Kromhout van der Meer]

Great to hear! I wish you good luck in customizing Confluence exactly the way you want, it's one of the things I really enjoy doing. Be sure to mark this as answered so that it helps others with similar questions :)

[David at David Simpson Apps]

Don't use !important. Just don't. That way trouble lurks !important.

Instead, increase the specificity if your selector doesn't work. One way of doing this is to hijack the id on the body tag e.g.

body#com-atlassian-confluence #main {
    background-color: hotpink;
}

[Phil Pinder]

OK thanks for the tip! I wonder what Dennis thinks about that?

[Dennis Kromhout van der Meer]

Actually, it depends, !important and specificity both have their pros and cons. Usually increasing specificity works, but this can cause the same amount of problems, especially as Confluence is already using so many css selectors. I've been in a lot of situations where increasing specificity in Confluence didn't solve the problem, and made the css less readable. As the linked article of David says:

"In CSS, the “!important” suffix was originally intended to provide a method of overriding author stylesheets."

If your intention is to override certain styles of Confluence, I think this is a perfectly valid use. However, when creating a style from scratch, you should never ever have to use !important :)