You can change the look of the PDF, for example use a different color or a new font. First you add the CSS rules to the custom CSS. The CSS rules are then applied when you create a PDF.

Setting up custom styling with CSS

1. Open the Studio in your browser. 
2. Add the CSS rules to the custom CSS, see Setting up Custom Styling with CSS.

CSS rule examples that will only affect the PDF

Copy and paste one of the examples into the custom CSS and change the CSS rules as required.

/* change the font to Menlo */ 
.news-export-doc .title-page, .news-export-doc .content {
    font-family: 'Menlo';
}

/* change the background color of the title page to blue */
.news-export-doc .title-page {
    background-color: #00a4fd;
color: #fff;
}

/* change font of page header to be slightly more bold */ 
.news-export-doc .head-note {    
font-weight: 600; 
}

/* change font of page header to be slightly more bold */
.news-export-doc .head-note {
    font-weight: 600;
}

/* change color of border below app header to red */
.news-export-doc .head-note > div {
    border-color: #ff0000;
}

/* change font color of page header to a dark grey */
.news-export-doc .head-note,
.news-export-doc .head-note a {
    color: #444;
}

/* insert link icon in front of all links in content */
.news-export-doc .article-content a:before {
    content: 'q';
    font-family: 'we-icon';
}

/* automatically write web link URL behind links in content, so they can be used from print */
.news-export-doc .article-content a:after {
    content: ' (' attr(href) ')';
}

/* change color of video play button to red */
.news-export-doc .rich-content .video .blocker:before {
    color: #ff0000;
}

/* hide video play button */
.news-export-doc .rich-content .video .blocker:before {
    display: none;
}