End User Enablement Assets Styling Guide

Updated January 21, 2025 08:58

In just a few steps, Mimecast enablement assets can quickly be styled to match your corporate identity. The asset framework has been designed with customers in mind right from the start. You won't need a web developer to style the assets; some basic HTML and CSS knowledge will allow you to style them in no time. If you know the terms 'CSS class' and 'hex color,' you're in good shape to get styling!

What can be styled?

The following sections within the assets can be styled:

What information will I need?

Having information about your corporate branding to hand is critical before proceeding to style your assets. If you have a corporate communications team or PR agency, they will likely have this for you. Otherwise, many web browser tools are available to assist you in picking colors from the screen.
The following information will help you to style the assets:

Corporate logo URL

Transparent PNG works best as this will take on the background color of the Header section.
Recommended size limits:
The image needs to be hosted online, hence the URL requirement.

Primary brand color:

It is generally used in the main menu of your corporate site.
Used for the Header and Splitter sections.

Secondary brand color:

Generally used for buttons, etc.
It is used for Buttons, but it can also be used as a secondary Header or Splitter color if you want these to be different.

Light panel color:

Generally highlighting panels of information
Used for the More Info section.

The basics of editing the assets

Many tools are available for editing the HTML and CSS in the assets, but you can use a basic text editor just as well as a formal editing tool. Styling the assets will be much easier if your chosen tool has find-and-replace functionality.
Note: It is not recommended to edit the assets using Outlook or Word. These programs add Microsoft markup to the files, which may cause the assets to not display correctly in various other email clients.
Each asset is downloadable as a ZIP archive from the attachments section at the bottom of each page. Each archive includes:

HTML file.
PSD Hero Banner file

Once downloaded, extract the ZIP archive and open the HTML file in your chosen editor.
Each section to be customized is labeled for ease of identification, for example:.

Use your editor's find functionality to quickly locate the relevant section name in the file. The relevant section label will be listed as we outline how to style each section. Simply search for the label in the file to locate it.
Save the file after each change and preview the changes by opening the file in a browser and refreshing it after each change. Many editor tools provide the functionality to refresh the browser window after each save.

Styling the various asset sections

STYLE: HEADER

This section contains the logo and the text-based theme for the asset series.
We will be changing the logo and the background color for this section.

Use the Find functionality in your editor to locate the following section:

Replace #576b7c (background-color) with your primary brand color to change the header background color.
Replace #fff (color) with the hex value you want to apply to the theme text, e.g., "We're making life easier!"
Find "STYLE - LOGO"in the file, you will see the following line:

<img src="https://community.mimecast.com/resources/statics/21292/logo_white200.png?a=1477494470472" alt="Mimecast Logo">

Replace the URL with your corporate logo. Don't forget to change the alt text to reflect your company name.
Save and preview your changes.

Notes:

The recommended logo size is around 200px for rectangular logos.
You may have a logo of a similar size if you have applied branding within the administration console.

STYLE: HERO BANNER

This section contains the call to action and the call to action description text.
We will be changing the background color of the box, as well as the color of the text.

You will need to open the .PSD file from the archive you downloaded (if you do not have software to open .PSD extensions, your creative or marketing team may do. This can be turned around very quickly:

Replace the color value of the Hero Text Background Block layer with your desired color. Depending on your corporate style, this may be your primary or secondary brand color.
Save the amended file.
Export the image as either a PNG or JPG file (the best option for maximum Outlook support).
Upload the image to a location that can be accessed from the Internet. Your marketing team may have a good place for you.
Find "STYLE - Hero Banner" in the file, you will see the following line:

<img src="https://community.mimecast.com/resources/statics/21292/Hero-Intro-and-Search.jpg?a=1478078398380" alt="Improving the way you search for archived email." style="display:block;">

Replace the URL with one created in step 4 of this section.

STYLE: SPLITTER

This section provides visual segmentation between each major section of the asset.
We will be changing the background color of the splitter, as well as the color of the text.

Use the Find functionality in your editor to locate the following section:

Replace #ef6421 (background-color) with your desired color, this may be your secondary brand color.
Save and preview your changes.
If you do not want the text to be white, replace #fff (color) with your desired color.
Use find and replace to change the #ef6421 value to that of the color used in step 1 of this section.
Save and preview your changes to ensure all splitter sections are updated.

STYLE: BODY TEXT

This section styles the main text content of the asset.
We will be changing the text color; it is advisable to use the text color used on your corporate website or for internal communications to ensure sufficient contrast is maintained.

Use the Find and Replace functionality in your editor to locate the following section:

font-family: 'Open Sans', sans-serif; color: #3b3b3bb;

Replace 'Open Sans', sans-serif (fonts) and #3b3b3bb (text color) with your desired corporate font and text color (be aware that some mail clients will ignore web fonts or those it isn't aware of and replace them with Times Roman).
Save and preview your changes to ensure all fonts and text colors are updated.

STYLE: MORE INFO

This section styles the text, outlining how to get more information or support for the topic.
Replace [Insert Name Here] with the name of the Champion.
Replace [him/her] with the relevant designation.
If you are not adopting a champion program, you may remove the HTML for this section. Mimecast highly recommends directing users to a Champion or specific contact for adoption to be a success.

Note: If you remove this section, find  and delete until .

We will be changing the background color of the section, as well as the color of the text.

Use the Find and Replace functionality in your editor to locate the following section:

Replace #ececee (background-color) with your desired color.
Use the Find and Replace functionality in your editor to locate the following section:

Replace the URL with that of the Champion profile image.
Save and preview your changes.

STYLE: PRO TIP LINKS

You may style hyperlink colors to a certain degree, but Outlook does not currently support removing the underline in certain circumstances.

Use the Find and Replace functionality in your editor to locate the following section:

Replace #ef6421 (hyperlink color) with your desired background color. (You may have changed this color in a previous step, so don't worry if you can't find it; just look for the hyperlink in this section and change the color value represented.)
Save and preview your changes.

Sending the enablement asset email to users

We've focused on making these assets easy to style and send out. The best and most reliable way to send these out is by using the Mimecast Personal Portal, but we'll also cover using Internet Explorer and Outlook.

Using Mimecast Personal Portal

Log in to the Mimecast Personal Portal.
Select Compose to open a new message.
Open the asset HTML file in a new tab or window in a browser; Chrome works well for this.
With the page open, select all of the content on the page, either using menu options or CTRL+A.
Once you've selected the content, copy the selection using the menu options or CTRL+C.
Switch back to your Mimecast Personal Portal tab and paste the content into the body of the message.
Add the message subject and your email address or a test address.
Send the message.

Once you're happy with the results and have tested them with the relevant email clients, repeat the process above, replacing the address with the relevant distribution lists or individual addresses.

Using Internet Explorer and Microsoft Outlook

Open the asset HTML file using Internet Explorer.
Select File | Send | Page by email.
A new message opens in Outlook with the HTML embedded in the body.
Review the layout and formatting of the message to ensure nothing has broken during this process.
Add the message subject and your email address or a test address.
Send the message.

Once you're happy with the results and have tested them with the relevant email clients, repeat the process above, replacing the address with the relevant distribution lists or individual addresses.
Note: During our testing, the send page by email option produced mixed results. The Mimecast Personal Portal option worked every time and did not break the formatting. Some customers may have Mimecast Personal Portal disabled for the general end-user base. Administrators may consider creating new Application Settings for the users sending these assets out. This will allow granular access to a specific group rather than the entire user base.

Advanced styling

How can I get help styling the assets?

If you run into trouble or need some advice on advanced styling, create a discussion in the Community Forums. Your peers may be able to assist you. Remember to provide as much information as possible, including examples of your HTML.
Note: Mimecast Support is not able to assist with styling enablement assets.

Can I host the banner images myself?

Yes, of course, you can download them and upload them to your image repository. Remember to replace the URLs in the asset itself.

Can I add a footer to the assets?

Yes, add the HTML for your footer under .

Can I change the links to further information?

Absolutely. These are your assets, so please feel free to link to any other training assets you may have hosted in your environment.

Can I remove the Powered by Mimecast image?

You can, but if someone has read the entire asset and still clicks the Mimecast link at the bottom, they're probably keen to learn more about the technology you're deploying. Visiting Mimecaster Central continues its journey of discovery and maximizes the potential for proper productivity and mobility.

Why do these assets make use of inline styling and not embedded CSS?

Unfortunately, not all email clients can use modern embedded CSS classes and require inline styling. This ensures maximum compatibility across the majority of email clients, including Microsoft Outlook, Apple Mail, Gmail, etc.

Related to

End User Enablement Assets