Create text styles in EasyEditor – Dotdigital Help Centre

Learn to create text styles in EasyEditor.

Before you start

Things you need to know:

This information also applies to EasyEditor for landing pages.

Overview

Text styles are CSS rules that you can apply to text in EasyEditor.

Text styles help you to make sure that your users are using consistent styles in their designs. Using a consistent style helps your contacts to recognise you and reinforces your brand image.

To create and save new text styles, you must add CSS to the source code of your template.

Please note: After you've created a new text style, we recommend that you use the style manager to edit that text style instead of editing it in the source code.
If you want to stop your users from editing your styles, you can lock them.

Find the CSS rules for your text styles

Go to Utilities > Edit Source and find the last internal stylesheet, which has an ee-styles attribute. All of your text styles are in this internal stylesheet and any new text styles must added to it.

<style ee-styles="" ee-render="inline">
  /* Auto-generated style block.  Only edit if you know what you are doing! */
</style>

Edit the default text style

The .base-styles rule is the 'Default style' in the 'Styles' dropdown and it is applied by default to all text building blocks. All other rules for text styles, such as heading styles and paragraph styles, inherit from this .base-styles rule.

The .base-styles rule looks something like this:

.base-styles { color: rgb(56, 75, 106); font-family: Arial, sans-serif; 
             font-size: 14px; line-height: 155%; Margin: 0px; text-align: center; }

If you edit the .base-styles rule, you must make sure that the following three rules below it have the same values for any properties that they each have in common with the .base-styles rule. Otherwise, you will not be able to apply the 'Default style' to your text:

body, td { font-family: Arial, sans-serif; }
.ee_editable, .ee_editable td { color: rgb(56, 75, 106); font-size: 14px; line-height: 155%; }
.ee_editable p { Margin: 0px; text-align: center; }

These three rules must contain only the following specific properties:

The body, td rule should contain only the font-family property
The .ee_editable, .ee_editable td rule should contain only the color, font-size and line-height properties
The .ee_editable p rule should contain all properties other than those in the other two rules

Information
To automatically update the three rules below the .base-styles rule, edit only the .base-styles rule, then edit a text style in the style manager.

Edit text styles and adding new text styles

You can add and edit both heading styles and paragraph styles in your templates.

Please note: After you've created a new text style, we recommend that you use the style manager to edit that text style instead of editing it in the source code.
If you want to stop your users from editing your styles, you can lock them.

Heading styles

Rules for heading styles must start with the .ee-editable class selector, and the second and third class selector must define the level of the heading, for example:

.ee_editable .h1, .h1.ee_editable { font-size: 28px; font-weight: bold; }

Please note: You need to add properties to custom paragraph style rules only if they differ from the .base-styles rule.

You can add different levels of heading style by copying the 'Heading 1' (h1) heading style rule, pasting that rule below the h1 rule, and changing any instances of h1 to your chosen level. For example, you could change both instances of h1 in this example to h2 to make it a second level heading:

Original h1 rule: .ee_editable .h1, .h1.ee_editable { font-size: 28px; font-weight: bold; }

Your new h2 rule: .ee_editable .h2, .h2.ee_editable { font-size: 24px; color: red; }

After you've added a new heading style, it appears in the 'Styles' dropdown.

Paragraph styles

Rules for custom paragraph styles must start with the .ee-editable class selector. The second class selector is a custom class selector for your chosen name of a custom paragraph style, for example:

.ee_editable .my_new_paragraph_style { color: red; font-size: 20px; }

Please note: You need to add properties to custom paragraph style rules only if they differ from the .base-styles rule.

Your custom paragraph styles appear in the 'Styles' dropdown below the heading styles.

Remove a text style

To remove a text style, delete the rule.

Important

If you remove the .base-styles rule and the three rules below it, the fonts of all the non-button text become Times New Roman.

Unsupported CSS formats

Any style rules that contain selectors that are not formatted correctly might be removed after those styles are edited in the style manager.

Furthermore, some CSS properties might be removed if they are not supported by your browser (non-standard rules or vendor-specific rules).

The following examples are CSS formats that are not supported in EasyEditor:

EasyEditor does not support rules that contain more than one custom class selector

Unsupported: .ee_editable .my_new_text_style, .ee_editable .my_new_text_style2 { font-size: 20px; }
Custom class selectors must be preceded by the ee-editable class selector

Unsupported: .my_new_text_style { font-size: 20px; }
EasyEditor does not support multiple classes in a single <p> tag

Unsupported: .ee_editable .my_new_text_style.my_new_text_style2 { font-size: 20px; }
EasyEditor does not allow you to customise sub-components in a single rule

Unsupported: .ee_editable .my_new_text_style b { font-size: 20px; }

Workarounds for unsupported CSS formats

To create a text style rule that contains unsupported selectors, you can add those rules to a stylesheet that comes before the ee-styles stylesheet.

For example, if you want bold text inside an h1 to be red, you can create the following stylesheet (that comes before the ee-styles stylesheet):

<style ee-render="inline">
.ee_editable .h1 b, .h1.ee_editable b { color: red; }
</style>