Customize the Content Portal Style
Overwriting the default Heretto Deploy Portal style enables you to customize its look and feel.
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.
Prepare your sitemap for portal customizations. See Prepare a Sitemap for Content Portal Customizations.
If needed, change the default starter theme. See Starter Themes Reference.
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
- Avoid using percent values. Try using
- If you use percent values, the value should a base 8 root percent.
For example, you can use:
flexfor general layout properties.
gridfor specific use cases like lists and items that need to be fixed to a certain number.
- Upload the
scripts.js, or CSS file into the
__configuration/portal_configurationfolder in the content library.Important: Do not upload empty files into Heretto CCMS.
- 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.
- In the content library double-click on the sitemap that you want to modify to open it in the Content Editor.
- Drag and drop the custom.css file onto the SITEMETA element.The custom.css file is added as a DATA element.
- In the left pane, hover over custom.css and click the edit properties icon.
- In the pane that appears, in the name field, enter stylesheets
- If needed, clear the scope field by clicking the corresponding trash icon.
Verify the configuration changes by opening your portal in a web browser.