Become more efficient with updating the styles in your Email Design System with the update attributes.
When creating your Email Design System you may want to give options for marketers to control the styling of your email, as well as the content. You can do this with Taxi Syntax, using the update and update-style attributes.
It's also possible to use replace-style to update css, for example, when making the font size editable.
This is used when you want to control inline styling, for example if you want to be able to control the colour of a headline.
Start with the field that will appear in the Taxi editor.
<field type="colour" name="headline_colour" label="Headline Colour"></field>
To set the colour in HTML, you'd include style="color:#000000;" in the appropriate tag. To make this editable in Taxi you can use the update-style attribute.
<td style="font-size:16px;" update-style="color:{{headline_colour}};">
Here, the colour is controlled by the headline_colour field, by using the field name. With the update-style attribute, the CSS it contains gets merged into the style attribute when you export. So if you choose #ff0000 as the hex code in your colour field, this will be in the code you export from Taxi:
<td style="font-size:16px;color:#ff0000;">
In this example, if the colour field is empty then no colour will be included in the style attribute. If you have a colour in the style attribute, if the field is empty then this colour will be used.
For example, this:
<td style="font-size:16px;color:#FFFFFF;" update-style="color:{{headline_colour}};">
Becomes this:
<td style="font-size:16px;color:#FFFFFF;">
This is used when controlling CSS in style tags in the head of your EDS. For example, if you wanted to control all h1 tags and p tags.
<style type="text/css" update="h1 {color: {{document.header_colour}};}
p {color:{{document.another_colour}};}
}">
h1 {color:red; margin: 1px;}
p {color:blue;}
</style>
The h1 and p colours are controlled by two fields and whatever value is added in those fields will get used in this style block. If header_colour is set to #000000 and another_colour is set to #FFFFFF, this will be in the exported code:
<style type="text/css">
h1 {color:#000000; margin: 1px;}
p {color:#FFFFFF;}
</style>
If there is more than one piece of styling being controlled, (e.g. h1 is setting the colour and the margin), you only need to include the css you want to update in the update attribute. In the example above color is included but margin isn't.
When you want to update a specific class, it is important to include the . of the class in your update-style. Similarly, if you need to include !important; on your class, you should also include this in the update declaration, like the below.
<style type="text/css" update=".bluelinks a {color: {{modules.brand.legal_color}} !important; }">
.bluelinks a {color: #000000!important; text-decoration: none!important;}
</style>
In the example above, we are also referencing a module level field instead of a document level.
If you want to use to update css in a media query you will need to include the update attribute, not just the style you're trying to update.
<style update="@media screen and (max-width:480px) {
.h1 { {{modules.brand.h1StyleMob}} } }">
@media screen and (max-width:480px) {
.h1 { font-size: 30px !important; line-height: 30px !important; }
}
</style>
When referencing fields in the head of the EDS, these fields can't be in modules that are also in a modulezone. You use {{document.field_name}} for a field outside of any modules and modulezones. And you use {{modules.module_name.field_name}} for a field that is inside a different module.
This update attribute in a style tag can only be used in the head of the Email Design System, not the body.