This article applies to recent versions of SmarterTrack. View articles for SmarterTrack 12.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 Menu icon, and from the dropdown, click Settings.
  3. Under the Manage header, 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.
  7. Once you've added your style overrides, click the Save button.
  8. 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.
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.

Feedback

Add Feedback
I tried this for V10 and it didn't make any type of change to the only brand portal.
Daniel Sproul (February 18, 2014 at 10:11 AM)
Hi, Daniel. I did a quick check on a 10.x site and Custom CSS worked just fine. Try something simple like changing the link colors with this:

a {color: red;}

Save the change and check the links on your portal. It could be that the style you're trying to change is more complex or your edit isn't formatted properly.

Derek Curtis (February 18, 2014 at 1:59 PM)
Derek, That seems to work when I click on the Tickets tab. But how do I change it for the main initial page that shows our logo and login. My main goal is to change the footer to our company information, along with the color of the footer.
Daniel Sproul (February 18, 2014 at 4:19 PM)
The "examples" shown above are for versions older than 10.1...don't expect them to work as is unless you are using an older version...

SUGGESTION: update these examples for versions 10+

Thalia Oster (May 29, 2014 at 6:10 PM)
To avoid confusion, I'd like to mention that the examples of CSS styles that were previously listed on this KB article have now been moved to the Community: http://portal.smartertools.com/community/a610/common-css-styles-for-smartertrack-9_x-and-earlier.aspx

The Community is a great resource for posting examples of CSS or requesting CSS styles as users and SmarterTools agents alike can respond to posts and offer suggestions.

Andrea Rogers (October 10, 2014 at 3:49 PM)

Add Feedback