Summary
You can define styles in a template's HTML that dictate how text and buttons should look. Styles can be selected by a user in EasyEditor.
Styles can also be modified in EasyEditor, unless you choose to lock them.
Default styles block
When you create a campaign, the very last <style> block will contain the default fonts for that campaign. The style block should start looking something like this:
<style ee-styles="" ee-render="inline">
/* Auto-generated style block. Only edit if you know what you are doing! */
.base-styles { color: rgb(56, 75, 106); font-family: Arial, sans-serif;
font-size: 14px; line-height: 155%; Margin: 0px; text-align: center; }
body, td { font-family: Arial, sans-serif; }
...
</style>
This style block is auto-generated whenever you use the new style manager within the editor itself. This editor will both read and write this block. Any changes you make to this block must conform to the rules the editor understands, else your changes may get overwritten.
Changing styles
The easiest way to make changes to these styles is to use the style manager in EastEditor itself. However, there are reasons why you may wish to modify these styles within the code itself. For example, if you wish to add styles that cannot be edited within the style manager.
Additionally, you may want to add new styles, remove existing styles, and both add and remove styles for the button element too.
Changing the base styles
The base style will be the very first rule within this block, with the class .base-style. All other styles (headings etc) will inherit from this base style, and all editable text will take on this base style by default.
It will look 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; }
Changing the above, however, will not immediately affect the text within your campaign. This class is actually just used for the editor itself to keep track of the base style. It isn't actually applied directly to the text. It is, however, fundamentally important that you update this style, else your real base styles will get overwritten when someone uses the style manager.
The above CSS will then be directly applied to the campaign using the three rules below this class, and these must match up with the values set in the above class:
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; }
The rules that should be followed are:
- the font family (and only the font family) should be set on the 'body, td' rule
- the color, font-size and line-height values must be set on the '.ee_editable, .ee_editable td' rule
- all other rules must be set on the '.ee_editable p' rule
Tip: If you wish the editor do this work for you, simply edit the base style alone, then return to EasyEditor design mode, launch the style manager, edit any style in the list and click 'Apply'. This will automatically regenerate the three lines above from the .base-styles class, using these rules.
Changing heading styles
Heading styles are a lot easier to manage. These generally look like this:
.ee_editable .h1, .h1.ee_editable { font-size: 28px; font-weight: bold; }
Remember that you only need to add rules in here if they differ from the .base-styles rule. For example, if both your base styles, and your heading use 'Arial' font, then that should be in your base styles, but not in your heading style.
If, however, your heading font is different from the base-style font, then this should be included in your heading style.
Again, the easiest way to edit this is in the style manager, but if you want to add a custom CSS value that isn't available within the style manager, then it is fine to add it here.
Adding heading styles
You can add heading styles by simply copying an existing heading style, and renaming it to the next in the sequence. For example, you could copy the above, and change both instances of 'h1' to 'h2'.
Adding and changing custom styles
Custom styles, much like heading styles are relatively simple, and look like this:
.ee_editable .my-custom-style { color: red; font-size: 20px; }
This will appear in your styles dropdown in the editor, below the heading styles as "my-custom-style". As per headings above, you only need to include properties that don't exist in the base-style class.
To add a new custom style, just add a new one in the style block in the same format as the above. Note that your custom class name must be preceded by .ee_editable.
Unsupported formatting or CSS
As already stated, anything the editor does not understand (basically, anything that does not conform to the rules above) may be stripped if any style is edited within EasyEditor's style manager:
- Entire rules may be stripped if they do not fit the above rules
- CSS values and properties may be removed if they are not supported by your browser (non-standard or vendor-specific rules may be stripped as a result of this)
Example 1
.ee_editable .my-custom-style, .ee_editable .custom-2 { font-size: 20px; }
We do not support rule grouping in this way. The above should be two separate rules for each of the custom styles. This rule will be removed.
Example 2
.my-custom-style { font-size: 20px; }
The custom class needs to be preceded by .ee_editable. This will be removed.
Example 3
.ee_editable .my-custom-style.secondary-custom-class { font-size: 20px; }
We do not support multiple classes being added to a single paragraph.
Example 4
.ee_editable .my-custom-style b { font-size: 20px; }
We do not allow you to customize sub-components within a single rule.
Getting around these restrictions
There are plenty of good reasons to get around these restrictions. And it isn't because we can't do things like this within the editor: more that simply these more complex requirements are not supported by the new style editor.
In essence, we do not stop you adding your own style block to your email, and therefore, anything that does not fit in the above style block can be added tor your own custom style block as required.
For example, if you wish bold text inside an .h1 should be red, then you can create your own style block (before the font styles block), like so:
<style ee-render="inline">
.ee_editable .h1 b, .h1.ee_editable b { color: red; }
</style>