Heretto PDF Generator Templating Basics

You can customize the Heretto PDF Generator templates by embedding or importing the CSS code into the code editor.

Tip: We recommend extending the Gray and Color templates with custom CSS rather than creating a template from scratch.
Embedded style
A CSS code added directly to the Heretto PDF Generator CSS tab.
/* Style uicontrol elements. */
.uicontrol {
  font-weight: bold;
  color: #457b9d;
}

/* Style wintitle elements. */
.wintitle {
  font-weight: bold;
}
Imported style
A CSS file imported from your Heretto CCMS Content Library or an external repository like GitHub.
@import url("https://jorsek.github.io/pdfgen.github.io/styles/jorsek_pdf/modules/dita/uicontrol_wintitle_shortcut_menucascade.css");

HTML Tab

The HTML tab in the right pane enables you to see the following:
  • HTML elements rendered from DITA elements
  • Classes associated with the HTML elements
Remember: You can use the CSS classes and HTML elements as selectors in the CSS code of your template. Keep in mind that HTML elements tend to be more general than CSS classes. For example, styling the li HTML element affects the table of contents, ordered lists, unordered lists, and even task steps.
pdf generator HTML tab
Tip: If needed, we recommend learning the CSS and HTML basics from the following resources:

To learn about the CSS features supported by the Heretto PDF Generator, see Prince CSS Reference.

Selecting HTML Elements

In the following example the h1 element (h1 selector) is used to style the chapter-level topic titles.

Chapter-level topic
A topic that is a child of a publication map.
h1 {
    color: darkcyan;
    font-weight: bold;
}
HTML customization example

Selecting HTML Classes

In the following example, the uicontrol class (.uicontrol selector) is used to style the rendered UI control elements.

.uicontrol {
    color: cyan;
    font-weight: bold;
}
classes customization example