Sign in Register
Copied to clipboard

Flag this post as spam?

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


  • Sebastiaan Janssen 5053 posts 15507 karma points MVP admin hq
    Dec 22, 2010 @ 15:32
    Sebastiaan Janssen
    0

    Custom styles in the RTE don't overwrite each other

    Templates and document types

    I have three custom styles in the styles dropdown to position images in the Rich Text Editor:
    Name: Image Left
    Alias: .imgLeft
    Styles: float: left; margin-right: 10px;

    Name: Image Right
    Alias: .imgRight
    Styles: float: right; margin-left: 10px;

    Name: Image Centered
    Alias: .imgCentered
    Styles: display: block; margin-left: auto; margin-right: auto;

    Now, when I set imgRight on a image, that works fine. However, if I then decide I want it to be imgLeft, it doesn't float left, instead it tacks on an extra class. So the class on my image is now: imgRight imgLeft.

    How can I make the styles dropdown overwrite whatever style is on the selected element?

    This used to work fine in Umbraco 4.0.x, what has changed in 4.5 (and WHY?).

    Copy Link
  • Rich Green 2246 posts 4008 karma points
    Dec 22, 2010 @ 16:03
    Rich Green
    0

    Hey Sebastiaan,

    Sorry I don't know the answer, however I have a similar problem using imageLeft and imageRight under 4.5.2

    My classes are set up pretty much the same as yours, when I click an image and select either imageLeft or imageRight from the drop down I get this code:

    <p><img src="someImage.jpg" class="imageLeft"/><span class="imageLeft">Some text</span></p>

    Basically an extra span gets wrapped around the remaining text.

    I have exactly the same set up in Umbraco 4.0.x and it works fine.

    I used Chrome on both sites.

    Rich

    Copy Link
  • Sebastiaan Janssen 5053 posts 15507 karma points MVP admin hq
    Dec 22, 2010 @ 16:05
    Sebastiaan Janssen
    0

    Thanks Rich, yes, I also get an extra span, also with the two classes.. :-(

    Copy Link
  • Chriztian Steinmeier 2798 posts 8788 karma points MVP 8x admin c-trib
    Dec 24, 2010 @ 00:17
    Chriztian Steinmeier
    0

    Any progress on this, Sebastiaan?

    I'm having trouble with this too... effectively doesn't work for me.

    /Chriztian

    Copy Link
  • Chriztian Steinmeier 2798 posts 8788 karma points MVP 8x admin c-trib
    Dec 24, 2010 @ 00:57
    Chriztian Steinmeier
    0

    OK - this works for me:

    Creating a wysiwyg.css stylesheet for the RTE, with these rules in the top editable section:

    p.left, p.right {
  margin: 0 !important;
}

p.left img {
  float: left;
  margin: 0 1em 1em 0 !important;
}

p.right img {
  float: right;
  margin: 0 0 1em 1em !important;
}

     

    Then I create the following rules (using right-click > Create...):

    Name: Left-aligned image
Alias: .left
Styles: (empty)

Name: Right-aligned image
Alias: .right
Styles: (empty)
    (I don't get the <span> elements, but I get <p class="left"><img ... /></p>)

    /Chriztian

    Copy Link
  • Chriztian Steinmeier 2798 posts 8788 karma points MVP 8x admin c-trib
    Dec 24, 2010 @ 00:59
    Chriztian Steinmeier
    0

    Oh, and it's a real PITA to get the TinyMCE iframe to load the updated CSS file! Man I wasted long time before I realized what was going on...

    /Chriztian 

    Copy Link
  • Rich Green 2246 posts 4008 karma points
    Jan 11, 2012 @ 15:53
    Rich Green
    0

    Is this still broke, or is it just me?

    If I change the class from right to left for example I get <img class="imageright imageleft"/>

    Also I'm sure when you used to highlight an image the options in the drop were only styles suitable for an image (ie H2, H3 wouldn't show).

    Not loving the RTE today!

    Rich 

    Copy Link
  • forever_jxl 3 posts 22 karma points
    Nov 01, 2012 @ 07:27
    forever_jxl
    0

    I also have this problem. .

    Copy Link
Please Sign in or register to post replies

Write your reply to:

Draft