<p>To add inline styles to HTML tags generated by Redactor such as <code>&lt;li&gt;</code>, install the <a href="https://github.com/mmikkel/RetconHTML-Craft" rel="nofollow noreferrer">Retcon plugin</a> and add the following to your template. For example:</p>

<pre><code>{{ entry.body | retconAttr('li', { style: 'color: red;' }) }}
</code></pre>

<p>For more info, consult the <a href="https://github.com/mmikkel/RetconHTML-Craft/wiki/Attr" rel="nofollow noreferrer"><code>retconAttr</code> filter documentation</a>.</p>

CC BY-SA 3.0
2017-12-08T17:26:34.073Z
Does it matter where in the template I insert the code? I tried inserting it in multiple places and nothing changed. Do I need to add anything to the Redactor file or it should just work with the above code without adding anything else?
Morgan
CC BY-SA 3.0
2017-12-09T00:35:06.930Z
Put the code where you would normally put the `{{ entry.body }}` field without the `retconAttr` filter. You don't need any special Redactor configuration. When you inspect the source code in browser, you don't see something like `<li style="color: red;">My list item text.</li>`?
Andrea DeMers
CC BY-SA 3.0
2017-12-11T15:48:49.367Z
Never mind, I got it to work. I don't have an entry called body so I had to use the name of one of the blocks I created. How do I add inline styles to multiple tags? I tried doing the following but it didn't work:

`{{ block.ebParagraph | retconAttr(
    'li', { style: 'color: #63666a;'},
    'a', { style : 'color: red;' }
    )}}`
Morgan
CC BY-SA 3.0
2017-12-11T16:08:57.520Z
Try:

```{{ block.ebParagraph | retconAttr( 'li', { style: 'color: #63666a;'}) | retconAttr( 'a', { style: 'color: #red;' }) }}```
Andrea DeMers
CC BY-SA 3.0
2017-12-11T18:34:44.470Z
Got it. Thank you for all your help, Andrea!
Morgan
CC BY-SA 3.0
2017-12-06T17:14:23.880Z
2017-12-06T17:14:23.880Z
Andrea DeMers
<p>Craft uses the redactor js plugin. You can change it's settings, plugins and all formats like you want in the config <code>craft/config/redactor</code> or add custom presets. Here is the link how to configure the redactor <a href="https://imperavi.com/redactor/docs/settings/formatting/" rel="nofollow noreferrer">https://imperavi.com/redactor/docs/settings/formatting/</a></p>

CC BY-SA 3.0
2017-12-06T16:50:11.703Z
2017-12-06T16:50:11.703Z
Robin Schambach
<p>Is there a way to modify how the html fields are outputted by Redactor? I'm creating an email template and I'm trying to add inline styles to Redactor's list items, links, etc.</p>

<templating><redactor><css><html-entities>
Modify how the html fields are outputted by Redactor
# Modify how the html fields are outputted by Redactor

(Asked by: username_0 on 2017-12-06)

Is there a way to modify how the html fields are outputted by Redactor? I'm creating an email template and I'm trying to add inline styles to Redactor's list items, links, etc.

**Tags:** templating, redactor, css, html-entities


---

## 2 answers

### Answer by username_1 on 2017-12-06. Score: 2 | Accepted answer

To add inline styles to HTML tags generated by Redactor such as , install the Retcon plugin and add the following to your template. For example:
{{ entry.body | retconAttr('li', { style: 'color: red;' }) }}

For more info, consult the retconAttr filter documentation.

> **Comments:**
> **username_0**: Does it matter where in the template I insert the code? I tried inserting it in multiple places and nothing changed. Do I need to add anything to the Redactor file or it should just work with the above code without adding anything else?  
> **username_1**: Put the code where you would normally put the `{{ entry.body }}` field without the `retconAttr` filter. You don't need any special Redactor configuration. When you inspect the source code in browser, you don't see something like `<li style="color: red;">My list item text.</li>`?  
> **username_0**: Never mind, I got it to work. I don't have an entry called body so I had to use the name of one of the blocks I created. How do I add inline styles to multiple tags? I tried doing the following but it didn't work:  `{{ block.ebParagraph | retconAttr(     'li', { style: 'color: #63666a;'},     'a', { style : 'color: red;' }     )}}`  
> **username_1**: Try:  ```{{ block.ebParagraph | retconAttr( 'li', { style: 'color: #63666a;'}) | retconAttr( 'a', { style: 'color: #red;' }) }}```  
> **username_0**: Got it. Thank you for all your help, Andrea!  

---

### Answer by username_2 on 2017-12-06. Score: 1

Craft uses the redactor js plugin. You can change it's settings, plugins and all formats like you want in the config `craft/config/redactor` or add custom presets. Here is the link how to configure the redactor <https://imperavi.com/redactor/docs/settings/formatting/>


---

