This FAQ is aimed at helping you to customise your email templates correctly. It covers how to use a font which is not available in the email editor toolbar and will also help if you are having trouble with styling text for various email clients.

For general email template design, we recommend you use Stripo to design your template using their drag and drop interface. You can then copy the html from that template into a new template in OpenCRM. 

To make email styles readable in a variety of email clients - Gmail especially - you will need to use some inline .css to style the text manually, via the email template Source code. Don't worry this is easier than it sounds.

Editing your template - how do I access the code?

1. Go into the email template edit screen via Settings > Email Templates > and select 'New Template' or Settings > Email Templates then select an existing template.

2. Expand the editor tool bar by clicking the icon highlighted below:

3. Then click the ‘Source’ button to access the source code for the template.

4. This will bring up the template code similar to below. You can use the button highlighted to make the email body full screen to help ease editing.

 

Adding your default text styles using inline css:

There are many ways to style text in CSS, but the only way to make the styling compatible across all email clients, Gmail especially, is to make sure you have styles set up 'inline'.  To learn more about styling text through CSS please click this link - http://www.w3schools.com/css/css_text.asp.

To do this, you need to surround all of your email in a div tag, which contains your default styling.

So you need your source code to look like this:

EG.

This is how our default text looks:

This is the code behind the scenes:

You can see that the whole email is wrapped in a div tag, and the colour, size and font is specified within.

TIPS / FAQS:

How do I add buttons to my email template?

We recommend a great tool which can be found at https://buttons.cm/ to help you create your buttons. Instructions can be found on the page as to how they work. As always, please do test your template before sending it out to clients.

How do I fix unwanted spacing or padding which appears in Gmail tests?

Add 'display:block;' within your image tag if you are experiencing unwanted spacing around it.

Why should I add 'Alternative text' or 'alt' tags to images in my email template?

You should add alt tags to images in email templates as this is what the reader will see initially if they do not have images enabled by default in their email client. This is also useful for reader who may be visually impaired.

TIP: You can use these tags intelligently. Think about adding a special message in them. So if you have an offer on, perhaps use the alt tag to promote this.

Using the Font Family Property

You need to use the 'font-family' css property to apply different fonts to those available in the toolbar. This works by holding several font names as a "fallback" system within the code, this is so when the device or email client does not support the first font, it tries the next font and so on.

EG.

font-family: Verdana, Arial, Helvetica, sans-serif; - The browser or email client will try to display Verdana as a first choice then Arial, then Helvetica. 

Follow this link for more detailed explanation about css fonts - http://www.w3schools.com/css/css_font.asp

Why does my email look funny?

When working with email editors, what you see is not always what you get. Just because your email template might look fine in the editor, this may not be the case once the email is sent and viewed in email clients like Outlook and Gmail. This is why it is important that you test your emails thoroughly and follow our tips on how to code your email templates correctly.

Keep your code clean.

Text entered into Microsoft Word and Outlook contains a great deal of hidden formatting information, which although unseen on the screen may transfer into the email template code when you copy and paste directly into the editor in OpenCRM. This formatting information can cause the email to look very different from one browser or email client to the next.

Therefore, it is important that when copying content, you strip this styling out before inserting it into your templates. This can be done easily by using another text editor like Text Edit for IOS and Notepad for PCs.

Text Edit - Copy and paste text into new document. Go to Format > Make Plain Text. Then copy and paste that text into your email.

Notepad - Copy and paste text into a new document. Then copy and paste that text into your email.

Make a Copy

Before doing any work with templates in OpenCRM, we always advise you make a copy. This is just to work as a back-up in case you go completely wrong. Remember, there is always the back button too in the toolbar of the editor.

Adding additional styling to other elements:

If you would like to style any other elements in your email template, like maybe hyperlinks, headers and in more complex scenarios, tables and images, you will need to remember to use inline styling again. You can do this manually or by selecting the element and using the tools in the tool bar, if you use the toolbar tools, it is always good to double check the source code afterwards.

EG.

In our default email templates, our address is styled slightly differently to the rest of the text. You should be able to see in this screenshot that the text is green, there is also some extra space around this line of text to separate it from the other content a bit.

We have added this styling in span tags, inline, around the address text content. This is the code behind the scenes:

Testing

Once you are happy that your email template code is correct in OpenCRM, it is strongly advised that you send some test emails to dummy accounts (or your own) to check everything is looking right. Gmail and Outlook are the main ones to test your documents in.

Email on Acid is great resource to help you do bullet proof testing.