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
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
Atlassian Community Anniversary

Happy Anniversary, Atlassian Community!

This community is celebrating its one-year anniversary and Atlassian co-founder Mike Cannon-Brookes has all the feels.

Read more
Community showcase
Kesha Thillainayagam
Posted Apr 13, 2018 in Confluence

We want to hear how your non-technical teams are using Confluence!

Hi Community! Kesha (kay-sha) from the Confluence marketing team here! Can you share stories with us on how your non-technical (think Marketing, Sales, HR, legal, etc.) teams are using Confluen...

385 views 21 10
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