How can we help?




Follow

Theme Configuration

Stewart -

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.
WebadminServicesWebmailDomains.png

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".

WebAdminServicesSelectDomain.png

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.
    WebMail.png
  • 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.
    WebMailLoginPage.png

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
    appBarBackground.png

  • appBarAlternativeBackground

    This is the background color for the bar at the top of the composer
    appBarAlternativeBackground.png

  • appBarBorderColor
    This is the line color between the app bar and new calendar/contact tab
    appBarBorderColor.png
  • appBarTextColor
    This is the text color in the app bar
    appBarTextColor.png
  • 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.
    avatarBackgroundColors.png
  • defaultListItemActiveBackground

    This is the background color of the selected message in the message list pane
    defaultListItemActiveBackground.png

  • defaultListItemBackground

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

  • defaultListItemColor1

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

  • defaultListItemColor2

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

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

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

  • threadListItemUnreadFontWeight

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

  • disabledBackground

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

    disabledBackground.png
  • disabledColor
    Not used
  • focusColor
    This is the color for items in focus. The text box for email address on the login pages for example.
    focusColor.png
  • 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.
    highlightColor1.pnghighlightColor2.png
  • loginBackground
    This is the background color on the login page
    loginBackground.png
  • loginSubmitBackground
    This is the background color of the "Sign In" button on the login page
    loginSubmitBackground.png
  • loginSubmitColor
    This is the text color of the "Sign In" button on the login page
    loginSubmitColor.png
  • loginTextColor

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

  • sideMenuAppIcon
    Not used
  • sideMenuBackground
    This is the background color of the app side bar
    sideMenuBackground.png
  • sideMenuHeadingColor
    This is the text color of the headings in the app side bar
    sideMenuHeadingColor.png
  • sideMenuItemActiveColor
    This is the text color of the selected item in the app side bar
    sideMenuItemActiveColor.png
  • sideMenuItemColor
    This is the text color of the non-selected items in the app side bar including the account name
    sideMenuItemColor.png
  • 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
    threadListItemUnreadBackground.png
  • threadListItemUnreadColor1
    Not used
  • threadListItemUnreadColor2
    Not used
  • threadListItemUnreadPickerBackground
    Not used
  • appSwitcherBackground
    This is the background color of the app switcher menu
    appSwitcherBackground.png
  • appSwitcherBorderColor
    Not used
  • appSwitcherTextColor
    This is the text color of the non-selected items in the app switcher menu
    appSwitcherTextColor.png
  • appSwitcherSelectedIconColor
    This is the icon color of the selected item in the app switcher menu
    appSwitcherSelectedIconColor.png
  • appSwitcherSelectedTextColor
    This is the text color of the selected item in the app switcher menu
    appSwitcherSelectedTextColor.png
  • appSwitcherSelectedBackground
    This is the background color of the selected item in the app switcher menu
    appSwitcherSelectedBackground.png

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.WebAdminServicesWebmailSettingsDefaultDomainSelected.png

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

Comments


Contact our support team


+61 (7) 5357 6605       support@atmail.com