Hey - i have a blog cms. inside there is a rich text, where the styles for the “p” elements have been made. I now wanted to embed a html code, with classes that are already inside my webflow system (so not custom css classes, but ones i already use in webflow too with standard class styling). However, all of them get overwritten with the “rich-text p” styling that is applied. Can i somehow change that?
Here is my site Read-Only: LINK
(how to share your site Read-Only link)
No not really. rich-text p will always be more specific than p.
But there’s a hack that might work for you here that would let you manage your styles in the designer, but selectively apply them to embed HTML chunks inside of your RTE.
When Webflow generates rich text CSS, it generates it as e.g. .your-class p, so in theory, you could-
Create a new rich text element, classed e.g. embed-rich-text.
Stick it on your style guide page, and style the elements how you want your embed content to look.
Then in your main rich texts, when you place the HTML embed, wrap your embedded content in a div with that RTE class, e.g.;
<div class="embed-rich-text">
<h1>...</h1>
<p>...</p>
<blockquote>..</blockquote>
</div>
I have not tested this but I expect the styles of your embed-rich-text would take precedence for that embedded content. However anything you have not explicitly styled in your embed RTE will inherit from the main RTE, before they inherit from the site.
Thank you!
Is there really no better way? seems really bad practice, since the classes are used in webflow already and part of the design system there.
Webflow just released a new rich text styling capability which I haven’t dug deeply into yet.
It allows you to assign classes directly to elements within your rich text block, so I’d investigate that first and see how much carryover you can get for your site-wide styling goals.
It does not work with CMS-bound RTB’s (yet?) however.