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 78 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 78 karma points
    May 19, 2017 @ 14:24


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

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

  • Krishna 8 posts 89 karma points
    Jun 06, 2017 @ 07:04

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

  • Andreas Emtinger 12 posts 153 karma points
    22 days ago
    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 279 posts 945 karma points MVP
    22 days ago
    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.

Please Sign in or register to post replies

Write your reply to: