When creating emails you don't just need to edit content but also the styling too. In this lesson we're going to cover everything you need to know about making colours editable.
In the text module in your HTML, we're going to add the option to change the text colour.
As we have multiple bits of text in this module that we want to change the colour of, at the very top of the module, add a field to control the colour. Make sure the type equals colour (or color) and give it a name and a label.
<module name="text_module" label="Full Width Text"> <field type="colour" name="text_colour" label="Text Colour"></field>
Next, on each bit of text, we're going to use this field to control the colour of that text.
Normally when setting the colour, you'd have a style attribute and use a hex code inside it.
Wherever you have set your colour (in our HTML we've done it on the <td> tags) add in another attribute, a replace-style attribute. Include all of the styling you have in your style attribute.
<td style="font-size: 18px; text-decoration: none; color: #000000;" replace-style="font-size: 18px; text-decoration: none; color: #000000;"> </td>
Now in the replace-style attribute instead of the hex code, we're going to reference the colour field by using the name of the colour field above.
<td style="font-size: 18px; text-decoration: none; color: #000000;" replace-style="font-size: 18px; text-decoration: none; color: {{text_colour}};">
</td>
You don't need to have a style attribute and a replace-style attribute. If you just have replace-style, this will work exactly as you need in Taxi. Style attributes are often included too so you can view your Email Design System in the browser with all the styling before uploading to Taxi.
Whatever colour you choose in the colour field will get used as the colour in this td and will control the colour of the text inside it.
Now repeat this for any other text you want to control with this colour field. You can have one field to control all text within the module or have a separate field for each bit of text if needed. This same approach can be used for any other time you want to make colour editable, such as background, CTA or link colours.
Let's now upload this updated EDS to Taxi and see how our colour fields control the text in our text module. If you don't have access to Taxi, here's a short video showing how the text is controlled by the colour fields.
As you can see, there is a colour picker where you can pick any hex code. What if you only want to allow your teams to choose from predefined brand colours?
Move onto the next part of this lesson to find out more.