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; } } }

How to change my heading size of my 'Documentation Theme' ? (site wize)

Pierre Hilson

Hello,

I would like to change the headings size and underlining for my whole confluence site.

I already checked https://confluence.atlassian.com/display/DOC/Styling+Confluence+with+CSS
but this is per space and not site wise.

Can this be done easily for the whole site ?

Thanks a lot in advance,

Pierre

Accepted answers

Matthew J. Horn

Assuming you've applied the Doc theme to your entire site (https://confluence.atlassian.com/display/DOC/Applying+a+Theme+to+a+Site), you can do 1 of 2 things (that I can think of):

1) Use jQuery to rewrite the style setting after the page is drawn.

2) Edit the theme file and repackage it.

I think you're best bet for #2 is to read this:

https://developer.atlassian.com/display/CONFDEV/Writing+a+Confluence+Theme

Once you understand how to create your own theme, you should be pretty comfortable modifying an existing one and redeploying it across your site.

hth,

matt

All comments

Matthew J. Horn

Yes, you can do it site wide by editing the global style sheet.

1. Go to the Administration Console (http://yoursite.com/admin/console.action)

2. Scroll down the left side and click StyleSheet under "Look and Feel".

3. Add your CSS rule, being sure to add "!important" at the end of each line. This overrides any other space or page specific settings. For example:

ul.search-results {  
  line-height: 1.0 !important;  
}

Matthew J. Horn

Assuming you've applied the Doc theme to your entire site (https://confluence.atlassian.com/display/DOC/Applying+a+Theme+to+a+Site), you can do 1 of 2 things (that I can think of):

1) Use jQuery to rewrite the style setting after the page is drawn.

2) Edit the theme file and repackage it.

I think you're best bet for #2 is to read this:

https://developer.atlassian.com/display/CONFDEV/Writing+a+Confluence+Theme

Once you understand how to create your own theme, you should be pretty comfortable modifying an existing one and redeploying it across your site.

hth,

matt

Amalia

The easiest way would be to add the following CSS to the Custom HTML (at the end of the HEAD) in Confluence Admin:

&lt;style&gt;
.theme-documentation .pagetitle {
   font-size:40px !important;
}
&lt;/style&gt;

If you'd like to manipulate these styles using JavaScript, then refer to this: https://confluence.atlassian.com/display/CONFKB/How+to+Use+JavaScript+in+Confluence

Pierre Hilson

Thanks for the tip. I'll follow Amalia recommendation first. Thanks for your time.

Pierre Hilson

I'll try that as soon as I can tomorrow. I was a bit disapointed when I read Matthew answer and understood I would have to unpack/modify/pack the theme to make those changes.

Is the Custom HTML overwritten when we upgrade Confluence ?

Thanks a lot for your time !!!

Amalia

Nope, Custom HTML won't be overwritten, provided that you do a manual upgrade (through database dump, rather than XML site backup)

Pierre Hilson

I started changing things with jQuery and it is pretty neat.

Thanks for the advise.

Welcome!

It looks like you're new here. Sign in or register to get started.

Quick Links

Find more posts tagged with

confluence