Streaming live at 10am (PST)

Rich text block font colour in a collection

Hi Webflow friends, I am having a heck of a time changing the H5 (the blue text) in this rich text block within a collection. I have tried everything I can think of, looked at other posters questions and answers and I CAN NOT get it to change. If i go into the collection and change it from an H5 to a H4 it changes but I want the H5 to be a dark grey colour (h4 is green - “work experience”) I have tried to create a “new” H5 and change it in hopes that this one will change we well, but it doesn’t. I have been working on this for 3 days now and I am going nuts!!!

HELP! and thanks :slight_smile:

https://preview.webflow.com/preview/care-dental?preview=1560370fe003f81a57c1a7b384c3681d

Hi Ashley,

You need to go to any other page that’s not a collection page and drag in the heading component. (You can drag it in anywhere as you will delete it in a sec).

Select the component and from it’s settings select H5.

From the selector box choose ‘All H5 Headings’ (as pictured).

Now style this using the Typography design section giving it a grey colour you wish.

Once you’ve done that, delete the component.

Now go back to your templates page and the H5’s should now all be grey. I have done it as pictured below:

Hope that makes sense.

Rob

Lets begin from the start (regular CSS).

In regular CSS you only need to create selector scope and thats it (more specific wins):

  h4{
      color: black; /* global site heading */
   }
  .some-rich-text-wrapper h4{
      color: DarkGray; /* override h4 global setting */
   }

my html

<h4>I am black</h4>
<div class="some-rich-text-wrapper">
  <h4>i am DarkGray</h4>
</div>

You find the same idea for Webflow richtext editor. Try this steps:


Steps: 1. Drag to the page some rich-text block 2. Create wrapper class "test" (or any name!) ![|572x196](upload://rop0i3V60I6VuiVOM9iAQvTni6B.png) 3. Set h4 to blue or any color 4. Now remove this richtext editor and give to your teams-->information block this class

Result:


**The output code** ![|690x114](upload://9rHvNO03hW3CLMfLKQo7v5JctxJ.png)

THank you so so much Rob!! This helped out a ton. It was such a simple thing and your directions were so perfect. I know it may sound silly but this made my day lol.

Have a good one!

You’re welcome. I had the same trouble a while back.

Can you click on the tick on my last message so other users can see that was the solution.

Good luck with your site.

Rob

This topic was automatically closed 125 days after the last reply. New replies are no longer allowed.