Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at

  • Walter 8 posts 79 karma points
    May 16, 2017 @ 13:59

    Is there a way to add a class to an element using the RTE without adding a span tag. (or editing code)

    Hi Guys,

    I've seen posts about this issue from as far back as 2010 but I've not found a solution. Plenty of work arounds for those particular issues (some good, some not so good) but hardly a solution despite many of these posts being marked as resolved.

    Trying to add a class to an element via the Ricth Text Editor always (in my experience) wraps the particular element in a span tag and adds the class to the span tag rather than adding the class to the element in question.

    e.g., If I click an image and select a class from the formats dropdown in RTE, rather than add the class to the image tag it will wrap the whole thing with a span tag and add the class to the span.

    If I select a UL it will wrap each of the LI with a span and add the class to each of those span tags or wrap the complete UL in a span and add to it. I guess it depends on how the element is selected in the RTE prior to selecting the class from the formats dropdown.

    Is this still an issue with Umbraco after all this time? I can't expect the end user to edit code to add a class, and the results of wrapping an element with a span and adding the class that way doesn't always provide the desired results.

    Is this a known issue or part of the design? If part of the design is there a certain way I should be putting the CSS together to make the wrapped span work?

  • Walter 8 posts 79 karma points
    May 19, 2017 @ 14:24


  • Walter 8 posts 79 karma points
    Jun 05, 2017 @ 20:12

    I'm assuming, by the lack of people answering, that this is not possible.

  • Aparna 11 posts 92 karma points
    Jun 06, 2017 @ 07:04

    You can have a look on the below link : It is not umbraco specific though...

  • Andreas Emtinger 18 posts 160 karma points
    Jun 02, 2018 @ 12:45
    Andreas Emtinger

    My solution:

    /**umb_name:Image Left*/p.imageLeft{}
    p.imageLeft img {
        float: left;
    /**umb_name:Image Right*/
    p.imageRight img {
        float: right;
    p.imageRight + p.imageRight,
    p.imageRight + p.imageLeft,
    p.imageLeft + p.imageRight,
    p.imageLeft + p.imageLeft {
    /**umb_name:Image Fullsize*/
    p.imageFullsize img {
        width: 100%;
    /**umb_name:Image Round*/
    p.imageRound {}
    p.imageRound img {
        max-width: 100px;
        max-height: 100px;
        border-radius: 50%;
  • Nathan Woulfe 408 posts 1521 karma points MVP 3x c-trib
    Jun 03, 2018 @ 01:44
    Nathan Woulfe
    3 is everything you need.

    Short story - updating the tinymce.config file lets you do all sorts of magical things, and results in clean, cruft-free HTML.

  • Daniel Jensen 28 posts 159 karma points
    Oct 01, 2019 @ 13:01
    Daniel Jensen

    I was trying to do something as simple as change a background color to a h1 tag added through the RTE. If the h1 was multiline, the nested span with background color looked different, than if it was on the h1 tag itself.

    I tried a few things, and what turned out to work was quite simple. If its something new, added (to Umbraco/TinyMCE since the OP posted the question I don't know. But for anyone having the same problem:

    Try adding the to the css for the rte with "tag.className"-notation.

    /**umb_name:Kampagne titel*/ h1.campaignHeader { color: #F00; background-color: #0F0; }

    When having text selected in the RTE, this turned out to both add the tag and the css class to that tag. Exactly what I wanted. Not adding that redundant/bloating span.

Please Sign in or register to post replies

Write your reply to: