This article applies to recent versions of SmarterTrack. View articles for SmarterTrack 14.x and earlier.

With SmarterTrack's custom CSS feature it's fairly easy to change the look and feel of the customer-facing portal so that it seamlessly integrates into an existing website. Having the ability to modify the look and feel of the portal means a company can add their corporate branding, which eases their users into the SmarterTrack system. In addition, custom CSS can be used on a brand-by-brand basis so that each brand represented in SmarterTrack has a different overall look and feel. That gives companies with different branches, locations or even completely separate entities the ability to offer up help desk options for all of those entities, right from a single install of SmarterTrack.

For steps on how to determine the SmarterTrack CSS code that's available for modification, please refer to the KB article Use "Inspect Element" to Determine CSS Modifications.

To add custom CSS follow the steps below:

  1. Log into the SmarterTrack management interface as the System Administrator.
  2. Click the Settings icon.
  3. Under the Manage header in the sidebar, click on Brands. A list of brands will load in the content pane.
  4. Select the desired Brand you want to add custom CSS to and click the Edit button. (Alternatively, you can double click on the brand name to open its settings in the content pane.)
  5. Click on Portal Options tab.
  6. In the Custom CSS Style Overrides text box, add in your own CSS. NOTE: All CSS entered will override any existing styles for the brand. Therefore, it's STRONGLY recommended that whoever is modifying styles is knowledgeable about CSS and how it's formatted.
  7. Any custom CSS added should be added in standard CSS format. For example:
    header{ background-color: #333333; }
  8. Once you've added your style overrides, click the Save button.
  9. Next, go to your customer-facing Portal and see how your new styles look. If need be, go back to the Portal Options tab and make any necessary modifications.
Between adding in custom CSS, use of the Custom Messages are and editing the various color schemes in your Brand's Portal Options, the SmarterTrack Portal can be completely transformed to match your website and corporate branding. For example:

For more information, please refer to the SmarterTrack Online Help.


Learn more about SmarterTrack’s helpdesk system, which includes live chat, a self service portal and knowledge base software.