Summary

EasyEditor uses classes, attributes, and comments to enable certain features in the user interface.

If you want to add your own CSS rules to your email templates, you need to put your styles in the correct internal stylesheets. Otherwise EasyEditor might ignore or remove your CSS rules.

Finding the auto-generated CSS rules

EasyEditor has auto-generated rules that we can make batch updates to. For example, we might want to fix a bug in the rules, or we might want to add a more efficient rule to replace an existing one.

The following three internal stylesheets contain auto-generated rules:

• <style id="editor_required_block"> </style>

• <style id="editor_required_inline"> </style>

• <style id="editor_required_emailwidth"> </style>

Important

We recommend that you don't edit any auto-generated rules.

Any rules that you either add to or edit in auto-generated internal stylesheets are overwritten when you open the campaign in EasyEditor.

If you remove the id attribute from these auto-generated internal stylesheets, your campaign may stop working in some email clients or EasyEditor.

Overriding auto-generated CSS rules

We recommend that you don't edit any auto-generated rules. Instead, add any new rules to a new internal stylesheet below the auto-generated one that you want to override. For example, the following internal stylesheet overrides the margin property on the body element:

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

Note: You need to include the !important directive in your rule only if that directive is in the auto-generated rule that you want to override.

Types of internal stylesheets in EasyEditor

To make sure that EasyEditor continues to function correctly, we recommend that you edit only certain internal stylesheets.

Internal stylesheets that you can add to and edit

• <style ee-render="block">

  This internal stylesheet contains rules that are ignored by the CSS inliner.

• <style ee-styles="" ee-render="inline">

  This internal stylesheet contains rules for creating and editing text styles and button styles in the user interface.

• <style ee-render="inline">

  This internal stylesheet contains rules that you want the CSS inliner to handle. For example, changing the default padding for building blocks.

Internal stylesheets that you shouldn't edit

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

  This internal stylesheet contains the rules that make sure that your email campaign renders correctly in different email clients. This internal stylesheet is ignored by the CSS inliner.

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

  This internal stylesheet contains rules that handle columns and column stacking.

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

  This internal stylesheet contains all the rules for the width of your campaign and the default padding for all building blocks.

  Note: If you want to change the width of your template, add a new internal stylesheet instead of editing this one.

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

  This internal stylesheet contains all rules for the text and button styles that allow users to style new building blocks by using the user interface.

Microsoft Outlook conditional comments

We use conditional comments to apply certain CSS rules to Microsoft Outlook (MSO). EasyEditor does not render this CSS in the preview window. Therefore, if you edit these rules, make sure that you test your campaign in MSO.

If you make changes to a campaign, for example change the width, there is no need to update the values in these comments because these comments are updated automatically.

Any CSS rules that are wrapped in the following comments are ignored by all email clients except MSO:

<!--[if mso]><![endif]-->

If you want to apply certain CSS rules only to particular version of MSO, you can use the following prefixes and add the version number after mso:

• gte (greater than or equal to)
• lte (less than or equal to)
• gt (greater than)
• lt (less than)

For example, if you wanted your CSS rules to apply only to version 9 and any greater versions of MSO, you would wrap that CSS in the following comments:

<!--[if gte mso 9]><![endif]-->