cutsom css on a tags - Using Umbraco and getting started

Go to solution

Press Ctrl / CMD + C to copy this to your clipboard.

Copied to clipboard

Flag this post as spam?

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

j0w 31 posts 202 karma points

Aug 01, 2019 @ 19:43
0

cutsom CSS on <a> tags
Hello there !

It'sdriving me crazy so i'm asking for help here !

I'm trying to add custom CSS on tags in RTE. I have a CSS class called "button" wich applies a classic "btn btn-primary". But all I manage to have is something like this :
```
<a rel="noopener" data-udi="umb://document/da74793d75a64f1ab8db309015b7af93" href="" target="_blank" title="Click me">bouton</a>
```
the  thing is really anoying so, is there any way to apply the class directly in the <a> tag like good old <`a href="" class="btn btn-primary">?

Thanks a lot ! Jo
Copy Link
Nik 1617 posts 7263 karma points MVP 7x c-trib

Aug 01, 2019 @ 20:16

101

Hi Fant0hm

There is a way to do this, however it will make the style available to all of your rich text boxes that have the formats drop down enabled.

This guide here should help you set up the style. It was written for Umbraco 7, but I think it still works with Umbraco 8 but I've not tested it.

https://www.justnik.me/blog/umbraco-rte-styles-another-way

Thanks

Nik

Copy Link
j0w 31 posts 202 karma points

Aug 01, 2019 @ 20:59
0
Hi Nik, thanks for the link. Just tried the basic code it gives us, but nothing happens.
```
<config key="style_formats">
 [{"title": "Button", "selector":"a", "classes":"btn btn-primary"}]
 </config>
```
If I go to any RTE in my website then add a link, it does nothing
```
<a rel="noopener" data-udi="umb://document/0e358ac98eb646e29bf1c177897327b6" href="/{localLink:umb://document/0e358ac98eb646e29bf1c177897327b6}" target="_blank" title="Accueil">button</a>
```
Didi you manage to make it work once on your own? Do I have to use a new RTE to have the changes applied or something?
Copy Link
Nik 1617 posts 7263 karma points MVP 7x c-trib

Aug 01, 2019 @ 21:04

0

Hey Fant0hm,

Yeah I got this working on my own sites. It doesn't automatically add the class but it puts an entry in the formats drop down. Once you've put the link in you'll need to select the link and the you should be able select that option in the format drop down.

Nik

Copy Link
j0w 31 posts 202 karma points

Aug 02, 2019 @ 13:08

0

Hey Nik, sorry for the delay.

Thanks for the tip ! I did not noticed that it added a new style in the format dropdown ! Ahah

It's all good, everything working fine!

Thanks a lot for your help!

Fant0hm

Copy Link
is working on a reply...

Please Sign in or register to post replies

Flag this post as spam?

cutsom CSS on <a> tags