Styling text links in rich text block for CMS

Hi @Holly thank you so much for clarifying that point, my apologies for missing that earlier!

You will need to add a link to your Rich Text Element and set it to actually link somewhere so that it is recognized as a link. Then you can select that link element and apply nested styles to it for all links within the Rich Text Element parent: Screen Recording 2017-07-26...

We also have this guide on styling Rich Text Elements: Rich text element overview | Webflow University

I hope that this is helpful, please let me know if you have any additional questions :bowing_man:

@Waldo Thanks for pointing out that I have to actually add a link to set the text link styling! It seems I’ve been able to set text link styling where I am making those edits in my static page. I’ve saved that page and published it. But when I look at a post in preview some of the text links don’t behave as styled. For example on this page:
http://blog-exploration-project-km.webflow.io/post/5-locations-for-stunning-denver-engagement-photos

In the body copy the first link becomes underlined on hover. That’s how I’d like all text links to behave. But the second link, down in the 4th paragraph, “local wedding photographers” does not become underline when overing over it. And this occurs on other links on this and other pages. Any ideas why that might be?

@Waldo I’m having another small, but tedious issues I can’t figure out how to solve. It concerns the spacing that is created when using the “Enter/Return” command.

Is there a way to format this space that is generated with?

As I’m editing and adding content to the Post Body field (a rich text block) in the CMS, I need to be able to add header settings to text. Using the Shift+Enter command to create a line-break and then trying to format the next line of text causes the whole text to take the same formatting.

Check the margins (margin-bottom) of each element…

Hi @Waldo,

I’m experiencing the same issue with my text links becoming a new column in the body paragraphs of my rich text links. In my rich text element that I’ve used for formatting, it doesn’t seem that the link itself has column settings. So, I’m not sure why this is occurring.

Here’s a screen shot of the rich text element where I’ve set my formatting.

And here is a screen shot of what’s happening on a page that is pulling that paragraph with text link styling, but creating a second column when text is given a link (Savannah Custom Weddings & Elopements).

Here is my public share link: https://preview.webflow.com/preview/blog-exploration-project-km?preview=0a4a5645276234a37b5a6a33fd17e9af

I’m setting formatting on the page “Rich text formatting”. Any help is greatly appreciated!

Thanks!

@Holly your “all paragraphs” style is set to display:flex. If you remove that, it’ll fix the problem.

1 Like

Thanks so much, @jmw!

1 Like

Happy to help, @Holly :slight_smile:

@jmw just one more question. Bulleted Lists formatting. I’d like the bullet points to appear and be able to set their distance from the text/copy. I have them set to appear on the List Items, but they aren’t showing up. What am I missing here?

Thanks, again, for any help!

Hi @jmw just reaching out again to ask about why I’m not seeing the set “disc” bullets I’ve set on my bulleted lists in a rich text field. Please see above comment.

Thanks!

Hey @Holly, sorry for the delay getting back to you. I’ve played around in your preview a bit, and I hate to say it, but I’m a little flummoxed.

I haven’t found a solution yet, but I think the core problem may stem from all the positioning styles placed on your rich text elements. Typically, you want to put your layout/positioning styles on your sections, containers, and div blocks, rather than on your content containers. That way, the container tells the content where to display, and you don’t have to add margins and padding on every textual element (p, H, etc.).

In any case, sorry I haven’t found a solution yet. I’ll poke around as time allows, and hopefully someone else can spot the problem in the meantime!

Hi @jmw! Thanks for getting back to me. I’m also a little flummoxed:slight_smile:
Just to make sure I’m understanding you, are you saying that the best practice for setting styles of elements inside of a rich text element is to set them individually and outside a rich text element?

@jmw, Sorry to keep bothering you or anyone else on the Webflow team, but I’m having a reoccurring issue with text links sometimes breaking into a another column from the surrounding text and sometimes behaving as I’d like them to. This article page is a good example of that. The headers have text links in them and as you can see most of them break up in to various columns, except for one.

Here’s a link to this specific page: https://blog.borrowedandblue.com/post/airbrush-vs-traditional-bridal-makeup-napas-experts-weigh-in

Hey, Holly. Looks like you’re having the same issue with these headings that I pointed out above: Styling text links in rich text block for CMS - #10 by jmw — your headings are set to display: flex. Switching those to block should work well.

@jmw Oh, gah, duh. Thank you so much for patiently pointing this out.

And just to make sure I’m following you on your comment on the bulleted list issue: is it considered the best practice to set styles of elements inside of a rich text element individually and NOT in a rich text element?

Thanks, again for your help on these issues!

1 Like

Oh, gah, duh. Thank you so much for patiently pointing this out.

No problem :slight_smile:

To loop back to my previous comment, what I mean is, rather than using margin and padding on a rich text element to control its location on the page, you want to nest the rich text element within a structural element (like a div, section, or container), and control the rich text element’s placement indirectly through the div block. The rich text block should (largely) only have typographic styles placed on it.

To ground that a little, I noticed that your list item has margin auto on the left and right, and then something like 300 pixels of padding on the left and right. Instead of placing those margin and padding values on the text element, it’d be better to place the rich text element within a section (or container) that has those padding/margin values. That lets you use a rich text element wherever you’d like, without having to fight with those 300px of padding every time you place one on a page.

Hopefully that’s a little clearer, but I get that it’s abstract without visuals.

In general, rule of thumb is:

  • use styles on containers, divs, and sections to control placement (layout)
  • use styles on content elements (rich text, paragraphs, images, etc.) to control appearance

The distinction can get fuzzy, but I’ve found it helpful in learning my way around Webflow.

1 Like

You have set display block on all list items, same as the flex issue mentioned above.

temp

Thank you, @samliew!!!

@jmw, thank you so much for explaining this further. It’s starting to make sense to me. Woohoo!

I do have one more question. In the blog project I’m working on, because of time constraints for the time being, all blog posts (which are dynamically generated) take their formatting from one template and the majority of their content from a rich text element in the collection page, Articles Template. I can set that rich text element inside a container, div or section and set it’s margins & padding to match the layout I’d like, as you suggest is best practice. However, for specific elements that are periodically part of blog post content, such as block quotes and bulleted lists, whose padding/margin I’d like to be greater than the rest of the body content, my thinking is that setting a separate container for these doesn’t make sense as these elements will need to be in the body of the blog post and vary in location within each post.

My question: As I can’t add containers, divs or sections to a rich text element, is the workaround to just set the margin/padding on block quotes and bulleted lists within the RTE? Or is there a better way?

Thanks, again for your help here! Greatly appreciated.

No problem, @Holly! Glad it’s starting to make sense now.

And yes, you’re absolutely right that certain typographic elements (esp block quotes and lists) require their own margin and padding settings within the rich text block. Layout elements should be used for the larger overall page structure.

So, to style your lists and block quotes, what you’ll want to do is:

  1. Make sure the rich text block that’s connected to your Collection has a class name
  2. Drop a second rich text block onto your page, give it the same class name as the connected block*
  3. Format one bit of the rich text as a block quote, another as a list
  4. Style those bits as you need them to be in the connected block, and click the “when inside of” text below the Selector field to nest these styles within the class that governs your rich text block

This is explained in this University article: Rich text element overview | Webflow University

*Alternatively, you can just drop a block quote and a list on the page and when you go to style them, make sure you’re styling All Blockquotes / All Unordered Lists / All Ordered Lists. This can result in cleaner code, but can be a little trickier to maintain.