ScreenSteps

Custom CSS recipes for PDF templates

Updated on

PDF Templates in ScreenSteps are created with HTML, CSS, and Javascript and then processed using the Prince PDF engine. This means you can customize how things look by adding your own CSS. This article contains CSS examples that you can use in the Custom CSS tab of the PDF Template editor in the ScreenSteps admin area to change the appearance of your PDF output.

Where should I put the CSS in these recipes?

Custom CSS is added to the Custom CSS tab of a PDF Template. Just copy and paste a recipe from this page into the Custom CSS field and click the Update button.

Set the maximum height for images

By default images in a PDF document can be up to 4 inches tall. This CSS will change the max-height for the image to 3 inches.

#content .image img {
  max-height: 3in;
}
Click to copy

By default the title page logo has a top margin of 80pt and a maximum height of 100px. Here is an example that changes the top margin to 0pt and 400 pixels.

#title-page-logo-image {
  margin-top: 0pt;
  max-height: 400px;
}
Click to copy

Target the title page

@page title-page {
  margins: 75pt 30pt 50pt 30pt;
  background-color: red;
}
Click to copy

Add an empty page between the cover page and the table of contents

#table-of-contents {
  page-break-before: right;
}
Click to copy

Use a single image for the title page

  1. On the Title Page tab, use the Logo button to select the image.
  2. Add the following to the Custom CSS tab.
@page title-page {
  margin: 0pt;
  @bottom {
    content: none;
  }
}

#title-page-logo-image {
  margin: 0pt;
  max-height: 11in;
}
Click to copy

Customize the "Table of Contents" text

.table-of-contents-title {
  content: 'Customized Table of Contents';
}
Click to copy

Resize text in styled text blocks

A text block in ScreenSteps can have a style applied to it. Currently you can assign a style of introduction, alert, tip, info, or warning. Use the following CSS to target text assigned one of these styles.

This example will change the font size for a text block that has the alert style assigned to it. Just change the word alert with introduction, tip, info, or warning for other styles.

.screensteps-textblock.screensteps-wrapper--alert {
  font-size: 10pt;
}
Click to copy

Try to keep chapter articles on same page as chapter in table of contents

.chapter-tofc {
  page-break-after: avoid;
}

.article-tofc + .article-tofc {
  page-break-before: avoid;
}
Click to copy

Add content after the title page title

The '\A' will add a newline after the existing title. 'white-space: pre' will cause the newline to be displayed. What you end up with is text on a new line after the title page title.

#title-page-title-text::after {
  content: '\AThis comes after the title';
  white-space: pre;
}
Click to copy

Always put chapter title pages on the right page

#content .chapter {
  page-break-before: left;
}
Click to copy

Keep chapter title on same page as article title

#content .chapter {
  page-break-after: avoid;
  display: block;
  height: auto;
}

#content .chapter-title {
  position: relative;
  transform: none;
  top: inherit;
  left: inherit;
}

#content .chapter + .article {
  page-break-before: avoid;
}
Click to copy

Hide chapter title pages

#content .chapter {
  display: none;
}

/* Since chapters no longer have pages don't add page numbers to chapter entries in the T of C. */
#table-of-contents a::after {
  content: '';
}

#table-of-contents .article-tofc a::after {
  content: leader(".") target-counter(attr(href), page);
}
Click to copy

Adjust positioning of chapter title on page

#content .chapter-title {
  vertical-align: top;
  padding-top: 75mm;
}
Click to copy

Adjust positioning of article title

#content .article-title {
  text-align: center;
}
Click to copy

Right-justify the header text

First set the Align Logo setting to Left.

.header-text {
  text-align: right;
}
Click to copy

Set the maximum height for the logo in the header

Note: If the logo is set for a maximum height that is larger than the top margin, you will need to also adjust the Top Margin in the General > Document Settings of the PDF Template.

#header .logo {
  max-height: 25pt;
}
Click to copy

Always add a page break before a level 1 heading

.screensteps-section.screensteps-depth-1 ~ .screensteps-section.screensteps-depth-1 {
   page-break-before: always; 
}
Click to copy

Add a page break before a foldable section

.screensteps-child-wrapper ~ .screensteps-child-wrapper {
   page-break-before: always;
}
Click to copy

Indent subheadings

h3.screensteps-heading, h4.screensteps-heading, h5.screensteps-heading {
  margin-left: 50px;
}
Click to copy

Justify text

.screensteps-textblock {
  text-align:justify;
}
Click to copy

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;
}
Click to copy

Turn off small caps on the title page

#title-page-title-text {
  font-variant: normal;
}
Click to copy

Fit as many articles on a page as possible

.article {
  page-break-before: auto;
}

#content .chapter {
  page-break-before: always;
}
Click to copy

Insert the title of the current chapter into the header

.chapter-title {
  string-set: chapter-title content()
}

.header-text {
  content: string(chapter-title)
}
Click to copy

Remove spacing between paragraphs

div > p:not(:last-child){
  margin-bottom: 0px;
  margin-top: 0px;
}

div > p:last-child {
  margin-top: 0px;
}
Click to copy

Float images to the right of text

This CSS assumes the following:

  • A heading with an image and text content block underneath it.
  • A Letter page size with Landscape orientation.

You would just need to adjust the max-width properties for other pages sizes/orientations.

.screensteps-textblock {
  float: left;
  max-width: 473pt;
}

.screensteps-image {
  max-width: 250pt;
  float: right;
}

.screensteps-section {
  clear: both;
}
Click to copy

The footer has a footer class applied to it.

.footer {
  ...
}
Click to copy

You can target the footer text as well as the footer page number as well.

.footer .page-number {
  ...
}
Click to copy
.footer-text { 
  ...
}
Click to copy

Show chapter title and article title in header

.chapter-title {
  string-set: chapter-title content()
}

.article-title {
  string-set: article-title content()
}


.header-text {
  content: string(chapter-title) " " string(article-title);
}
Click to copy

Change the size of text within tables

You can make text in tables smaller using the following CSS. The first example changes the size of text in the header of the table. The second example changes the size in the body of the table.

div.screensteps-table table thead th {
  font-size: 0.9em;
}
Click to copy
div.screensteps-table table tbody td {
  font-size: 0.8em;
}
Click to copy
Previous Article How can I change where page breaks appear in PDF documents?
Next Article How to customize the HTML used for article and manual templates
Still Need Help? Contact Us