How to edit H1 style of Rich Text from Projects (CMS)

Hi,

Does anyone know how to edit the styling of the H1 element only when it is in the Project Description? I have attached a screenshot of my Project Template and I don’t know how to make the H1 header black (right now it’s white above the “Overview” H2 element).

Thanks in advance!

There a limitation here that prevents you to directly style elements of a RT when this RT is bound to the CMS. I hope this limitation will be removed soon, but in the meantime the workaround is pretty easy to handle. Proceed as follow:

  1. let’s say you have a CMS RT with the class .myrt. Duplicate it.
  2. unbind the duplicate from the CMS. You’re left with a RT of the same class .myrt, but with placeholder content instead of your CMS content. Edit the content tocreate the sub elements you need to style (there will already be a H1, H2, P, but you may want to create a quote, a list, an image with caption…

http://vincent.polenordstudio.fr/snap/199ehmn.jpg

  1. unselect the RT, then directly select the element you need to style (the H1 in your case)
  2. click on the selector field and select the pink think “All H1 Headings”

http://vincent.polenordstudio.fr/snap/19beym0.jpg

  1. under the selector field, click on Nest selector inside of myrt

http://vincent.polenordstudio.fr/snap/19sorfk.jpg

Now you can style the H1. When it’s in this state:

http://vincent.polenordstudio.fr/snap/193793m.jpg

it will only affect H1 in RT’s under the .myrt class

Styling the H1 in the default RT will also style it in your .myrt CMS RT.

2 Likes

Hi @vincent thanks for the detailed response. Just a few questions:

  1. How do you unbind the duplicate from the CMS?
  2. Does the name of the duplicate need to be the same as the original? I have .myrt and .myrt Copy
  3. When you say edit the content to create the sub elements I need to style (in this case only the H1) what do you mean by edit exactly?

Sorry for all the questions and thanks again for your help!

  1. select it, got to the settings tab, unfold the binding dropdown (purple) and unbind it.
  2. yes it has to
  3. unselect the RT element, select some content directly inside of it (like a title or a paragraph)

AWESOME! Thanks it worked!

Really appreciate it!

1 Like