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:
- atmail cloud EU
URL: https://yourdomain.atmailcloud.com/admin/ - atmail cloud US-EAST
URL: https://admin.us-east.atmailcloud.com/
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.
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 colours 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 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
- appBarAlternativeBackground
This is the background colour for the bar at the top of the composor
- 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 colour for the avatar icons when a contact doesn’t have a photo uploaded. This can be multiple colours delimited by a comma. - defaultListItemActiveBackground
This is the background colour of the selected message in the message list pane
- defaultListItemBackground
This is the background colour 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 colour for secondary text fields of a message in the message list. The Body Preview for example.
- defaultCalendarBackground
This is the background colour for events on any calendar. If left blank the background colour 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 colour 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 colour for items in focus. The text box for email address on the login pages for example. - 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. - loginBackground
This is the background colour on the login page - loginSubmitBackground
This is the background colour of the "Sign In" button on the login page - loginSubmitColor
This is the text colour of the "Sign In" button on the login page - loginTextColor
This is the text colour on the login page excluding text covered by other settings.
- sideMenuAppIcon
Not used - sideMenuBackground
This is the background colour of the app side bar - sideMenuHeadingColor
This is the text colour of the headings in the app side bar - sideMenuItemActiveColor
This is the text colour of the selected item in the app side bar - sideMenuItemColor
This is the text colour of the non-selected items in the app side bar including the account name - 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 - threadListItemUnreadColor1
Not used - threadListItemUnreadColor2
Not used - threadListItemUnreadPickerBackground
Not used - appSwitcherBackground
This is the background colour of the app switcher menu - appSwitcherBorderColor
Not used - appSwitcherTextColor
This is the text colour of the non-selected items in the app switcher menu - appSwitcherSelectedIconColor
This is the icon colour of the selected item in the app switcher menu - appSwitcherSelectedTextColor
This is the text colour of the selected item in the app switcher menu - appSwitcherSelectedBackground
This is the background colour 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.
Comments