Rebranding the OPSCOM User Portal with Custom Colors

This article explains how OperationsCommander administrators can customize the primary and secondary colors of the User Side interface. This feature allows you to align the User Side's appearance with your organization's branding.

Setup & Configuration

1. Hover over System Settings, Content & Designs, and click Templates & Design.

2. Click Toggle Templates.

3. Under the Styles section, click Edit.

4. Add the following code snippet to the very top of the editor, directly under the <style> tag:

   CSS
   

   :root{
   --ion-color-primary: purple;
   --ion-color-secondary: orange;
   }

5. Replace purple and orange with your desired standard color names (e.g., blue, green, red).

Best Practices and Considerations

• For more precise branding control, you can use hexadecimal (hex) color codes instead of standard color names!
• Use a browser extension (such as ColorZilla) or an online tool to find the hex code for your organization's specific color (e.g., #6F42C1).
• In the code snippet, replace the standard color name with your hex code. Example:

:root{
--ion-color-primary: #6F42C1;
--ion-color-secondary: #FFA500;
}