Edit style on CMS content

Hi there,

Is there a way to add and edit style of an element from CMS content? For instance, all my Heads are set as centered and that is the way I’ve used on other pages. However, on my blog posts I’d like to have the headers aligned to left.

Is it possible already or would be a new feature?

Best,

1 Like

Yeah. You simply add a new style on the headings on your blog page and/ or template page that left aligns.

Hi @GodlessGlen, thanks for your reply. But I think I wasn’t totally clear. I can’t change the style of my default Headings since they are already being used hundreds of time in other pages as centered. I need to add a custom style for the CMS Headings.

Moreover, my doubt extend to all other elements inside a CMS content: images, links, paragraphs etc…

Best,

@guihnz I understand. But all you should have to do is specify a new style at the top where it says “selector”. Type a new style name there and then scroll down and set the left align. Then, you only apply that style you created on the headings you want. I have attached a screenshot with red arrows to illustrate. I hope this helps.

@GodlessGlen, I am pretty familiar with that. :smile:

The issue is that inside the CMS editor there is no way to apply any style to any element. Unless there IS a way but it is very well hidden!

You can’t add styles from within the CMS Page Editor. The idea is to allow content editors to make changes without messing around with the styling. You’ll need to stick to styling in the Designer.

1 Like

@guihnz You can set a class on a rich text element and then create custom styles for tags (Paragraphs, Headings, Links, etc) specifically for that tag. BOOM :boom:

Hey @thesergie, but we are stuck to edit only the default class, right?

The problem is that I was already using the default styles in dozens of other pages outside CMS. I can’t mess with them!

What @jmw said makes sense, however I thought that I could be able to create new styles only from the CMS “inside editor” (not sure how you call them) and that would not be available for the in-page editing.

Anyway, that is just a wish feature. You guys have done such a great job with the CMS already!!

Thanks,

I’m still confused what you’re trying to edit. Can you give an example?

@thesergie, I am trying to edit the style of elements (Paragraphs, Headings, images, links) from blog posts (CMS) but I can’t change any default style such as “All Paragraphs”, "All H1 Headings"etc. since I have already used them in several other pages.

So, lets say I want to change the text size of Paragraphs from my blog posts. As far as I understand I can’t add a custom class to them, I could change de style of the default “All Paragraphs”, but I have hundreds of other Paragraphs out of CMS (on static pages) using the “All Paragraphs” style.

Best,

2 Likes

Ok I understand. So in the designer add a class to the rich text element that you want to have custom tag styles (paragraph, heading, etc). Then select any of the elements inside of the rich text element and choose the tag in the selector. Now you have an option under the selector to “Nest selector”:

Once you click that then you can style that tag only when its inside of that rich text block.

3 Likes

@thesergie WOW, I knew you guys would not miss that!! :smile:

Thanks!

Boy I think I’m following your direction but I can’t get the “Next Selector Inside Of” option to appear. Is there a trick to it?

@bsetter Currently this only works for Rich Text elements when they are not directly linked to any dynamic data. For example, if you drag in a new Rich Text element into a blank page, you should be able to click on the individual headings/paragraphs inside and access the “Nest selector inside” link.

Edit: like this… also note that the outer Rich Text node has to have a class before this feature can be accessed:

5 Likes

@callmevlad This is the first time I’ve seen this feature. I need to check it out. BTW Vlad, if you don’t mind me asking, what app did you use to make this little movie, and is it for Mac?

It’s called Licecap and it’s actually cross platform!

http://forum.webflow.com/t/how-to-record-high-quality-animated-gifs/18522

2 Likes

I can’t get this to work for dynamic pages. I have followed the instructions and I am able to create the styles and they work fine on regular rich text elements… but not dynamic elements. Does the rich text class need to be named something in particular for the CMS? I have given it many different classes without any luck.

EDIT: I forgot to assign the rich text element class to the collection template page. All good now!

Glad you found it! Yeah just assign the same class to the rich text dynamic element. :thumbsup:

This is really cool! A question: If I have CMS Rich Text field (e.g., with paragraphs and nested images) and I bind this content to a Rich Text element, then is there a way to style the images (e.g., border, padding, radius, etc.)?

@juth Yeah it’s the same process. First you have to add a class in a static rich text element and style the elements then just add that class to the binded rich text element.