Confluence PDF Export Stylesheet (several) Questions
Asked by 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

![Bildschirmfoto 2018-09-04 um 13.29.00.png](/t5/image/serverpage/image-id/31270iF99FEFB55AE49B35/image-dimensions/441x194?v=v2 "Bildschirmfoto 2018-09-04 um 13.29.00.png")

PDF Export (table only)

![Bildschirmfoto 2018-09-04 um 13.29.29.png](/t5/image/serverpage/image-id/31271iCDCF949CC5A71559/image-dimensions/435x198?v=v2 "Bildschirmfoto 2018-09-04 um 13.29.29.png")

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!


Answers:
author: Tobias Anstett _K15t_
body: 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

comments: author: Matthias Dannhorn
body: 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


author: Tobias Anstett _K15t_
body: 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&colon;image/png;base64,BASE64ENCODEDEIMAGEPLACEHOLDER);
}

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

Or clear this property and just use another list style.

Regarding the license - nice try ;)

Best, Tobias


author: Ozan Bayram
body: I added these styles to PDF export stylesheet and cell color problem is solved

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

<br />

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

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


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


author: Ozan Bayram
body: I used this style to prevent header wrap.  

th { white-space: nowrap; }

But still no solution for cell bg-color :(


Tags: confluence-server

export

pdf

server

table