Custom CSS recipes for PDF templates
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.
Recipes in this article
- Set the maximum height for images
- Change the maximum image size of the title page logo
- Target the title page
- Add an empty page between the cover page and the table of contents
- Use a single image for the title page
- Customize the "Table of Contents" text
- Resize text in styled text blocks
- Try to keep chapter articles on same page as chapter in table of contents
- Add content after the title page title
- Always put chapter title pages on the right page
- Keep chapter title on same page as article title
- Hide chapter title pages
- Adjust positioning of chapter title on page
- Right-justify the header text
- Set the maximum height for the logo in the header
- Always add a page break before a level 1 heading
- Add a page break before a foldable section
- Indent subheadings
- Justify text
- Change spacing between list items
- Turn off small caps on the title page
- Fit as many articles on a page as possible
- Insert the title of the current chapter into the header
- Remove spacing between paragraphs
- Float images to the right of text
- Targeting the footer
- Show chapter title and article title in header
- Change the size of text within tables
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
Change the maximum image size of the title page logo
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
Target the title page
