Short link: opensrs.help/webmail-branding
To ensure the look and feel of the new Webmail reflects your brand, we encourage you to review all aspects of your Webmail branding customizations and make any of necessary adjustments. The update offers new features, but it may cause issues with certain styling elements on custom login pages.
Webmail branding colors
In the MAC (Mail Administrator Console), under Brand, you will see an additional section within the Colors section called “Preview Colors”. Here, you can adjust the colors of the new Webmail.
-
Based on your cluster settings use your browser to navigate to the MAC:
https://admin.<cluster>.hostedemail.com. - Click on Brands from the menu on the left-hand side.
- Select the brand where you would like to adjust the colors.
- Adjust the five hex codes for the preview colors.
Color map
We have a map to help preserve your custom branding color scheme.
| Preview option | The color of: |
| Preview Main |
Important: This is the only option that also affects the login page. |
| Preview Top Nav |
|
| Preview Sidebar |
|
| Preview Selected Item |
|
| Preview Sidebar Text |
|
Login page colors
Buttons and the checkbox sliders will gain the “Preview Main Highlight” color from branding, just as they do once logged into webmail.
The page background color is taking from a new “Preview Login Background” branding attribute. The default value for this is “#4d4d4d”.
You can customize colors further using the new custom_login.css file.
Viewing the new login page
We’ve enabled a preview of the new login page so you can test your custom branding before enabling our Webmail preview for your brand.
- Visit the preview page for your cluster. This will bring up the current login screen with the addition of the Preview toggle.
Note: ‘Yourdomain.com’ is a placeholder for your specific domain.Cluster A: https://mail.hostedemail.com/?_preview=1&_d=yourdomain.com
Cluster B: https://mail.b.hostedemail.com/?_preview=1&_d=yourdomain.com - Check the Preview option to set the cookie in your browser.
- Reload the page to view the new login page.
The new login page has design elements that match the look of webmail preview.
Testing mobile view on the login page
Your browser may not let you shrink the window down far enough to trigger the mobile view. Just use your browser’s dev tools to emulate a mobile device, and it will work properly.
Devices with effective screen widths less than 490 pixels will display the mobile login view. Most tablets are wider and will display the standard login page.
Logo on the login page
To replace the default webmail logo displayed on the new login page, upload a “login_logo.png” file to the brand via the MAC (Mail Administrative Console).
For the mobile view, the standard view logo will be scaled down to 18 pixels high. If you would like to replace it with a mobile-specific logo scaled down to your design, upload a “login_logo_small.png” file to the brand via MAC. There is no size limitation to the “login_logo_small.png” file, just be sure to make sure that it looks appropriate scaled down to the 18 pixels of the mobile view.
Custom CSS and Javascript
Custom CSS and Javascript are new features for the classic and new login pages.
You can automatically include a “custom_login.css” file or a “custom_login.js” file in the login page by uploading it to the brand via the MAC. If one of these files is uploaded, you do not need to include the file in any part of the custom login page HTML code.
Include a javascript function named “custom_init” in either custom_login.js or the custom login page HTML code to execute the internal javascript functions that update strings on the page before the internal javascript. You can also use “$(document).ready(function(){}” to trigger custom code on page load, the "custom_init" hook offers the ability to guarantee your javascript runs before the login pages' internal javascript.
Dealing with CSS differences with custom login page HTML code
As the HTML on the login page has changed somewhat, you may need to do styling tweaks to the preview login page that do not also affect the classic login page for the duration of the preview period.
The new login page has a “ver2” class on the element, which makes it easy to make a more specific CSS selector that will apply only to the new login page. If you had a current CSS selector of “#login-form .box-inner {}”, simply add a new one of “.ver2 #login-form .box-inner {}” and it will apply only to the new login page.
You can put these more specific CSS rules into your custom login page HTML or include them in the new custom_login.css file.
Was this article helpful? If not please submit a request here