How can i customize the h-tags for pdf export

Hello together,

i would like to customize the h tags for headlines inside the pages from the wysiwygeditor.

But if i use h1,h2,h3 for the css it styles only the first page titel but not the other headines inside the document.

What im doing wrong?

4 answers

1 accepted

Hi AndreasC,

I think you do it right. If you want PDF exports where headings have a certain format (e.g. a font color) you do as you describe:

  1. Highlight the text
  2. Click on one of the standard formats named heading 1, heading 2...
  3. Go to Space Admin > Look and Feel > PDF Export Stylesheet
  4. Define the format with something like h1 { color: blue; }

There is one possible reason for a mistake though:

Confluence does automatically derogate headings. This means that the page title becomes a h1 heading whereas all headings on the page are increased by one: h1 become h2, h2 become h3 and so on.

So if you define h1 { color: blue; } what happens is that the page title becomes blue whereas all the h1 headings still stay black (or adopt that color that you defined for h2).

So I guess what happens in your case is not that the first h1 is different from the following but that what you think is a h1 is in fact a h2 and what you think is the first h1 is in fact the page title.

So go to the PDF Export Stylesheet and change h1, h2, h3... to h2, h3, h4... and everything should work as expected.

Hi Steffen,

thank you for your help, thats exactly what i have done (step1 till 4)

Ive added the following CSS Code to the PDF Export Stylesheet:

h1 {

color:#ff3300;
}

  
h2 {

color:#ff3300;
}

h3 {

color:#ff3300;
}

h4 {

color:#ff3300;
}

h5 {

color:#ff3300;
}

But still only the Pagetitle (h1) appears red.

Ive take a look inside the HTML Code and i saw that Conflunece (automatically?) added a span tag with a style attribute around the headlines:

<h1 id="HTML-Tags-PDF-Export-Headline1">
<span style="color: rgb(0,0,0);">Headline 1</span>
</h1>

<h2 id="HTML-Tags-PDF-Export-Headline2">
<span style="color: rgb(0,0,0);">Headline 2</span>
</h2>

But i cant find a reason where did they come from.

Hello AndreasC,

can you give a little more precise information:

  • What did you do to customize the h1, h2, h3 tags?
  • What do you want to customize: your wiki pages or the PDF version of these pages?
  • How did you assign the headings to your text?
  • What is the result you get? What are you missing? (I don't understand: "it styles only the first page titel but not the other headines inside the document")
  • What version of confluence do you use? Download or OnDemand?

Hello Steffen,

as my topic says its all about the pdf export css, not the space or wiki css.

First i would like to color every h tag, for expamle, h1 blue, h2 red, h3 black, h5 yellow if i export them to pdf.

I assign them as follows,

1. I write a line of words that should be my headline,

2. mark the text

3. with the wysiwyg i choose from the dropdown a headline

thats it.

I dont mean the headline for titlepages or spacenames and how to get them working, thats no problem for me, i mean just the simple h-tags from wysiwyg.

"it styles only the first page titel but not the other headines inside the document")

Thats exactly what the result looks like. the very first headline from the pdf page is for example blue like i write as normal css

h1 {

color: blue;

}

That works, but only with the first h1, if there 2 h1 tags on the same site the 2. one is still black.

I strange for me, because if i try to underline all h-tags for 1-7 they get underlined.

I use the downloaded confluence 5.4 (as update from 5.3)

I hope you could better understand now what i mean :)

@AndreasC:

That changes everything ;-) Your headings have inline styles and these inline styles override the formats from your PDF Export Stylesheet. This is the reason why your headings stay black and don't turn red.

Typically you get these "<span style="color..." inline styles when you (accidentally) hit the font color button (which is a symbol of an underlined capitel A) while your cursor is on a heading.

To get rid of this is a bit tricky. I don't know a method to simply set the font color back to standard. So I have to use "Clear formatting" and then reapply the headings.

Hi Steffen thats true with the span but i dont know where they come from.

Now ive created a new space from scratch and all is working fine now, funny ...

Thank to all for their help.

Best regards.

Hi Andreas,

if you want you can have a look at our Scroll PDF Exporter.

Using this you can have multiple templates with different styles for each heading level and much more user specific settings.

Cheers,
Nils

Thank you Nils for your fast response.

But why we have the pdf export integrated if we have to buy an plugin?

I will try it with css, maybe i get that working or someone know a solution for my problem.

Cheers

The Confluence PDF exporter's forced header demotion is terrible and can't be disabled. Please hurry and finish the cloud support for Scroll PDF and Word Exporters. I don't know how anybody could use this built in support to produce anything professional.

Suggest an answer

Log in or Sign up to answer
How to earn badges on the Atlassian Community

How to earn badges on the Atlassian Community

Badges are a great way to show off community activity, whether you’re a newbie or a Champion.

Learn more
Community showcase
Posted Jul 10, 2018 in Confluence

We want to see the templates you've created in Confluence!

Hi Community, Jessica here from the Confluence Product Marketing team!  July’s community challenge is all about sharing pictures  — and as an extension of our first post on what ...

862 views 23 12
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