Styling link in Rich Text

Design help General
1

Hi,

Is it possible to have two links styled differently in Rich Text?

If so, can you provide an example and or a link to a tutorial specifically for this?

Thank you

Teresa

2

Hi @PixelPanda,

To style links and other items in the Rich text, yes you certainly can. But to style two different links to be styled differently, you will not be able to, unless with custom code.

You are not able to add combo classes to Rich Text nested fields.

This would certainly be a great option for our Wishlist

Please let me know if you have any other questions,

~ Happy Designing ~
Brandon

3

Thank you Brandon. That is what I thought, but I wanted to make sure.

Teresa

1 Like
4

Hi Brandon,

May I have an additional question here… It does not concern styling differently two elements within one rich text field, but styling differently the same element in two different rich text fields.

It is allowed to give a rich text element a combo class; and then, when styling elements within the rich text element with the respective class, the way it is displayed in the editor kind of SUGGESTS that one should be able to style an element individually.

In my case, as shown on the screenshots, I hoped to have “all H2 headings when nested inside of werkzeug-richtext” justified left, while “all H2 headings when nested inside of werkzeug-richtext + just-right” justified right. To me, this is what the selector panel says. However, any change to any of these two settings always applies to ALL instances of the ‘werkzeug-richtext’, with ‘just-right’ combo or without.

Am I doing something wrong, or is it the way it works?

Thank you,
Pataka

single-snap
single-snap1914×1051 271 KB

combo-snap
combo-snap1917×1051 278 KB

5

Hi Pataka,

You can have two different rich text fields that have different styling on regular pages. Just make sure each rich text field is named differently.

Here is an example:
https://test-site-1c1ad9.webflow.io/

And the read only link:
https://preview.webflow.com/preview/test-site-1c1ad9?utm_medium=preview_link&utm_source=dashboard&utm_content=test-site-1c1ad9&preview=34d18daf6955ac678d3bbd5581485277&mode=preview

Teresa :slight_smile:

6

Hi @PixelPanda Teresa :slight_smile:

Thanks for your reply. Yes, this is what I did in the end. I was just hoping to be able to share most of the styling by using the same name for both, and applying the different bits via the combo ‘extension’… Like ‘MyRichText’ and ‘MyRichText.slightlyAdjusted’…

But I couldn’t get that working.

Thanks again and cheers :slight_smile:
Pataka