Custom Branding via CSS Template

This guide explains how to white label Itential Automation Platform (IAP) with a custom CSS template. The steps outlined in this article will override the default Itential theme.

Requirements

The following items are required.

• File system access to IAP.
• The primary hex color code for your organization, e.g., #7ab27f.
• Company logo for the IAP Log In page.
• Company logo for the IAP header.

The IAP Log In page company logo must meet the following requirements.

The IAP header company logo must meet the following requirements.

Steps

Perform the following steps to white label the user interface of IAP with your custom colors and logo.

1. Navigate to the UI style direction of IAP.

   cd ./node-modules/@itential/pronghorn-core/us/style
   

2. Edit the custom.css file.

   Note: The constants of custom.css have been commented out, so as to not affect the system when not in use.

3. Locate the \*\*\* SECTION HEADER \*\*\* heading in each section of the file.

4. Remove the comments below each heading by removing the slash and asterisk at the start, /*, and end, */,of each section.

5. Replace the example hex color codes with the color codes for your company's brand throughout the file.

   • Primary Color: #7ab27f (example code)

6. Replace the temporary logos with your company branded logos.

   • The company logo for login may be found at the following location.

     node_modules/@itential/pronghorn-core/ui/custom/logo.png
     

   • The header logo may be found at the following location.

     node_modules/@itential/pronghorn-core/ui/custom/logo-wide.png
     

7. Once all steps are complete, the IAP system will be customized to display your company logo and colors.