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?

5 answers

This widget could not be displayed.

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?

This widget could not be displayed.

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,

matt

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.

This widget could not be displayed.

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

This widget could not be displayed.

.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.

This widget could not be displayed.

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.

Suggest an answer

Log in or Sign up to answer
Community showcase
Posted Monday in Confluence

Why start from scratch? Introducing four new templates for Confluence Cloud

Hi my Community friends!  For those who don't know me, I'm a product marketer on the Confluence Cloud team - nice to meet you! For those of you who do, you know that I've been all up in your Co...

503 views 7 6
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