Customize Heretto Portal Styling

Overwriting the default Heretto Portal style enables you to customize its look and feel.

Tip: The following procedure assumes that you will be updating and maintaining your CSS customizations directly in Heretto CCMS.

If you want to maintain your CSS code on a server external to Heretto CCMS, you can add the following code to the config.json file to call and apply the CSS.

JSON 
"stylesheets": ["your-server-url/custom.css"]

  • Prepare your sitemap for portal customizations.

  • If needed, change the default starter theme. See Starter Themes Reference.

Keep the following guidelines in mind when styling your portal:

  • Avoid using negative values for margin and padding properties.
  • Avoid using percent values. Try using flex or flex-basis properties.
  • If you use percent values, the value should a base 8 root percent.

    For example, you can use: 100%, 50%, 25%, 6.25%, 3.125%.

  • Use flex for general layout properties.
  • Use grid for specific use cases like lists and items that need to be fixed to a certain number.
Prepare the configuration file
  1. Upload the config.json, scripts.js, or CSS file into the __configuration/portal_configuration folder in the Content Library.
    Important:

    Do not upload empty files into Heretto CCMS.

  2. Add custom CSS for styling your portal.
    While developing the custom.css file, you'll need to get CSS selectors. For more information, see Get CSS Selectors for Heretto Portal Styling.
Add the configuration file to your sitemap
  1. In the Content Library double-click the sitemap that you want to modify to open it in the Content Editor.
  2. Drag and drop the custom.css file onto the SITEMETA element.
    The custom.css file is added as a DATA element.
    sitemeta element
  3. In the left pane, hover over custom.css and click the edit properties icon.
  4. In the pane that appears, in the name field, enter stylesheets
  5. If needed, clear the scope field by clicking the corresponding trash icon.

Verify the configuration changes by opening your portal in a web browser.

Get CSS Selectors for Heretto 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 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