Change default header size color

[Prashanth-GB]

Hi

I am using Confluence Cloud and trying to change default heading display format using below code inside "Style" macro.

Below code works well i.e. changes font size, font style and font family.

.wiki-content h1 { 

font-size: 1.6em; 
font-family: Segoe UI Semibold; 
font-style:italic;

}

But below code does not change font color.

.wiki-content h1 { 

font-size: 1.6em; 
font-family: Segoe UI Semibold; 
font-style:italic; 
color:#002060;

}

Currently I am not looking to change entire space display format but looking at only changing a single page display format. If it works, then I can change it at Space level. Looked at multiple discussion forum with no luck.

Any help is appreciated.

[Davin Studer · Accepted solution]

There is probably a more specific CSS style that is setting the color which is why it doesn't work. If you open the dev tools in you browser you should be able to find the css rule that is setting the color and override it. If you don't want to do that you could also do this ...

.wiki-content h1 { 
    font-size: 1.6em; 
    font-family: Segoe UI Semibold; 
    font-style:italic; 
    color:#002060 !important;
}

[thais]

Hi, Prashanth,

As Confluence uses a custom theme, it is not possible to customize the layout. It is also not possible to style Confluence with CSS, but you can customize exports to PDF:

- Customize Exports to PDF

- Advanced PDF Export Customizations

You can check more details at Restricted functions in Confluence Cloud.

[Prashanth-GB]

Thanks Thais Krischer. I understand the restriction on Confluence Cloud as it's the same instance used by many users.

I don't like the existing fonts provided by Confluence and specific about Segoe UI Semibold. After much research on confluence blogs, what I learnt is Confluence editor is getting better in future release. 

Currently as a workaround, I have embedded below Style macro into each page which is displaying the content in Segoe UI Semibold with 10.5 font size

@font-face { 
font-family: 'Segoe UI Semibold'; 
src: url('./fonts/semibold/seguisb.eot');
src: local("Segoe Semibold"), 
local("Segoe WP Semibold"), 
url('./fonts/semibold/seguisb.eot?#iefix') format('embedded-opentype'), 
url('./fonts/semibold/seguisb.woff') format('woff'), 
url('./fonts/semibold/seguisb.svg#SegoeUISemibold') format('svg');nt-weight: normal; font-style: normal;
}

body {font-family: Segoe UI Semibold; font-size: 10.5pt; color: black}
.wiki-content, .wiki-content p, .wiki-content table, .wiki-content tr, .wiki-content td, .wiki-content th, 
.wiki-content ol, .wiki-content ul, 
.wiki-content li {font-family: Segoe UI Semibold; font-size: 10.5pt; color: black}

.wiki-content h1 { font-size: 1.6em; font-family: Segoe UI Semibold; font-style:italic;}
.wiki-content h2 { font-size: 1.5em; font-family: Segoe UI Semibold; font-style:italic;}
.wiki-content h3 { font-size: 1.4em; font-family: Segoe UI Semibold; font-style:italic;}
.wiki-content h4 { font-size: 1.2em; font-family: Segoe UI Semibold; font-style:italic;}
.wiki-content h5 { font-size: 1.05em; font-family: Segoe UI Semibold; font-style:italic;}

.monospace {font-family: Segoe UI Semibold, monospace;font-size: 10.5pt; color: black}

Now that I accomplished what I want for a page, can this be incorporated at Space level by any chance? Imagine thousands of pages in a space and for each page I have to embed above code in style macro of each page.

Can this be done at space level settings? My reason for this is simple as Space settings does not affect other users on same instance of Cloud. Let me know if there are open Jira ticket for this enhancement/feature so that I can upvote.