Using CSS it's fairly simple to change the look and feel of both the customer-facing portal and the management interface so that they seamlessly integrate into an existing website. CSS can be used on a brand-by-brand basis so that each brand represented in SmarterTrack has a different overall look, making it easier to distinguish which brand is being worked on.

For steps on how to determine the CSS styles needed to modify, please refer to the KB article Use "Inspect Element" to Determine CSS Modifications.

Applies to SmarterTrack 11.x-12.x

To change the CSS follow the steps below:

  1. Log into the SmarterTrack management interface as the System Administrator.
  2. Click the Settings icon.
  3. Expand the Manage folders in the navigation pane.
  4. Click on Brands. A list of brands will load in the content pane.
  5. Select the desired Brand and click Edit.
  6. Click on Portal Options tab.
  7. In the text box, add in your own CSS. NOTE: All CSS entered will override any existing styles for the brand.
  8. Click Save.
 

Applies to SmarterTrack 8.x - 10.x

To change the CSS follow the steps below:

  1. Log into the SmarterTrack management interface as the System Administrator.
  2. Click the Settings icon.
  3. Expand the System Settings and Organization folders in the navigation pane.
  4. Click on Brands. A list of Brands will load in the content pane.
  5. Select the desired brand and click Edit.
  6. Click on Custom CSS tab.
  7. In the text box, add in your own CSS. NOTE: All CSS entered will override any existing styles for the brand.
  8. Click Save.
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