I’m having a little trouble with setting the styling for text links in the rich text block for my dynamic content. This is my main goal. As I’ve been making some styling updates to our blog, I’ve come across an issue with the text links as they are currently styled. They seem to be causing line breaks or becoming link elements in their own divs and thus cause this weird formatting to happen when they are within a paragraph.
Here’s how it’s looking in a article already posted.
I’ve also tried adding content from the Editor Mode to see how my content team will work on this and noticed that if I try to type in a second paragraph the new stuff I’m typing gets pushed to a second column. Here’s what that looks like: https://drive.google.com/file/d/0B6DHki2A4aoDVzF6eVNIXzNZRms/view?usp=sharing
I’m working in the static page, “Rich Text formatting”. And this is an image of how it’s looking there. I’m attempting to set the styling for my text links, but I’m having trouble making them behave as text links.
Hi @Holly it looks like you already identified the issue was with your paragraph style setting of adding columns, you can adjust that with this toggle:
Wow, the column setting seems so obvious now. I’d never noticed it before. Thank you so much for pointing it out!
It seems that I’m still unable to set my text link settings. When I highlight text in a paragraph on my static page, “Rich Text formatting”, and try to set the link settings nothing happens.
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...
@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.
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).
@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?
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.
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.
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?
Oh, gah, duh. Thank you so much for patiently pointing this out.
No problem
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.
