Get CSS Selectors for Portal Styling

The DITA elements are rendered as HTML elements with classes that you can use to define CSS selectors.

In Google Chrome™ or Mozilla Firefox, access the Heretto Deploy Portal instance that you want to style.
  • To inspect a particular element, right-click the rendered DITA element and do one of the following:
    • For Google Chrome™, select Inspect.
    • For Mozilla Firefox, select Inspect Element.
    Figure 1. Rendered Note Element.
    The following example (from Google Chrome™ and Mozilla Firefox respectively) shows that:
    • The note DITA element is rendered as a div HTML element with the note and note_note classes
    • You can use the .note CSS selector to style all note DITA elements

    CSS element with classes example

    Inspect tool example
  • To quickly inspect different elements, do one of the following:
    • For macOS, press Cmd > Shift > C and hover over different elements.
    • For Windows, press Ctrl > Shift > C and hover over different elements.
    Figure 2. Live Inspection in Firefox
    Live inspection