How do I override theme css to customize site css?

Katherine Wertz April 17, 2014

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
Answer accepted
David at David Simpson Apps
Marketplace Partner
Marketplace Partners provide apps and integrations available on the Atlassian Marketplace that extend the power of Atlassian products.
April 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
Rising Star
Rising Star
Rising Stars are recognized for providing high-quality answers to other users. Rising Stars receive a certificate of achievement and are on the path to becoming Community Leaders.
April 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.

Katherine Wertz April 22, 2014

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
Marketplace Partner
Marketplace Partners provide apps and integrations available on the Atlassian Marketplace that extend the power of Atlassian products.
April 23, 2014

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

1 vote
rsperafico
Atlassian Team
Atlassian Team members are employees working across the company in a wide variety of roles.
April 21, 2014

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
TAGS
AUG Leaders

Atlassian Community Events