Showing results for 
Search instead for 
Did you mean: 
Sign up Log in
Deleted user
0 / 0 points
badges earned

Your Points Tracker
  • Global
  • Feed

Badge for your thoughts?

You're enrolled in our new beta rewards program. Join our group to get the inside scoop and share your feedback.

Join group
Give the gift of kudos
You have 0 kudos available to give
Who do you want to recognize?
Why do you want to recognize them?
Great job appreciating your peers!
Check back soon to give more kudos.

Past Kudos Given
No kudos given
You haven't given any kudos yet. Share the love above and you'll see it here.

It's not the same without you

Join the community to find out what other Atlassian users are discussing, debating and creating.

Atlassian Community Hero Image Collage

Custom CSS for Heading 1

I have tried changing the color and format of the Heading 1 style using the globa styles in admin, but I have had no success in it actually working. The font stays the same, the color stays the same, and nothing changes.

I checked in the Colors section as well and didn't find anything specifically for Heading 1, just general page headings, which did not change the color of the H1. How do I change this?

6 answers

Another approach rather than adding a style in the admin is to load a separate CSS file. Go to the Custom HTML panel in the admin, edit the "At the end of the HEAD" section, and point to it like this:

<link rel="stylesheet" href="/includes/css/mystylesheet.css" type="text/css">
THen put your new stylesheet in /confluence/confluence/includes/css/ on the server.

But won't that require all the styles to be defined anew? I simply want to override some of them throughout the site. Or am thinking about this incorrectly (it is Friday!)?

Additionally, I did try your suggestion, but the H1 was still unmodified. Is there additional information that needs to be added in the header custom HTML in Confluence?

Oh, ok, you mentioned the global styles in admin, so I assumed you wanted to change H1's everywhere. If you want to change it only on certain pages, then you can add an HTML macro to the page and define a local style with a <style> block. hth,


Ok. Let me clarify. I do want to change them everywhere. But I only want to override the default styles for certain styles throughout the site. For example, the heading styles but not, say, the table styles or preformatted text style.

I wanted to test if your suggestion of adding a new stylesheet would only override those styles listed, but I could not get it to work. No styles were updated/modified based on my CSS using the header information you provided above.

It was my understanding that custom style sheets by default overrided the batch CSS files, but I guess that might not be the case. Try adding !important at the end of each style setting in your custom CSS file, like this:

h1 {

color: red !important;


Also, use Chrome or similar app to ensure you're appyling the right style. You do this by viewing the element and hovering over it. The little yellow box shows the actual class that is defining the style.

In some cases, you might have to be more specific with the style class. For example:

h1.pagetitle {



That still didn't work. I'm trying to change the page title at it displays on the page. It's the title right below the breadcrumbs, and it says it's H1.

If you're using Chrome, try viewing the element and determining where the various settings are coming from. Try overriding the settings in the real-time editor so that you can be sure you're making a valid style change.

Also, see if your custom CSS is loading properly by looking at the assets that are being loaded.

Even when trying to update a style I know will update correctly when down through Admin, I can't get it to work through the Header custom HTML calling a stylesheet.

I'm at a loss. Maybe someone else can chime in with some info that I might have missed.

are you using Documentation Theme? AFAIK, the CSS will not be applied unless you specified it in a space-level CSS

.wiki-content h1 { color: red }

This worked when I put it in an HTML macro, in a <style> block. If there is more to know about .wiki-content, I'd like to hear it.

I know this is an older post and my workaround applies to space and not global changes but...

I changed the color in Look and Feel for a space. After doing so, I noticed that the space heading color changed on some headers, but not others. After playing with it, I discovered that I had gone and changed the heading color from the default causing it to ignore that space settings. 

Highlight the heading and select Clear Formatting. Then, highlight the text again and select the heading you wish and it should now appear with the space defined color.

Hope this helps.

Works for me with this:

#title-text a {
font-family: Roboto, sans-serif;
font-size: 64px;

Suggest an answer

Log in or Sign up to answer
Community showcase
Published in Confluence

🥓🙅🏻‍♀️ Meet-less May Badge!

Hello Confluence Community!  What if i told you that you could have a healthier life and be 100% meet-less? This month, we're promoting a healthy, balanced work diet with Confluence. (Read m...

530 views 3 23
Read article

Community Events

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

Find an event

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

Unfortunately there are no Community Events near you at the moment.

Host an event

You're one step closer to meeting fellow Atlassian users at your local event. Learn more about Community Events

Events near you