Customize the Content Portal Style

Overwriting the default Heretto Deploy 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.

"stylesheets": ["your-server-url/custom.css"]
Note: Your content library may contain multiple sitemaps associated with different portal instances such as production (public) or staging (internal) instances. We recommend keeping the sitemaps associated with production (public) Heretto Deploy Portal instances on distinct branches different than the default “master” branch.

Any configuration, style, behavior, or content changes that you make to the sitemaps associated with your Heretto Deploy Portal instances are instantaneous.

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 Portal Styling.
Add the configuration file to your sitemap.
  1. In the content library double-click on 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.