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