SmarterMail 14.x Help

Personalization

SmarterMail supports the ability to personalize the webmail interface so that administrators, or even users, 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 and open either My Settings for user personalization, or Domain Settings and then click Personalization in the navigation pane. The following tabs will load in the content pane:

Settings

The Settings tab will be where users select whether to use the default settings for the domain or whether to customize the general color scheme and overall CSS of the SmarterMail interface. The following options are available, depending on the default domain settings:

  • Use default settings - Selecting this will use as the default personalization settings.
  • Override Settings - Selecting this activates the Colors and Custom CSS tabs and allows users to customize those settings.
  • Enable users to override - This is a domain administrator only setting. Selecting this option will allow end users to modify the custom CSS and general color scheme for their webmail login.
  • Skin - This dropdown will list any skins developed for SmarterMail. In general, the Default skin will always be available, but others may appear in this list as well.

Colors

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

  • Primary Color - This is the color for the title bar in SmarterMail, the numbered notifications (e.g., for new messages), highlight colors for input boxes, calendar items, 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 in messages, calendar items, etc. The default is #1677C2

Custom CSS

The Custom CSS tab allows users to take the existing styles used in the SmarterMail 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 then 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, simply remove the custom style and save the changes. This will reset the interface back to its original default settings.