Edit style on CMS content

@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!

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.

Thanks @thesergie! The answer was right under my nose, I’m embarrassed to say. I just dropped in a Rich Text element, read the pre-made text, and discovered the answer to my question. I appreciate the quick reply.

@thesergie another question: I see how to style elements within a Rich Text element. However, if I have some images left aligned and others right, is there a way to distinguish between the two in order to add left or right padding? Right now I do this in css via Custom Code, but I’d ideally like to have control within the Designer.

We have plans to allow this type of customization in the designer but no ETA for it. Definitely use custom code for now.

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