Recipes for customizing PDF templates using the Custom CSS tab
PDF templates in Clarify are written in HTML and CSS. Custom templates allow you to customize the template using CSS. Doing so allows you to customize properties in the PDF output that aren't directly accessible through the custom template editor.
If you would like to see examples of the HTML files that Clarify generates when exporting to PDF, please refer to this article.
Select (or create) a custom template

Customize the CSS
- Click on the Custom CSS tab.
- Add the appropriate CSS to the field. For example:
.step-container {
page-break-after: always;
}
This CSS tells the PDF generator to always add a page break after a step.

Recipes
Here are a couple of recipes that change how PDF output looks.
Modify the style of the text in the document
You can add specific font styling to our PDF document by targeting specific CSS classes in the document. For example, to make step titles italic and bold you can do the following:
.step-title {
font-style: italic;
font-weight: lighter;
}
Here are some of the classes you can use to target content:
.article-description
.step-title
.sub-step
.step-instructions
If you wanted to target all of the document text try this:
body, h1, h2, h3 {
font-style: italic:
font-weight: lighter;
}
Show the article title in the body of the document
By default the article title is hidden in the main body of the document as it is shown in the header. To show the article title use the following CSS:
#content .article-title {
display: inline;
}
Remove the header after page 1
Adjust the margin-top values to meet your needs.
@page content {
@top-left {
content: "";
}
margin-top: 40pt;
}
@page content:first {
@top-left {
content: flow(header);
}
margin-top: 95pt;
}
Right-justify the header text
First set the Align Logo setting to Left.
.header-text {
text-align: right;
}

Set the maximum height for the logo in the header
#header .logo {
max-height: 25pt;
}
Remove spacing between paragraphs
div > p:not(:last-child){
margin-bottom: 0px;
margin-top: 0px;
}
div > p:last-child {
margin-top: 0px;
}
Change spacing between list items
This CSS will change the spacing between all list items. It will not affect the spacing between the first list item and the preceding paragraph.
li:nth-child(n+2) {
margin-top: 2em;
}
Float images to the right of text
This CSS assumes a Letter page size with Landscape orientation. You would just need to adjust the max-width properties for other pages sizes/orientations. If you want to float the images to the left of the text just swap the "left" and "right" values in the CSS.
.step-instructions {
float: left;
width: 473pt;
}
.step-image-container {
width: 250pt;
float: right;
}
.step-container {
clear: both;
}
Add a page break after every top-level step
If you want to break up each top-level step and it's substeps then use this CSS. This CSS will add page breaks before each top-level step. Use this CSS in combination with the Try to keep step content together content flow.
div.step-container:not(:first-child):not(.sub-step) {
page-break-before: always;
}
Set a custom page size
This example sets the width of 21cm and height of 30cm with a landscape orientation.
@page {
size: 21cm 30cm landscape;
}
Changing properties of paragraphs formatted as code
Code paragraphs are wrapped in <pre><code> tags.
pre code {
...
}
Code runs are wrapped in <code> tags.
code {
...
}
Targeting the footer
The footer has a footer class applied to it.
.footer {
...
}
You can target the footer text as well as the footer page number as well.
.footer .page-number {
...
}
.footer-text {
...
}
Change link color
#content a { color: red; }
Being able to create custom templates with CSS is a great idea !
I'm using Clarify beta 2.0 build 14 on Mac OS 10.9.
I'm trying to create a pdf template that floats images to the right using the CSS code you give but it doesn't work.
I looked at the examples of code that you give here : http://bmls.screenstepslive.com/s/clarify-2/m/11437/l/123184?data-resolve-url=true&data-manual-id=11437
And the classe name for text instructions and step images is different than the one you give here, I see in the html output of the code :
step-element step-instructions
and
step-element step-image-container
instead of
step-instructions
and
step-image-container
I tried to use these classes names in my CSS template, but doesn't work either...
Do I make something wrong ?
Thanks a lot for helping !
Gabriel