CSS for headings

[Mick Davidson]

LO,

I want to customise the headings in my space but can't find the CSS for it. How can I get hold of this?

Cheers.

[Mick Davidson · Accepted solution]

OK, I've resolved the problem. I re-read the info that Abdoulae mentioned and noticed the bit about the CSS code review in Firefox.

I opened our wiki in FF and then went to Web Developer/Style Editor.

This opened a window that lists all the CSS a page has, seperated into different blocks/types of code. There's one called (this is only the end of the name) .doctheme.documentation/splitter.css which has all the headings info. This looked nothing like the CSS I found elsewhere on the internet (see above).

I coped this into the template, adjusted the margins and hey presto, I now have what I want. :)

For anyone else who might need to do this, this is what you are looking for:

.wiki-content h1 { margin-top: 2em; margin-bottom: .5em; font-size: 1.8em; }
.wiki-content h2 { margin-top: 2em; margin-bottom: .5em; font-size: 1.6em; }
.wiki-content h3 { margin-top: 1.5em; margin-bottom: .5em; font-size: 1.4em; }
.wiki-content h4 { margin-top: 1.2em; margin-bottom: .3em; font-size: 1.2em;}
.wiki-content h5 { margin-top: 1em; margin-bottom: .1em; font-size: 1.1em;}
.wiki-content h6 { margin-top: 1em; margin-bottom: .1em; font-size: 1.0em;}

Cheers.

[Mick Davidson]

OK, I've been playing with the following. But all this does is change the padding for the page title, not the h1. It also doesn't change the font colour.

h1 {

font-color: red;
padding-top: 10px;
padding-bottom: 3px;
}

I've also tried:

h1.heading {

font-color: red;
padding-top: 10px;
padding-bottom: 3px;
}

and:

h1 {

color: red;
padding-top: 10px;
padding-bottom: 3px;
}

So, can anyone see what I'm doing wrong here?

Cheers.

[Mary Parker]

It can be due to your CSS is getting overwritten by another. Try inspecting the H1 tag with your crome developer tools and you will find what is causing this overwritting thing. Thank You !!

[Abdoulaye Kindy Diallo]

Kindly consider both docs below:

• https://confluence.atlassian.com/display/DOC/Styling+Confluence+with+CSS
• https://confluence.atlassian.com/display/DOC/Customising+Site+and+Space+Layouts

[Mick Davidson]

Abdoulaye,

Thanks for th info. I've looked at these and the aren't detailed enough for what I want. I know nothing about CSS really, so need much more detail. Cheers.