Styling a Collection Page H1 & RTE

Hiya,

I’m trying to style the H1 & RTE in my blog collection page, but I can’t seem to figure out why my H1/title isn’t visible upon preview.

I’m also trying to style the RTE in the content of the blog and although I’ve altered the settings e.g: typeface, it doesn’t change.

Please help and mind the minty mess :sweat_smile:


Here is my site Read-Only: https://preview.webflow.com/preview/mindfull-usa-new?utm_source=mindfull-usa-new&preview=8719162ac1c98440eb65d486e3ac9067

And the live link for an example: mindfull-usa-new.webflow.io/blog-posts/mindfull

It’s because the RTE pulls the styling from your sites global styles. So if your paragraphs across your website are 15px in height with 27px line-height with a color of #333 then the paragraphs in the RTE will get the same thing applied to it. so on with H1’s, H2’s etc.

Now there is a way to style it separately from the other global styles using a little bit of custom CSS. You can start by giving the Rich text element on your blog posts a name, like .post-content.

Then you will need to target these with CSS in the <head> of your posts pages (in settings for the posts page, which will automatically generate these styles for all posts) custom code like so:

<style>
  .post-content w-richtext p{
    font-size: 16px;
    line-height: 28px;
    color: #454545
  }
</style>

That would style only the paragraphs within the RTE itself with that class. Then for the Heading tags you would just change the p to an H1 or an H2 etc., or whatever one you wish to change.

Something like this:

<style>
  .post-content w-richtext h1{
    font-size: 52px;
    line-height: 54px;
    color: #282828
  }
</style>

Hope this helps!
-Noah

You can also style nested elements in the designer.

https://cl.ly/ffb346c4726a

CloudApp

1 Like

Whoops, I got to this late – what was the first video? I watched the RTE webflow university video on nested elements but thought it might have been possible to alter it without nesting an element :slight_smile:

Are you referring to the video in my post? If so, that was something I created for you.

Hiya, I’m trying to edit the Blog Post Template of my site but when I preview it my H1 seems to go missing and I can’t understand why; I can’t seem to see the nested element selector when I click on the H1, and adding another class to make it a combo class doesn’t seem to work.

I have the same issue when I try to edit the RTB of my blog text, please help :cry:

Here is my site Read-Only: Webflow - Mindfull USA New

Yeah, I can’t seem to access that video anymore – could you please resend it?

I moved your duplicate post back to your original post.

I believe your problem is this:

When you add a Rich Text Element to a CMS template, you can assign a class to the element, but you cannot style its children since the content is loaded from the CMS when it is bound to a rich text field in the collection.

Un-bind the element and then apply your nested styles. When you are done, bind the element again.

Example:
CloudApp

My preference is to style items in my designs by placing the element on a style guide page where I add the class(s), and in the case of a RTE, all the nested styles. Then when I need to reuse the styled element, I just apply the style(s) to a new instance or copy and past it.

This way, I always have a current reference I can visually inspect. This is also very helpful when using combo classes.

1 Like

Ah I see, thank you for the clarification and thorough advice!

Does this resolve your issue?

Currently working on it and will mark as resolved as I do it :slight_smile:

I’m still a bit stuck as to why it’s not visible after deleting all the classes and I can’t seem to figure out how to bind and unbind it – could you please help with this?

Your interactions are hiding the page content (top of the page).

I deleted the interaction and …
CloudApp

2 Likes