SmarterStats 10.x Help
This documentation is for a product that is no longer supported by SmarterTools.


SmarterStats supports the ability to personalize the interface so that system administrators, can create skins that represent their own style or emulate the company's branding and appearance.

To view the personalization settings, click the settings icon then Personalization in the navigation pane. The following tabs will load in the content pane:


The Settings tab will be where system administrators select whether to use the default settings or to customize the general color scheme and overall CSS of the SmarterStats interface. The following options are available:

  • Use default settings - Selecting this will use the default personalization settings.
  • Override Settings - Selecting this activates the Colors and Custom CSS tabs and allows system administrators to customize those settings.
  • Enable users to override skin - Selecting this option will allow end users to modify the skin used for their site login.
  • Skin - This dropdown will list any skins developed for SmarterStats. In general, the Default skin will always be available, but others may appear in this list as well.


The Colors tab allows users to modify the Primary, Secondary and Link colors for the SmarterStats interface.

  • Primary Color - This is the color for the title bar, highlight colors for input boxes, etc. The default is #519CDE.
  • Secondary Color - This is the color of the button bar. The default is #D1E8FC.
  • Link Color - This is the color of hyperlinks that appear throughout SmarterStats. The default is #1677C2.

Custom CSS

The Custom CSS tab allows system administrators to take the existing styles used in the SmarterStats interface and modify them based on branding or personal preference. As noted on the page, however, errors in custom CSS may cause the interface to have issues, so modifications should only be made if the person making the changes is extremely proficient with styles and stylesheets.

To modify a style, you should first use a Web browser like Chrome to inspect the element that you want to modify. (Using Firefox's Firebug plug-in will work as well). By inspecting the element you will see the class used and any styles associated with the class. You can then create a version of that style yourself and paste it in the box to override the default. Realize this will happen wherever that style is used, so changing one style can affect several pages within the interface. To enable the custom styles, simply check the Enabled box on the Custom CSS tab.

To remove any customization and personalization of the interface, remove the custom style and save the changes. Alternatively, you can uncheck the Enable box. This will reset the interface back to its original default settings.