Hi Matt

What exact version of Umbraco are you trying to achieve this on? The custom classses and li elements can be really hard sometimes if not impossible.

So I'm wondering if it could somehow be achieved in another way? Is the list something that should be rendered from a rich text editor? Or could it be generated in another way?

/Jan

Hi Jan,

I'm using version 7.1.9. We're planning on migrating the project to latest (7.2.+) within the next few months if that helps at all.

Agreed in your thought process. However they really are just simple bullet pointed lists of text which should be in a RTE. What other ways did you have in mind out of interest?

Is there really such an issue in doing this through TinyMCE styles? I've had issues with adding styles to tables as well here, although I've had to abandon that for now due to a number of forum posts I've read... I had hoped it would be a simple process!

Thanks

Hi Matt

Yeah if it's rich text content then they of course belong there as rich text - I was just wondering if the content was perhaps more like elements, which should be created as their own content types - Sometimes people try to force stuff in the RTE that clearly does not belong there - So just checking the scenario :)

If don't know if using a workaround with some JavaScript to target the lists if certain conditions have been fulfilled?

I'm afraid it's not simple unfortunately.

/Jan

I'm using Umbraco 7.2.3 and am also unable to add formats to a ul element. Here's what I noticed:

• Using the stylesheet property ul.link-list
  • Adding this format to a list will wrap the list inside a second ul element. Not good.
• Using the stylesheet property .link-list
  • This will add the .link-list class to a span within the individual li elements, rather than just the ul. This is slightly better than the first method.

Currently there doesn't seem to be any way of formatting a ul element properly. This should be a basic feature of a rich text editor. We shouldn't expect content creators to have to use another data type just to make a pre-formatted list.

You can do this several way. Best is probably to create a custom button With the tinyMceConfig.config or you could enable the insert template plugin.

The Umbraco.controller.js file has some issues though that means when you specify custom style formats it overrides the Umbraco css generated styles. This has been addressed and the latest file on GitHub has a fix so style formats are combined but you may still want to tweak how it merges them and I am not sure the updates will work with a nested function in the json I can't remember off top of my head but it's simple to fix if it doesn't.

Edit: oh your original class will work also I think you just have to add "inline" or "block" to it I think.

Hi Mike,

Thanks for the reply - could you provide any additional information on how to achieve what you are suggesting?

I was under the impression the template plugin was broken for Umbraco 7+ or at least required some changes to the core Umbraco js to function? I admit I am not keen on changing the core of Umbraco. Alternatively, I have never amended the TinyMCE plugin before, could you provide any guidance on adding a custom button to achieve what I'm after?

Hi Matt,

Is this what your after?

http://umbraco.tv/videos/umbraco-v7/implementor/fundamentals/stylesheets-and-javascript/setting-up-rte-styles/documentation

Paste your exact css rule and I'll do the code

Hi there,

I'm facing exactly the same problem. In Umbraco v4.7.1.1 I could create a list in RTE. Then I could mark one of the list elements in RTE and select a class from the styles-dropdown-list, which modified the HTML as follows:

<ul>
  <li class="arrow">Element1</li>
  <li>Element2</li>
</ul>

This allowed us to change the default list-style-image of the list elements.

Now, after migrating to Umbraco v7.2.4, the RTE generates the following HTML, when adding the class to the list element:

<ul>
  <li><span class="arrow">Element1</span></li>
  <li>Element2</li>
</ul>

But we need the class directly on the ul or li element. I tried to create the RTE-Format-style as Matthew did:

.arrow This creates the additional span-element

li.arrow This simply does nothing.

ul.arrow This creates a second ul-element around the existing one.

Is a fix for this behavior planned or any workaround?

Thanks for any information, Ben

That's really weird... I just gave it another try and found a workaround, that might work for some of you, too:

I defined my RTE-style as div.myListElementStyle. Then I wrote some text in RTE (in a standard p-tag, not in an ul-tag!), marked it and selected the list-button. After that the HTML looked like that:

<ul>
  <li class="myListElementStyle"></li>
</ul>

It's not the best to tell our customer, but better than saying: "Please edit the HTML and add the class xyz to the li-element.".

But I am still interested in a real fix of the RTE! ;)

Best regards, Ben

That's a nice find, @bengan; I'll try it later.

We still don't have a great solution for styling the entire list element directly. This is even more vital than styling individual list items.

I'm facing the same challenge, currently in Umbraco 7.2.5. And I agreee that we really should have a way to style ul elements within the RTE (tinyMCE). Mike suggests creating a custom button in the tinyMceConfig.config, have anyone tried this?

This still seems to be an issue!

is working on a reply...