You can customize the look and feel of Webmail so it reflects your brand, including interface colors, login page colors, logos, and custom CSS or JavaScript. You manage these customizations through the brand settings in the Mail Administration Console (MAC). Review your customizations after any Webmail update, since new features can occasionally affect styling on custom login pages.
About Webmail branding
Branding controls the colors of the Webmail interface and login page, the logos shown on the login page, and any custom styling or scripting you apply. Each brand is configured separately, so you can maintain different looks for different domains. Color changes are applied through preview color values, which let you adjust the new Webmail appearance before users see it.
Step 1: Adjust the Webmail branding colors
Set the interface colors in the MAC under the Brands section, where you will find a Preview Colors area within the Colors section.
- Navigate to the MAC for your cluster at https://admin.<cluster>.hostedemail.com/. See which cluster your email services are on.
- Click Brands in the left-hand menu.
- Select the brand whose colors you want to adjust.
- Adjust the five hex codes in the Preview Colors section.
The preview color options map to the following interface elements:
Preview option | Controls the color of |
|---|---|
Preview Main | Buttons, toggles, hyperlinks, and hovered selections. This is the only option that also affects the login page. |
Preview Top Nav | The toolbar across the top of each page. |
Preview Sidebar | The left-hand main navigation bar. |
Preview Selected Item | A selection that has been made. |
Preview Sidebar Text | The navigation icons on the sidebar. |
Login page colors
Buttons and checkbox sliders on the login page take the Preview Main highlight color, just as they do inside Webmail. The page background color comes from the Preview Login Background attribute, which defaults to #4d4d4d. You can customize colors further using a custom_login.css file.
Viewing the new login page
You can preview the new login page to test your branding before enabling the Webmail preview for your brand. Replace yourdomain.com with your own domain in the preview URL.
- Visit the preview page for your cluster. For Cluster A, use https://mail.hostedemail.com/?_preview=1&_d=yourdomain.com; for Cluster B, use https://mail.b.hostedemail.com/?_preview=1&_d=yourdomain.com. This opens the current login screen with a Preview toggle.
- Check the Preview option to set the preview cookie in your browser.
- Reload the page to view the new login page.
Tip: To test the mobile login view, use your browser's developer tools to emulate a mobile device. Screens narrower than 490 pixels display the mobile login view; most tablets are wider and show the standard login page.
Adding a logo to the login page
To replace the default Webmail logo on the new login page, upload a login_logo.png file to the brand in the MAC.
For the mobile view, the standard logo is scaled down to 18 pixels high. If you want a logo designed for that size, upload a login_logo_small.png file to the brand. There is no file size limit, but make sure the image looks correct scaled down to 18 pixels.
Custom CSS and JavaScript
You can include a custom_login.css or custom_login.js file on both the classic and new login pages by uploading it to the brand in the MAC. When you upload one of these files, you do not need to reference it anywhere in the custom login page HTML.
To run code before the login page's internal JavaScript, include a function named custom_init in custom_login.js or in the custom login page HTML. You can also use $(document).ready(function(){}) to trigger code on page load, but the custom_init hook guarantees your code runs first.
Note: The new login page adds a ver2 class, which lets you write CSS that applies only to the new page. For example, change a selector of #login-form .box-inner {} to .ver2 #login-form .box-inner {} so it affects only the new login page and leaves the classic page unchanged.
Next steps
- Set default company preferences, including the default Webmail theme.
- Review the Mail Administration Console (MAC) guide for other brand and domain tasks.
Questions? Contact OpenSRS Support.
How helpful was this article?
Thanks for your feedback!
Do you still need help? If so please submit a request here.