Skip to main content

Rebranding the OPSCOM User Portal with Custom Colors

The custom colors feature allows administrators to modify the primary and secondary colors of the User Side interface. Its primary purpose is to align the visual appearance of the public-facing parking portal with your organization's official branding. This article is intended for OPS-COM administrators responsible for managing system designs and user experience.

Setup and Configuration

This feature modifies the core cascading style sheets (CSS) of the user portal and requires access to the system templates.

Admin Side: Administrators must have the appropriate system role permissions enabled to access the content and design configuration menus.

Using this Feature

Administrators can use the following instructions to apply custom styling to the portal using standard color names or precise hex codes.

Editing the Portal Styles

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

  2. Click the Toggle Templates button.

  3. Click the Edit button under the Styles section.

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

    :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

  • Utilize precise branding: For more precise branding control, use hexadecimal color codes instead of standard color names. Hex codes ensure your portal matches your organization's exact marketing and brand guidelines.

  • Identify the correct hex codes: Use a browser extension such as ColorZilla or an online color picker tool to find the exact hex code for your organization's specific colors.

  • Format the snippet correctly: In the code snippet, replace the standard color name with your six-character hex code. Ensure you include the hashtag (#) before the code.

When using hex codes, your CSS snippet should be formatted exactly like the example below:

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