Custom CSS broken
Asked by KPAH:

I've switched from 4.3 to 5.x and oh boy I'm frustrated. The 5 added no value apart from even less "businness-like" outlook. Yet it managed to move all the buttons around just the way Adobe does with every new version of their stuff, without changing anything. Confluence 5 also has almost all own and plugin generated html-output changed, that includes classes and id's in the page source, without any obvious reason. Now I have to redo dozens of user macros I wrote to overcome Confluence 4 flashy ugliness to make them work in my fresh install (not migration) of Confluene 5.

Anyway, current problem at hand is I cannot get Custom Stylesheet to work.

This what I had in Confluence 4 custom stylesheet for my space:

1. .wiki-content h1 {color: #365F91;}
2. 
3. .wiki-content h2 {color: #4F81BD;}

I enabled Custom Stylesheets in Admin/Security. I go to Look at feel in Space Admin (theme is Documentation), and add the following custom CSS

1. .main-content h1 {color: #365F91;}
2. 
3. .main-content h2 {color: #4F81BD;}   

It doesn't work. I try this

1. h1 {color: #365F91;}
2. 
3. h2 {color: #4F81BD;}

It also doesn't work.

Then I go to Custom HTML in Admin and add this to header OR footer:

1. {style}
2. .main-content h1 {color: #365F91;}  
3. .main-content h2 {color: #4F81BD;}
4. {style}

It doesn't work!

I tried adding this directly to the page via html macro, but it just renders it as text.

All I want to do is to make the h1 and h2 headings in content-main less ugly.

Please confirm this feaute evene works in Confluence 5 anymore.


Answers:
author: Steve Gerstner [bridgingIT]
body: Why do you add this to the header or footer and don't use the option to define it in the (space) admin screens: <https://confluence.atlassian.com/display/DOC/Styling+Confluence+with+CSS>

comments: author: KPAH
body: you didn't read my question, did you? "I enabled Custom Stylesheets in Admin/Security. I go to Look at feel in Space Admin (theme is Documentation), and add the following custom CSS"

also I'm aware of that piece of manual you are refering to. Apart from low quality (opensource project have better writers), it is outdated and even the given example about header image doesn't work.


author: Steve Gerstner [bridgingIT]
body: Ok, then I was a little bit confused from sthe style-tags and your wiki markup.

The custom CSS-page is like an editor for css, you don't need html-tags inside, just plan css.


author: KPAH
body: could you provide code of what exactly should I enter into this css stylesheet to have h1 blue and h2 red?


author: KPAH
body: aaand have you tried it yourself in a Confluence 5.x documentation themed space?


author: Steve Gerstner [bridgingIT]
body: h1 { color: blue !important; }

h2 {color: red !important; }


author: Steve Gerstner [bridgingIT]
body: Yes, and it works as it should.

go to /spaces/viewstylesheet.action?key=\<yourSpaceKey\>

and enter:

p {color:red !important;}

Take care, that headings in Confluence are often links too, and then the linkcolor wins.

Look at this screenshot, it's a confluenc 5.4 (in German):

![](../../upfiles/cssConfluence_1.png)


author: KPAH
body: yeah important made all the difference. I also like how f... up this screenshot looks if you add another line)

Thank you!


author: Stefan Niedermann
body: Maybe the problem is, that you are using Wiki-Markup? Already tried to use

```
&lt;style type="text/css"&gt;&lt;/style&gt;
```

comments: author: KPAH
body: A nice suggestion indeed.

I added that to Custom CSS in admin. No go.

I also compiled:

```
&lt;style type="text/css"&gt;h1 {color: red;}h2 {color: blue;}&lt;/style&gt;
```

and entered in as a html macro on the page with h1 and a h2. they remain black.

Could you try it in your install? May be my hands are totaly out of my butt.


author: Stefan Niedermann
body: Works fine for me, i'm trying to attach a screenshot, but the atlassian answers-wysiwyg-editor is crap...

maybe your css is not important enough?

i tried (to test it) this: \<style type="text/css"\>\* {color: red !important;}\</style\>


Tags: confluence-administration