Create
cancel
Showing results for 
Search instead for 
Did you mean: 
Sign up Log in

Next challenges

Recent achievements

  • Global
  • Personal

Recognition

  • Give kudos
  • Received
  • Given

Leaderboard

  • Global

Trophy case

Kudos (beta program)

Kudos logo

You've been invited into the Kudos (beta program) private group. Chat with others in the program, or give feedback to Atlassian.

View group

It's not the same without you

Join the community to find out what other Atlassian users are discussing, debating and creating.

Atlassian Community Hero Image Collage

Confluence PDF Export Stylesheet (several) Questions

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

PDF Export (table only)

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!

4 answers

1 accepted

2 votes
Answer accepted

Hi,

Here are some links which will help you further:

1. heading size

2. text wrap

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

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

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

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

I used this style to prevent header wrap.

th { white-space: nowrap; }

 

But still no solution for cell bg-color :(

Suggest an answer

Log in or Sign up to answer
TAGS
Community showcase
Posted in Confluence

What do you think is the most *delightful* Confluence feature? Comment for a prize!

- Create your own custom emoji 🔥 - "Shake for Feedback" on mobile 📱 - An endless supply of GIFs via GIPHY 🤩 Is there anything quite as nice as a pleasant surprise? Comment below with what...

342 views 23 8
Join discussion

Community Events

Connect with like-minded Atlassian users at free events near you!

Find an event

Connect with like-minded Atlassian users at free events near you!

Unfortunately there are no Community Events near you at the moment.

Host an event

You're one step closer to meeting fellow Atlassian users at your local event. Learn more about Community Events

Events near you