Confluence PDF Export Stylesheet (several) Questions

[Matthias Dannhorn]

Hello, I'm currently adapting the stylesheet of the PDF export. Now four questions have opened up.

1. heading size

• I want to adjust the size of the H4

2. text wrap

• there should be no break in the word

3. inline task padding

• the padding between checkbox and table should be adjusted

4. cell color

• I want to export the highlight colors of the table

Confluence site

PDF Export (table only)

Current stylesheet:

.pagetitle h1 { 
font-size: 22px !important;
margin-left: 0px !important;
padding-top: 180px !important;
page-break-after: always; 
background-image: url('/download/attachments/126943996/RGB_Schwarz-Blau_300_200.png?api=v2'); 
background-repeat: no-repeat; 
background-position: 0px 100px; /* distance from left and top */ 
}

@page {
size: 297mm 210mm;

.pagetitle
{
page-break-before: always;
}

 @bottom-left {
 content: "© XXX"; 
 font-family: Arial, sans-serif;
 font-size: 8pt;
 }
 @bottom-right {
 content: "Page " counter(page) " of " counter(pages);
 font-family: Arial, sans-serif;
 font-size: 8pt;
 }
 /* Generate border between footer and page content */
 border-bottom: 1px solid black;
 border-top: 1px solid black;
 }


 /*TABLE*/
table {
 border-collapse: collapse;
 border: 1px solid #DDDDDD;
 margin-bottom: 1em;
 table-layout:auto !important; 
 width: auto !important;
}

table tr {
 page-break-inside: avoid;
}

table thead tr td {
 background-color: #F0F0F0;
 /*border: 1px solid #DDDDDD;*/
 min-width: 0.6em;
 padding: 5px;
 text-align: left;
 vertical-align: top;
 font-weight: bold;
}

table tbody tr td {
 border: 1px solid #DDDDDD;
 min-width: 0.6em;
 padding: 5px;
 vertical-align: top;
}

tbody tr.even td {
 background-color: transparent;
}

 /*STATUS*/
.aui-lozenge {
 background: #dfe1e6;
 border: 1px solid #dfe1e6;
 border-radius: 3px;
 color: #253858;
 display: inline-block;
 font-size: 11px;
 font-weight: bold;
 line-height: 99%;
 margin: 0;
 padding: 2px 5px;
 text-align: center;
 text-decoration: none;
 text-transform: uppercase;
}

.status-macro {
 min-width: 76px;
 padding: 1px 3px 1px 3px;
}

.aui-lozenge-success { 
 color: #ffffff; 
 background-color: #14892c; 
 border-color: #14892c; 
} 
 
.aui-lozenge-error { 
 color: #ffffff; 
 background-color: #d04437; 
 border-color: #d04437; 
} 
 
.aui-lozenge-moved { 
color: #ffffff; 
background-color: #ffd351; 
border-color: #ffd351; 
} 
 
.aui-lozenge-complete { 
 color: #ffffff; 
 background-color: #4a6785; 
 border-color: #4a6785; 
}

Maybe someone can help me. Thank you!

[Tobias Anstett _K15t_ · Accepted solution]

Hi,

Here are some links which will help you further:

1. heading size

• I want to adjust the size of the H4

• h4 { font-size: 15px; }

• https://www.w3schools.com/cssref/pr_font_font-size.asp

2. text wrap

• there should be no break in the word

• p { white-space: nowrap; }

• you might need to add it to more definitions e.g. span etc.
• https://www.w3schools.com/cssref/pr_text_white-space.asp

3. inline task padding

• the padding between checkbox and table should be adjusted
• you'll need to inspect the checkbox element to find out about its class and define a margin-left: 10px;

4. cell color

• I want to export the highlight colors of the table
• I am not sure why this happens

As a side note, you may also want to check the Markteplace App Scroll PDF Exporter which comes with an advanced theme editor and allows you to create beautifully styled PDFs >> https://marketplace.atlassian.com/apps/7019/scroll-pdf-exporter-for-confluence

Best,
Tobias

[Matthias Dannhorn]

Hi Tobias,

thanks for your help. Short feedback on the above points.

1. the problem was not the class but in the export an H4 is an H5. Now it works.

2. solved

3. I found the following -> https://help.k15t.com/legacy/scroll-pdf-exporter/changing-the-task-list-icons-108956146.html but it doesn't work yet.

4. solved. The class is missing in confluencedefaultpdf.css. Here is the solution -> https://jira.atlassian.com/browse/CONFSERVER-28579

Do you have a discount code for the App Scroll PDF Exporter? I'm just kidding.

Greetings

-matthias

[Tobias Anstett _K15t_]

Hi Matthias,

The article you are referring to in #3 is for a legacy version of Scroll PDF - this version still generated its own html based on the Confluence storage format, thus it would not work in the default Confluence PDF stylesheet.

This is what Confluence will render and you can overwrite:

ul.inline-task-list>li.checked {
  background-image: url(data:image/png;base64,BASE64ENCODEDEIMAGEPLACEHOLDER);
}

ul.inline-task-list>li {
  background-image: url(data:image/png;base64,BASE64ENCODEDEIMAGEPLACEHOLDER);
}

Or clear this property and just use another list style.

Regarding the license - nice try ;)

Best, Tobias

[Ozan Bayram]

I added these styles to PDF export stylesheet and cell color problem is solved

table.confluenceTable td.confluenceTd.highlight-green {
    background-color: #e3fcef;
}


table.confluenceTable td.confluenceTd.highlight-red {
    background-color: #ffebe5;
}

table.confluenceTable td.confluenceTd.highlight-yellow {
    background-color: #fffae5;
}

[Laura Schneider]

See my discussion https://community.atlassian.com/t5/Confluence-discussions/PDF-Export-Confluence-does-not-support-CSS-3-only-2-1/td-p/1202508

[Ozan Bayram]

I used this style to prevent header wrap.

th { white-space: nowrap; }

But still no solution for cell bg-color :(