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 · Accepted solution]

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.

[Davin Studer]

Also, a great way to find the specificity that you need is to use the Chrome Developer tools. Right click the element and click "Inspect Element". Then on the right hand side click on Computed tab and find the style that you want to override. Click the little triangle thingy on the left to expand it to find out what style currently has the max specificity and simply override that style. Screenshot below.

[Katherine Wertz]

Thanks all for your help. :) As David S. suggested, inserting the following into the Custom HTML in the At the end of the HEAD section successfully overrides the theme/space styles.

<style>
#com-atlassian-confluence h1#title-text,

#com-atlassian-confluence 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;  

}  
</style>

Also, thanks Davin for the Chrome Developer tools suggestion.

[David at David Simpson Apps]

@Katherine Wertz Feel free to upvote/mark as correct the answers + comments that helped ;)

[rsperafico]

Hi Katherine,

There is a semi-colon misplaced on your CSS.
Please have a look to line 5 and line 23 on your comment above.

I have done the appropriated correction as per following:

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;
}

—

Kind regards,
Rafael