nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Custom CSS for Heading 1

MarkC_iw78sa

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?

Accepted answers

All comments

Matthew J. Horn

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.

MarkC_iw78sa

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?

Matthew J. Horn

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

MarkC_iw78sa

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.

Matthew J. Horn

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 {

...

}

MarkC_iw78sa

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.

Matthew J. Horn

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.

MarkC_iw78sa

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.

Nat4

.wiki-content h1 { color: red }

Robin Rodrigue

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.

Shawn Wilson_g4ajat

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.

20000263

Works for me with this:

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