Theme Configuration

Themes are an important part of using the atmail 8 product to brand and market your business to your users. We allow the customization of the webmail product via the web admin, including the theme.

To change the theme, first login to your web admin dashboard.

If you are adding a theme to a new webmail domain, yourwebmail.com for example, you will need to first go to Webmail domains under the Services tab, select Create a new webmail domain, then enter your domain that end users will be going to in their browser.

Navigate to the Webmail themes section under the Services tab, then select your theme. If you don't yet have a theme created you can select the default theme "Slate".

Here you can upload two different logo images. These will ideally be PNG files with transparent backgrounds to allow colors to come through.

• Webmail Logo
  This is the image displayed in the top section of the sidebar after login.
  
• Login Page Logo
  This is the image displayed on the webmail login page if the selected theme is set to default for the webmail domain the user has navigated to in their browser.
  

If you are creating a new theme, toggle the Save as new theme option and be sure to specify a new name to avoid confusion later.
You can edit your theme details here including Name, which is shown to end users in their webmail settings, and Author and Comment for your own reference.

All remaining settings are color options with the exception of loginBackground which can be set to CSS containing a background image if preferred.

• appBarBackground
  

  This is the background color for the bar at the top of the app
  

• appBarAlternativeBackground
  

  This is the background color for the bar at the top of the composer
  

• appBarBorderColor
  This is the line color between the app bar and new calendar/contact tab
  
• appBarTextColor
  This is the text color in the app bar
  
• avatarBackgroundColors
  This is the color for the avatar icons when a contact doesn’t have a photo uploaded. This can be multiple colors delimited by a comma.
  
• defaultListItemActiveBackground
  

  This is the background color of the selected message in the message list pane
  

• defaultListItemBackground
  

  This is the background color of messages that are not selected in the message list pane that have been read
  

• defaultListItemColor1
  

  This is the text color for primary text fields. The subject in the message list preview and context menu text for example.
  

• defaultListItemColor2
  

  This is the text color for secondary text fields of a message in the message list. The Body Preview for example.
  

• defaultCalendarBackground
  This is the background color for events on any calendar. If left blank the background color will match the calendar setting.
  
• defaultListItemFontWeight
  

  Font weight for text in message list where message is read. Effectively a variable BOLD setting.
  

• threadListItemUnreadFontWeight
  

  Font weight for text in message list where message is not read. Effectively a variable BOLD setting.
  

• disabledBackground
  

  This is the background color for disabled buttons. The “Send” button in composer before any text is added to the body for example.

  
• disabledColor
  Not used
• focusColor
  This is the color for items in focus. The text box for email address on the login pages for example.
  
• highlightColor
  This is the color for selected text. The language selected on the login page for example. It is also the setting for the color of the action button after login.
  
• loginBackground
  This is the background color on the login page
  
• loginSubmitBackground
  This is the background color of the "Sign In" button on the login page
  
• loginSubmitColor
  This is the text color of the "Sign In" button on the login page
  
• loginTextColor
  

  This is the text color on the login page excluding text covered by other settings.
  

• sideMenuAppIcon
  Not used
• sideMenuBackground
  This is the background color of the app side bar
  
• sideMenuHeadingColor
  This is the text color of the headings in the app side bar
  
• sideMenuItemActiveColor
  This is the text color of the selected item in the app side bar
  
• sideMenuItemColor
  This is the text color of the non-selected items in the app side bar including the account name
  
• threadListItemActivePickerBackground
  Not used
• threadListItemUnreadBackground
  This is the background color of messages that are not selected in the message list pane that have not been read
  
• threadListItemUnreadColor1
  Not used
• threadListItemUnreadColor2
  Not used
• threadListItemUnreadPickerBackground
  Not used
• appSwitcherBackground
  This is the background color of the app switcher menu
  
• appSwitcherBorderColor
  Not used
• appSwitcherTextColor
  This is the text color of the non-selected items in the app switcher menu
  
• appSwitcherSelectedIconColor
  This is the icon color of the selected item in the app switcher menu
  
• appSwitcherSelectedTextColor
  This is the text color of the selected item in the app switcher menu
  
• appSwitcherSelectedBackground
  This is the background color of the selected item in the app switcher menu
  

Once you have configured the theme save your changes with the Save Settings button at the bottom of the page.
To have this theme show as default (including the login page for your domain) navigate to Webmail settings under the Services tab, select your domain from the drop down menu and change the Default theme setting to your desired theme.

If you have any questions or suggestions for improvement please feel free to contact atmail's customer success team via a support ticket.