Copied to clipboard

Flag this post as spam?

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


  • Martin 114 posts 313 karma points
    Nov 23, 2014 @ 12:37
    Martin
    0

    Can't get Anchor styling in RTE to work

    Hi,

    When setting up styles to be used in the RTE (under Format tab), it seems that anchor behaviour is not possible to apply. For example, if I want to use the following anchor style (to be applied by choosing a format style in RTE)

    a:hover, a:active {
        background-color: #7A991A;
    }

    , how could this be achived?

    Regards,

    Martin

  • Jan Skovgaard 11264 posts 23592 karma points MVP 8x admin c-trib
    Nov 23, 2014 @ 20:40
    Jan Skovgaard
    0

    Hi Martin

    Do you want to add Anchor styling to the RTE content so it's being displayed in the Umbraco backoffice or is it in the frontend rendering of the content on the website?

    Just want to be certain that I understand your issue correctly.

    /Jan

  • Martin 114 posts 313 karma points
    Nov 23, 2014 @ 22:09
    Martin
    0

    Hi Jan,

    It is the frontend rendering I'm concerned about. When adding styles to be used in the RTE, it seems that the Style text box does not allow for the use of syntax in the form of, for example, a:hover { };

    I could manually add a predefined class (that handles the anchor styling) by switching to code view in the RTE, but I would hope that there is a more user friendly way of doing it.

    //Martin

  • Jan Skovgaard 11264 posts 23592 karma points MVP 8x admin c-trib
    Nov 25, 2014 @ 08:16
    Jan Skovgaard
    0

    Hi Martin

    You don't need to add specific RTE styles in a umbraco RTE stylesheet.

    You can just add it in your sites stylesheet - If you wrap your RTE content in a div with a ".rte-content" class for instance than you can target those links specifically from anywhere in your stylesheet.

    Sounds like you're trying to control something from inside Umbraco.

    If the styles are not applied your selector is not being specific enough for some reason.

    /Jan

  • Martin 114 posts 313 karma points
    Nov 25, 2014 @ 09:43
    Martin
    0

    Hi Jan,

    What I want to achieve, is to make it easy for the content editor to add a link and quickly style the anchor properties by choosing a format style from the format tab. For example, have a predefined style for a "Go To Shop" or "Go To Contact".  I don't want the Content editor to have access to the stylesheets. And I guess that your suggestion would allow for only one anchor style for a specific RTE box. Or I'm I wrong?

    Regards, Martin

  • Jan Skovgaard 11264 posts 23592 karma points MVP 8x admin c-trib
    Nov 25, 2014 @ 09:52
    Jan Skovgaard
    0

    Hi Martin

    Aaaah, now it makes sense to me :)

    Well, it's always tricky to allow the editors to add styling because it's not that easy in the tinymce RTE I think.

    But the steps for being able to add classes to the RTE markup are:

    1: GO to the "Settings" section and right click on the "Stylesheets" folder and create a stylesheet called "rte" for instance 2: Right click on the "rte" stylesheet and add a property where you give the style a name like "Link style" and in the alias you add the classname like ".linkstyle" without the signs around it - That goes for name as well. 3: Go to the "Developer" section and expand the "Datatypes" folder and find the rich text editor datatype. Check the "rte" in the stylesheet option. 4: Go to the content section and browse to a page where there is a RTE and see if the "Link style" appears if you click on the "Styles" dropdown - If so you should now be ready to add the class to a link 5: Make sure to style your ".linkstyle" class in your external stylesheet. It does not need to be in the "rte" stylesheet that you created in the steps above.

    You can add as many styles as you would like - But be aware that sometimes a element can for some reason be injected around you link - Sometimes it does not. So the output can either be

    1: <a href="#" class="linkstyle">link</a> or
    2: <span class="linkstyle"><a href="#">link</a></span>
    

    So in your stylesheet you need to make sure the correct styling is applied either way like

    .linkstyle, .linkstyle a{ //Yourstyles }

    I hope this helps! :)

    /Jan

  • Martin 114 posts 313 karma points
    Nov 25, 2014 @ 09:58
    Martin
    0

    Thanks Jan, I will definitely try this later today.

  • Asif Malik 203 posts 339 karma points
    Jun 11, 2015 @ 17:42
    Asif Malik
    0

    Hi Jan, sorry to add to an old thread, but is there logic around when it will add to the element itself, or when it will wrap it in a span?

    I have specifically gone and added the status bar to TinyMCE so the content editor can select the correct html tag to apply the style to, however it is still wrapping it in a span actually it is putting the wrapper inside the 'a' tag (but surrounding the text)

    Have also tried setting up a style whose alias is a.generic-link ... that seems to try to add an additional 'a' tag, which disappears on save

  • Asif Malik 203 posts 339 karma points
    Jun 11, 2015 @ 17:55
    Asif Malik
    0

    Funnily enough using the a.generic-link alias, if i go in and just apply the style to plain text it correctly wraps the text in an 'a' tag, which i can then go and link to a page. but this isnt normal user behavior and would ideally like to be able to link the text first and then style it

Please Sign in or register to post replies

Write your reply to:

Draft