How do I override theme css to customize site css?

Katherine Wertz

We use the Documentation and default themes throughout our Confluence site. I would like to add the following css to the site stylesheet to override the default page title text appearance:

h1#title-text {

font-weight: bold;

color: #626262; !important

-webkit-margin-before: 0.67em;

-webkit-margin-after: 0.67em;

-webkit-margin-start: 0px;

-webkit-margin-end: 0px;

font-family: Arial, sans-serif;

}

h1#title-text a {

font-weight: bold;

color: #626262; !important

-webkit-margin-before: 0.67em;

-webkit-margin-after: 0.67em;

-webkit-margin-start: 0px;

-webkit-margin-end: 0px;

font-family: Arial, sans-serif;

}

As per what the Global Stylesheet page in the admin menu says, my Global Stylesheet css doesn't override the theme css (when I add this css to the individual space stylesheets, it does override the theme settings). As most of our spaces use themes, how do I override the theme css site-wide?

Thanks!

David at David Simpson Apps

Having fixed any typos in your CSS, be more specific if needed. !important doesn't impress too many people, but has its place.

My sledgehammer approach is to up the specificity like a demon:

#com-atlassian-confluence h1#title-text {
   /* your stuff here */
}
  
#com-atlassian-confluence h1#title-text a {
   /* your stuff here */
}

If the styles are the same, then write less code like so:

#com-atlassian-confluence h1#title-text,
#com-atlassian-confluence h1#title-text a 
{
   /* your stuff here */
}

This will hit the spot. Some tips on specificity.

If I remember correctly, space stylesheets override the global, so you're back at square one.

If you want to be sure to override all styles, you can be really sneaky and add it into the Custom HTML | At the end of the HEAD rather than a global stylesheet.Try this instead:

<style>
#com-atlassian-confluence h1#title-text,
#com-atlassian-confluence h1#title-text a 
{
   /* your stuff here */
}
</style>

This will appear on every page, so override styles throughout.