Custom CSS for Heading 1

MarkC
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.
August 22, 2013

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

0 votes
Guy Olivier de Saint Albin April 16, 2021

Works for me with this:

#title-text a {
font-family: Roboto, sans-serif;
font-size: 64px;
}
0 votes
Robin Rodrigue June 27, 2016

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.

0 votes
Nat June 9, 2016

.wiki-content h1 { color: red }

Shawn Wilson August 1, 2017

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.

0 votes
Matthew J. Horn
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.
August 22, 2013

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
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.
August 22, 2013

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
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.
August 22, 2013

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
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.
August 22, 2013

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.

Matthew J. Horn
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.
August 23, 2013

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

Amalia
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.
August 24, 2013

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

0 votes
Matthew J. Horn
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.
August 22, 2013

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
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.
August 22, 2013

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.

0 votes
Matthew J. Horn
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.
August 22, 2013

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
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.
August 22, 2013

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?

Suggest an answer

Log in or Sign up to answer
TAGS
AUG Leaders

Atlassian Community Events