Custom branding for Webmail

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.

  1. Based on your cluster settings use your browser to navigate to the MAC: 
    https://admin.<cluster>.hostedemail.com
  2. Click on Brands from the menu on the left-hand side.
    brands.png
  3. Select the brand where you would like to adjust the colors.
  4. Adjust the five hex codes for the preview colors.
    Preview_colors.png

Color map

We have a map to help preserve your custom branding color scheme.

Colour_Map.png

Preview option The color of:
Preview Main
  • buttons, toggles and hyperlinks.
  • selections that are hovered over. 

Important: 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 located on the sidebar.

 

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.
Login_page_colors.png

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.

Back to top

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.

  1. 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
  2. Check the Preview option to set the cookie in your browser.
    Preview_checkbox.png
  3. 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.

Back to top

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.

Back to top

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

Back to top

 

Have more questions? Submit a request

0 Comments

Please sign in to leave a comment.