Styles in templates

Summary

Style sheets play an important role in templates. Because of our CSS inliner, many more styles can be kept in the master style sheets, as opposed to having to inline them all by hand.

There are, however, some important things to know before you start editing these styles yourself. First and foremost is that several of these style blocks are automatically updated, meaning if you make changes to them, your changes will be overwritten when you next load your campaign.

Auto-generated styles

Warning

Changes you make to auto-generated style blocks will be overwritten the next time you load your campaign!

Auto-generated style blocks look like this:

<style id="editor_required_block">
html, body { Margin: 0 !important; padding: 0!important; }
...
</style>

Any changes you make inside such a block will be overwritten when you next load your campaign.

Why do we have auto-generated blocks?

We include these so that we can update them. If, for example, we find a better way of achieving something, or an update to a popular email client changes and we need to roll out a fix, we can do so to existing campaigns.

How to make changes to auto-generated styles

You have two ways to change auto-generated styles:

  1. Override the style you wish to update (recommended)
  2. Turn off the auto-generating process

Overriding styles is easy. If you just add another style block below the auto-generated one, you can change your styles as you wish. For example, overriding the margin property on the email body (see the styles above), can be done like so:

<style>
  body { Margin: 10 !important; }
</style>

As long as your style comes after the above, it will override our default value. Note that you only need !important if we have !important in ours.

Alternatively, you can turn off the auto-generating process by simply removing the ID attribute of the style sheet. But if you do this, any updates or patches we do to the above styles will not be copied over to your campaign. This could, over time, affect the way building blocks work within your campaign, so we don't recommend this method.

Adding your own style blocks

You can add your own style blocks as you wish, or update any style blocks that already exist that don't have the ID attribute, as documented above.

Remember that many (but not all) styles in email campaigns need to be inline, so make sure you make your own style sheets inline, as required:

<style ee-render="inline">
  p { font-size: 14px; }
</style>

See 'CSS inlining' for more information.

The default style blocks in templates

There are five separate <style> blocks in our templates:

<style type="text/css" id="editor_required_block">

The above block contains the basic non-inlined styles that make sure the email renders correctly in a number of different clients, from Outlook through to media queries used in mobile clients that support them.

<style type="text/css" id="editor_required_inline" ee-render="inline">

The above block contains a set of inline utility classes for a set of different operations, as well as some basic classes for handling columns and column stacking.

<style type="text/css" id="editor_required_emailwidth" ee-render="inline">

The above block contains all the styles required to display the email and all the columns and rows at the correct width. This block contains the styles directly responsible for the email's width.

<style ee-render="block">

The above block contains user-editable styles that will not be inlined.

<style type="text/css" ee-render="inline">

The above block contains styles that will be inlined at send. This block contains all the default font styles that new blocks will be given when blocks are dragged into EasyEditor.

MSO style blocks

The default templates also contain many small style sheets that are surrounded by Microsoft Outlook conditional comments. For example:

<!--[if mso]>
<style>
.banner {
width:900 !important;
}
</style>
<![endif]-->

These will not be overwritten by EasyEditor, so they can be modified, but be careful when doing so.

These styles are for Microsoft Outlook, so they will be ignored when you are viewing your campaign inside EasyEditor. Therefore, any modifications to these blocks will require testing in Microsoft Outlook itself.

Have more questions? Submit a request

Comments

Powered by Zendesk