Styling that can be customized on the branding set

For a few elements we have fields on the branding set that can be used to style the customer presentation PDF. This is the most easy way to customize the styling. 

Styling that can be done with CSS

Every element in the PDF template has its own CSS class. 

You have the ability to create a custom CSS file that overrides the stylesheet. 

You should upload the CSS file as a static resource. And put the URL of the CSS file in the branding set. Below you find an overview of the classes that you can use to adjust the styling. 

Main containers

CSS Classes

Elements on first page

CSS Classes

Elements on next pages

CSS Classes

Elements in experiences, educations and skills

CSS Classes 

General CSS Configuration

The PDF is rendered from HTML under the hood. Each block has class names that you can target.

In your branding CSS, you define rules using a class name followed by properties inside braces. For example:

body {

   font-size: 14px;

}

This increases the default text size.

Only override what you need — everything  else remains as defined by default.

 

Most used properties in stylesheets:

Other classes that can be used to style the document

Refer to a basic CSS reference for additional properties if needed. Generic classes (same idea across the PDF, not one-off section names):

body
Default text for the main area: font, size, line height, colour unless a smaller block overrides it.

 

.left-bar

The whole left column. Often used to set one font size for all sidebar text.

 

.left-bar-section-heading

Sidebar block titles (e.g. professional information, person, contact).

.left-bar-field-label

Sidebar field labels. .left-bar-field-value: the values next to them.

.main-content-section-heading

Main column section titles (the words like Experience, Education, etc.). Many sections share this class so one rule updates all of them.

.main-content-section-label-line

The horizontal line beside a section title (bar thickness is size/height, not a font).

.main-content-field-value

Body fields in the professional-information area (rich text blocks).

.main-content-section-body-text

Normal paragraphs in lists (job descriptions, school text, etc.).

.main-content-skill-panel

Wrapper around skill blocks (all skill types). Use for fonts/size shared by every skill section.

.main-content-skill-table-layout

.main-content-skill-bullet-layout

.main-content-skill-two-col-layout

Only the skill sections that use a table, bullet list, or two columns. Lets you tune one layout mode at a time.

.professional-name

.professional-name-first-name

.professional-name-last-name

Name on the cover. Size may also be set by the page for long names.

.job-name 
.account-name

Job title and company line on the cover under the name.

.page-header-name-text

Name in the repeating header on inner pages (not the cover).

.footer 
Bottom-of-page footer text.

Custom branding examples

1. Adjusted logo and user photo sizes, adjusted logo positioning and left bar colors;

.first-page-logo {

max-width: 190px;

height: 100px;

position: absolute;

display: inline-block;

right: 0;
}
.first-page-user-photo {

width: 220px;

margin-top: 65px;

margin-left: 40px;

}
.left-bar-field-label {

color: black;
}

 

2. Changed left bar section colors, changed font family, hid the introduction text section header, made experience item header lighter, 
.left-bar-section-heading, .left-bar-field-value {

color: black;

}

body {

color: black;

font-family: Helvetica;

margin: 0;

font-size: 13px;

line-height: 1.6;

}
.professional-name {

font-family: Helvetica;

font-weight: 600;

line-height: 1.2;

text-transform: uppercase;

}
.byner__Introduction_text__c-label-table {

display: none;

}
.experiences-item-header {

padding-bottom: 7px;

font-weight: 400;

}

.soft-skills-two-columns-item-level-Senior {

color: #f73534;

}

.soft-skills-two-columns-item-level-Junior {

color: #06d80a;

}

.soft-skills-two-columns-item-level-Medior {

color: #f2af06;

}

3. Hidden left bar, changed bullet points to a long colored (green) dash.