How can we help?




Follow

Theme Configuration

Nathan Salt -

Themes are an important part of using the atmail 8 product to brand and market your business to your users. We allow the customisation 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, rather than yourdomain.atmailcloud.com) 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.
theme_admin2_webmailDomain.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".

theme_admin2_selectTheme.png

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

  • Webmail Logo
    This is the image displayed in the top section of the sidebar after login.
    theme_mail2_sidebarLogo.jpg
  • 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.
    theme_Login2_logo.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 colour options with the exception of loginBackground which can be set to CSS containing a background image if preferred.

  • appBarBackground

    This is the background colour for the bar at the top of the app
    theme_mail2_appBarBackground.jpg

  • appBarAlternativeBackground

    This is the background colour for the bar at the top of the composor
    theme_mail2_appBarAlternativeBackground.png

  • appBarBorderColor
    This is the line color between the app bar and new calendar/contact tab
    theme_cal2_appBarBorderColor.png

  • appBarTextColor
    This is the text color in the app bar
    theme_mail2_appBarTextColor.png

  • avatarBackgroundColors
    This is the colour for the avatar icons when a contact doesn’t have a photo uploaded. This can be multiple colours delimited by a comma.
    theme_mail2_avatarBackgroundColors.png

  • defaultListItemActiveBackground

    This is the background colour of the selected message in the message list pane
    theme_mail2_defaultListItemActiveBackground.png

  • defaultListItemBackground

    This is the background colour of messages that are not selected in the message list pane that have been read
    theme_mail2_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.
    theme_mail2_defaultListItemColor1.png

  • defaultListItemColor2

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

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

  • defaultListItemFontWeight

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

  • threadListItemUnreadFontWeight

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

  • disabledBackground

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

    theme_mail2_disabledBackground.png

  • disabledColor
    Not used

  • focusColor
    This is the colour for items in focus. The text box for email address on the login pages for example.
    theme_Login2_focusColor.png

  • highlightColor
    This is the colour for selected text. The language selected on the login page for example. It is also the setting for the colour of the action button after login.
    theme_Login2_highlightColor.pngtheme_mail2_highlightColor.png

  • loginBackground
    This is the background colour on the login page
    theme_Login_loginBackground.png

  • loginSubmitBackground
    This is the background colour of the "Sign In" button on the login page
    theme_Login2_loginSubmitBackground.png

  • loginSubmitColor
    This is the text colour of the "Sign In" button on the login page
    theme_Login2_loginSubmitColor.png

  • loginTextColor

    This is the text colour on the login page excluding text covered by other settings.
    theme_Login2_loginTextColor.png

  • sideMenuAppIcon
    Not used

  • sideMenuBackground
    This is the background colour of the app side bar
    theme_mail_sideMenuBackground.png

  • sideMenuHeadingColor
    This is the text colour of the headings in the app side bar
    theme_mail2_sideMenuHeadingColor.png

  • sideMenuItemActiveColor
    This is the text colour of the selected item in the app side bar
    theme_mail2_sideMenuItemActiveColor.png

  • sideMenuItemColor
    This is the text colour of the non-selected items in the app side bar including the account name
    theme_mail2_sideMenuItemColor.png

  • threadListItemActivePickerBackground
    Not used

  • threadListItemUnreadBackground
    This is the background colour of messages that are not selected in the message list pane that have not been read
    theme_mail_threadListItemUnreadBackground.png

  • threadListItemUnreadColor1
    Not used

  • threadListItemUnreadColor2
    Not used

  • threadListItemUnreadPickerBackground
    Not used

  • appSwitcherBackground
    This is the background colour of the app switcher menu
    theme_mail2_appSwitcherBackground.png

  • appSwitcherBorderColor
    Not used

  • appSwitcherTextColor
    This is the text colour of the non-selected items in the app switcher menu
    theme_mail2_appSwitcherTextColor.png

  • appSwitcherSelectedIconColor
    This is the icon colour of the selected item in the app switcher menu
    theme_mail2_appSwitcherSelectedIconColor.png

  • appSwitcherSelectedTextColor
    This is the text colour of the selected item in the app switcher menu
    theme_mail2_appSwitcherTextColor.png

  • appSwitcherSelectedBackground
    This is the background colour of the selected item in the app switcher menu
    theme_mail2_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.
theme_admin2_webmailSettings.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