How do I override theme css to customize site css?

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!

2 answers

1 accepted

2 votes
Accepted answer
David Simpson Community Champion Apr 22, 2014

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 Community Champion Apr 22, 2014

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.

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 Simpson Community Champion Apr 23, 2014

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

1 vote

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

Suggest an answer

Log in or Sign up to answer
Community showcase
Posted Oct 24, 2018 in Confluence

Atlassian Research opportunity with Confluence templates

Do you use templates with Confluence? Take part in a remote 1-hr workshop. You'll receive USD $100 for your time!   We're looking for people to participate in a   remote 1-hr workshop...

1,177 views 20 14
Join discussion

Atlassian User Groups

Connect with like-minded Atlassian users at free events near you!

Find a group

Connect with like-minded Atlassian users at free events near you!

Find my local user group

Unfortunately there are no AUG chapters near you at the moment.

Start an AUG

You're one step closer to meeting fellow Atlassian users at your local meet up. Learn more about AUGs

Groups near you