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 from an external repository

A CSS file imported from a public external repository like GitHub.

@import url("https://jorsek.github.io/pdfgen.github.io/styles/jorsek_pdf/modules/dita/uicontrol_wintitle_shortcut_menucascade.css");

Imported style from a CCMS file

A CSS file imported from your Heretto CCMS Content Library. We recommend adding a comment so you know which file you're importing and from where. See Get a Resource UUID to find the UUID for the CSS file you want to import.

/* this CSS file is my-custom-styles.css and is located in __configuration/pdf-generator-scenarios/shared/ */
@import url(UUID);

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.

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;
}

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;
}

Gretyl's Portal

Heretto Help