<p>The unfortunate answer here is you can't add classes to ul or ol elements using formattingAdd, at least that's the way I interpret the documentation. See: <a href="https://imperavi.com/redactor/docs/settings/formatting/#s-formattingadd" rel="nofollow noreferrer">https://imperavi.com/redactor/docs/settings/formatting/#s-formattingadd</a></p>
<p>It states:</p>
<blockquote>
<p>formattingAdd can only be applied to block tags (p, pre, blockquote, div, heading, etc).</p>
</blockquote>
<p>I suspect the etc there also encompasses ul and ol elements, even though they are block elements.</p>
<p>The best workaround I can come up with for this is to have a wrapper around the list and apply the class to that wrapper. As this would be fiddly in Redactor alone, I use a matrix field type to add blocks of content, with the option to add a class to the wrapper for that particular block.</p>
<p>This page describes this method of building out content <a href="https://nystudio107.com/blog/creating-a-content-builder-in-craft-cms" rel="nofollow noreferrer">https://nystudio107.com/blog/creating-a-content-builder-in-craft-cms</a></p>

CC BY-SA 4.0
2020-08-18T09:42:34.770Z
2020-08-18T09:42:34.770Z
neekster
<p>I try to add a class to tag ul by field Redactor. I have prepered special config file for Redactor. For example in Redactor field a have a created simple list so i select this list and next from formatting option i choose my new created option which should add a class to that ul tag and 
unfortunately it not works.</p>

<p>However if i use this option on standard paragraph class is added. So i have not idea what i do wrong. </p>

<p>Below content my config file:</p>

<pre><code>{
  "buttons": ["formatting", "bold", "italic", "unorderedlist", "orderedlist", "link", "html", "fontcolor", "image"],
  "plugins": ["fullscreen", "fontcolor", "alignment"],
  "linkNewTab": true,
  "toolbarFixed": true,
  "formattingAdd": {

    "list-columns-3-each-under": {
      "title": "list-columns-3-each-under",
      "api": "module.block.format",
      "args": {

        "type": "add",

        "class": "my-class-for-list"
      }
    }

  }

}

</code></pre>

<craft3><redactor>
How to add class to ul ol tag in redactor by using formattingAdd
# How to add class to ul ol tag in redactor by using formattingAdd

(Asked by: username_0 on 2020-04-22)

I try to add a class to tag ul by field Redactor. I have prepered special config file for Redactor. For example in Redactor field a have a created simple list so i select this list and next from formatting option i choose my new created option which should add a class to that ul tag and 
unfortunately it not works.
However if i use this option on standard paragraph class is added. So i have not idea what i do wrong. 
Below content my config file:
{
  "buttons": ["formatting", "bold", "italic", "unorderedlist", "orderedlist", "link", "html", "fontcolor", "image"],
  "plugins": ["fullscreen", "fontcolor", "alignment"],
  "linkNewTab": true,
  "toolbarFixed": true,
  "formattingAdd": {

    "list-columns-3-each-under": {
      "title": "list-columns-3-each-under",
      "api": "module.block.format",
      "args": {

        "type": "add",

        "class": "my-class-for-list"
      }
    }

  }

}

**Tags:** craft3, redactor


---

## 1 answers

### Answer by username_1 on 2020-08-18. Score: 1

The unfortunate answer here is you can't add classes to ul or ol elements using formattingAdd, at least that's the way I interpret the documentation. See: <https://imperavi.com/redactor/docs/settings/formatting/#s-formattingadd>

It states:

> formattingAdd can only be applied to block tags (p, pre, blockquote, div, heading, etc).

I suspect the etc there also encompasses ul and ol elements, even though they are block elements.

The best workaround I can come up with for this is to have a wrapper around the list and apply the class to that wrapper. As this would be fiddly in Redactor alone, I use a matrix field type to add blocks of content, with the option to add a class to the wrapper for that particular block.

This page describes this method of building out content <https://nystudio107.com/blog/creating-a-content-builder-in-craft-cms>


---

