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

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

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

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

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

Thanks Jan, I will definitely try this later today.

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

is working on a reply...