I'm trying to figure out if there is solution that allows me to style *some *bulleted lists with a different background colour. There are basically two styles of bulleted list, and I need to toggle between them. The

<ul />

needs a class to do that. Using an RTE stylesheet I don't appear to be able to achieve this. I might end up adding a block inside my RTE, which I don't love. I'm sure this used to be possible by setting the stylesheet selector as

ul.green

but this wraps an additional

<ul />

around my original one. Just

.green

puts ``s inside my ``s. TIA

Could you add a CustomClass field to your document type and work from there? div.green ul....?

I appreciate your input. You could do that. I had in mind a settings model on my RTE block with a

useAlternativeListStyle

property. However it's not intuitive and styles all lists in the block in the same way. I'd love to find a solution within the RTE UI but I don't know as one exists.

I used to do this kind of thing with the Tiny MCE templates plugin, here's a link with how to do it in v13: https://our.umbraco.com/forum/using-umbraco-and-getting-started/111198-showing-templates-in-tinymce#comment-349641

Hi @User , in 13 you could add ul.red like so: https://cdn.discordapp.com/attachments/1242820269517832203/1243183806484320356/image.png?ex=66508ca4&is=664f3b24&hm=4f3d96e86b5a72d533ef2a5d350dfa7c195b68f4ee51c0455feddf79578e59bc&

This would require users to know how to write html to make it a proper list with list items. At which point having it in a class dropdown is sort of pointless as it'd be less work for them to use the UI to build the list then just go into the markup and add the class themselves

Good point - I'll take another look

Hi @Dean Leigh . Thanks for going to the effort of capturing that journey. I think having

ul.red

as the selector is what should be the solution. However in your example it creates no

<li />

tags, and it you apply it to a list then it adds an extra

<ul />

wrapping the existing one. As @Lamont points out, this then requires some HTML coding. If they're doing that then they might as well add the class themselves. Adding the option to the list type would be 💪🏻, but I don't see an option in the Advanced List plugin to allow that. I think we're probably stuck with workarounds, but it was worth posting in case someone had a solution.

I think trying to add to their list would be complex as they have the nice drop down UI but making a new button possibly less so. I'm investigating

Did you try this @David Peck (Peck Tech) ?

I did take a look at this @Jason and it seems to be for adding chunks of HTML.

Yep, but as pointed out, both the ul and li are what's needed, hence the HTML template suggestion. IIRC it's pretty straightforward to add a custom button to just drop a bit of HTML straight in, but I've not done that for a while and don't have an example.

@Jason - yes I've just got this working. I think this is probably the approach I'll use. It's isn't ideal because you can't convert a list to my styled type (and back again) but unless someone else comes up with a better solution this is probably the most pragmatic. https://cdn.discordapp.com/attachments/1242820269517832203/1243230781032366181/image.png?ex=6650b864&is=664f66e4&hm=efbec93966269b1a8a064401c32f66ce3503a71954e5fad847bb47d5fdef1aff& https://cdn.discordapp.com/attachments/1242820269517832203/1243230781204336820/image.png?ex=6650b864&is=664f66e4&hm=427731a4303f316a651a094ff159e58a04833de2905d82983045bd5b957acefc& https://cdn.discordapp.com/attachments/1242820269517832203/1243230781438951426/image.png?ex=6650b864&is=664f66e4&hm=5f2046f402c9ce48fef26770edaee6d23a5c70c5ad3a5e8bf6cd031e03ac7381& https://cdn.discordapp.com/attachments/1242820269517832203/1243230781669900309/image.png?ex=6650b864&is=664f66e4&hm=e8e61b9ea5b87a936ee0bfb6d6ac160eaf2ccd3aafc618f38648f5f3d5d389b5&

@David Peck (Peck Tech) Would this do what you need?

"RichTextEditor": {
    "CustomConfig": {
        "style_formats": "[{\"title\":\"Lists\",\"items\":[{\"title\":\"Alternative List\",\"selector\":\"ul\",\"classes\":\"alternative\"}]}]"
    }
}

I tend to group my formatting styles into 'Headings', 'Paragraphs', 'Images' etc, as it just makes for a clearer editing experience, like this:

"RichTextEditor": {
    "CustomConfig": {
        "style_formats": "[{\"title\":\"Headers\",\"items\":[{\"title\":\"Heading 2\",\"block\":\"h2\"},{\"title\":\"Heading 3\",\"block\":\"h3\"},{\"title\":\"Heading 4\",\"block\":\"h4\"},{\"title\":\"Heading 5\",\"block\":\"h5\"}]},{\"title\":\"Paragraphs\",\"items\":[{\"title\":\"Intro\",\"block\":\"p\",\"classes\":\"intro\"}]},{\"title\":\"Lists\",\"items\":[{\"title\":\"Alternative List\",\"selector\":\"ul\",\"classes\":\"alternative\"}]}]"
    }
}

The key with ol/ul elements is to use

selector: ul

in the config, rather than

block: ul

(which, similar to Dean's suggestion above prevents

li

elements from being added as children). It does mean that the block you're wanting to style needs to be a

ul

before you can select the style (i.e. the content editor needs to make it a list using the list button first) which might be a showstopper for you, but it's the only way I can think of doing it without something custom or a little hacky, and it seems reasonable to me. 🙂

That's where I was heading… for example I wrap sentences, words, characters in a 'span' to add lang=en.

That's a nice solution!

@Dan !!!! Whose the man? (it's you!) That worked great. @Dean Leigh - thanks for all your efforts @Jason - I'm using templates for something else in my project You all the bomb. I really appreciate your efforts.

Aghh the whole time I was missing a comma! https://cdn.discordapp.com/attachments/1242820269517832203/1243244624026407014/image.png?ex=6650c548&is=664f73c8&hm=dd3a7c5fc07bea00fb60d88cd7fbc884b919b725665265dd776413fa159e650e&

That this works suggests to me that there is something up with Umbraco's implementation.

If anyone needs a nicer way of creating the TinyMCE config for the formatting dropdown I was inspired to build a little helper tool: https://iomi.net/tinymce-umbraco/

It would be great if it also could deserialize from an existing configuration, modify it and get updated escaped json.

Not battle tested but I've updated to allow 2-way editing of the config. Ping me a message here if it breaks for you 🙂

Something worked yes 🤗 If it also worked with

formats

and

templates

properties under

CustomConfig

it would be even cooler 😎 https://cdn.discordapp.com/attachments/1242820269517832203/1252260990058496111/image.png?ex=6671926d&is=667040ed&hm=5bcb50058ca5141756764c486c9ce26c67ac6558acee93bdcbb8c1bab9110fdd&

There's quite a bit more stuff that this could generate tbh, even things like custom attributes or style attributes for each item, but I'm not sure I'm going to extend it much more tbh as the UI could start to get a bit unwieldy, but if you have an example config that demonstrates the kind of thing you're after I can at least have a think about it when I get a moment? I've not used

formats

but saw that documented (https://www.tiny.cloud/docs/tinymce/latest/user-formatting-options/#interactive-examples) — I hadn't actually tried out whether that works in Umbraco but good to know it does. Not sure what you mean by templates though?

Currently we have this configuration in a project:

"RichTextEditor": {
   "CustomConfig": {
     "formats": "{\"cite\":{\"block\":\"cite\"}},\"checklist\":{\"block\":\"ul\",\"classes\":\"check-list\"},\"arrowlist\":{\"block\":\"ul\",\"classes\":\"arrow-list\"},\"numberlist\":{\"block\":\"ol\",\"classes\":\"number-list\"}",
     "style_formats": "[{\"title\":\"Paragraph\",\"format\":\"p\"},{\"title\":\"Blockquote\",\"format\":\"blockquote\"},{\"title\":\"Cite\",\"format\":\"cite\"},{\"title\":\"Code\",\"format\":\"code\"},{\"title\":\"Headers\",\"items\":[{\"title\":\"Heading h1\",\"block\":\"h1\"},{\"title\":\"Heading h2\",\"block\":\"h2\"},{\"title\":\"Heading h3\",\"block\":\"h3\"},{\"title\":\"Heading h4\",\"block\":\"h4\"},{\"title\":\"Heading h5\",\"block\":\"h5\"},{\"title\":\"Heading h6\",\"block\":\"h6\"}]},{\"title\":\"Checkmark list ✓\",\"format\":\"checklist\"},{\"title\":\"Arrow list →\",\"format\":\"arrowlist\"},{\"title\":\"Number list ➀\",\"format\":\"numberlist\"}]",
     "templates": "[{\"title\":\"Checkmark list\",\"description\":\"Unordnered list with checkmark bullets\",\"url\":\"/App_Plugins/MCB.Umbraco.RTE/Templates/unordered-list-checkmark.html\"},{\"title\":\"Arrow list\",\"description\":\"Unordnered list with arrow bullets\",\"url\":\"/App_Plugins/MCB.Umbraco.RTE/Templates/unordered-list-arrow.html\"},{\"title\":\"Number list\",\"description\":\"Ordnered list with numbers\",\"url\":\"/App_Plugins/MCB.Umbraco.RTE/Templates/ordered-list-number.html\"}]"
   },
   "Commands": [
     {
       "Alias": "blockquote",
       "Name": "Blockquote",
       "Mode": "Selection"
     },
     {
       "Alias": "template",
       "Name": "Template",
       "Mode": "All"
     }
   ],
   "Plugins": [
     "template"
   ]
 }