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

Logo on title page when exporting to PDF

Teresa_lr0x4h

Good Evening,

I would like to know if it is possible to incorporate a company logo in the customised PDF exports as the cover page of the PDF.

And if it is possible, how do I do it?

Thank you very much in advance
Greetings

Accepted answers

Manon Soubies-Camy

Hi @Teresa and welcome to Community!

You can custom the PDF stylesheet to achieve this (Space settings > Look and feel > PDF stylesheet). I'm no CSS expert but the following code:

.pagetitle h1 { 
font-size: 36px !important;
text-align: center;
padding-top: 300px !important;
page-break-after:always; 
background-image: url(https://d3njjcbhbojbot.cloudfront.net/api/utilities/v1/imageproxy/https://coursera-course-photos.s3.amazonaws.com/44/a1aa6de0754300a8bb8a2f2d2ac817/atlassian-logo-gradient-vertical-white.png?auto=format,compress&amp;dpr=1); 
background-repeat: no-repeat; 
background-size: 30%;
background-position: center;
}

Results in this PDF export:

Capture d’écran 2020-10-28 à 11.39.48.png

Hope this helps,

- Manon

All comments

Manon Soubies-Camy

Hi @Teresa and welcome to Community!

You can custom the PDF stylesheet to achieve this (Space settings > Look and feel > PDF stylesheet). I'm no CSS expert but the following code:

.pagetitle h1 { 
font-size: 36px !important;
text-align: center;
padding-top: 300px !important;
page-break-after:always; 
background-image: url(https://d3njjcbhbojbot.cloudfront.net/api/utilities/v1/imageproxy/https://coursera-course-photos.s3.amazonaws.com/44/a1aa6de0754300a8bb8a2f2d2ac817/atlassian-logo-gradient-vertical-white.png?auto=format,compress&amp;dpr=1); 
background-repeat: no-repeat; 
background-size: 30%;
background-position: center;
}

Results in this PDF export:

Capture d’écran 2020-10-28 à 11.39.48.png

Hope this helps,

- Manon

Teresa_lr0x4h

thank you very much

Statseeker

I used the below CSS stylesheet to customize the whole page with a logo, footer and a few other aspects

PDF Stylesheet configuration

.pagetitle h1:first-child
{
background-image: url(https://confluence.mydomain.com/images/logo/mylogo.png);
background-repeat: no-repeat;
background-position: left 90%;
background-size: 5%;
font-size: 30px !important;
text-align: center;
padding-top: 30px !important;
}
div.toc-macro
{
display: none;
}
table.fixedTableLayout
{
table-layout: fixed !important;
width: 98% !important;
}
table,tr,td
{
font-size: 7.5pt !important;
}
/*body,p,li,td,table,tr,.bodytext,.stepfield*/
/*{ font-size: 8pt; }*/
body,p,li,.bodytext,.stepfield
{
font-size: 10pt;
}
@page
{

/*A4-sized pages in landscape orientation are 297 mm wide by 210 mm long*/
size: 420mm 610mm;
@bottom-left
{
content: "Commercial in Confidence"; /* This is the content that will appear in the footer */
font-family: ConfluenceInstalledFont, Helvetica, Arial, sans-serif;
font-size: 10pt;
}
@bottom-center
{
content: "Page " counter(page); /* This is the content that will appear in the footer */
font-family: ConfluenceInstalledFont, Helvetica, Arial, sans-serif;
font-size: 10pt;
}
@bottom-right
{
content: "Copyright © 2021, MyCompany"; /* This is the content that will appear in the footer */
font-family: ConfluenceInstalledFont, Helvetica, Arial, sans-serif;
font-size: 10pt;
}
}

Welcome!

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

Quick Links

Find more posts tagged with

confluence

cloud

confluence-cloud