Add a dynamic class to CMS page


I’m building a site with different projects, that each would have their own styling. For this reason, I’d really like to dynamically update the header + body styles for different collection items, or when these are added (select) to a blog post for example.

I’ve tried a script that would add a class to an existing class. For example: Add heading-style-scoolmakers to header-text-style IF Initiative = sCoolMakers. I can’t get it to work.

I’ve also tried setting a class dynamically as a CMS field, and then adding an embed to the page in question. This also doesn’t seem to work.

I’m not a ‘real’ developer, I just sort of understand (I think) what needs to be done, and have asked GPT to help. I really can’t figure out what is going wrong at this point.

This is a project for a foundation that works with kids, I’m not doing this for profit or anything, I just really believe in the cause. But I’m getting ready to throw my computer out of the window… Could someone please help me out? I’d be super grateful.

Here is my site Read-Only

hi @TheGuru

Your description is very broad and it is hard to help as no one knows you are trying to achieve and why it is beneficial means what additional value will bring to the user beside website content. Anyway, all dynamic content including style changes based on conditions is done with javascript.

the best you can do is to hire one as it is their job.

This is very bad idea as chat GPT mostly give not correct or even worst a bad advice and if you do not understand coding you would not be able to figure out if GPT is helping or not.

people here, including me, can help but you should be more specific.

Dear Stan,

I absolutely agree with you and if I wasn’t doing this pro bono I absolutely would hire someone.

The issue is as follows:
I’ve created two CMS collections, one called Initiatives and one called Projects. Each Project will be linked to an Initiative in the CMS through a reference field.

I am working on the design for the Initiative and the Project Dynamic Page. I would like both of these to update the styling to the headers and body text depending on which Initiative is displayed/selected.

I’ve given all headers the class header-text-style and I’ve created a class called heading-style-scoolmakers. When I add this class to the header in the Designer, the font style is updated.

I tried asking for a few things:

  1. A script that would add a class to the header, depending on each Initiative. For example: One Initiative is called sCoolMakers (Field in CMS: Name). For each element that I’ve given the class header-text-style I’d like to conditionally add the class heading-style-scoolmakers. If I can get this to work, I figured I would be able to do it for other Initiatives + body text

  2. Another thing I tried was to add a field to the CMS, in which I could type the name of the dynamic class. For example, I called the field in the Initiatives collection {{Header Style CSS}} and for the sCoolMakers item, I’ve filled this with heading-style-scoolmakers. I then asked for a script to add the content of this field to the headers. I added this to an Embed to the page in question.

This initially didn’t work because the Embed wouldn’t recognise {{Header Style CSS}} as a dynamic field. I read online that I needed to add a class to the body (I think?) and then in the settings give this a custom value. This I might have not understood correctly but it didn’t seem to work.

  1. The last thing I tried was, again in the Designer Settings, select the header element in question, and give it a custom value. I typed header-text-style as the first value, and then after the ‘=’ sign, was able to dynamically link it to the {{Header Style CSS}} field from the CMS. This didn’t work either.

I’m sure I’m just doing something wrong, as you said, I just really cannot figure it out. And I’m still hoping it isn’t actually as complicated as it seems — but feel free to tell me I’ve underestimated this.

Grateful for all help, insights, and time. I truly appreciate it.

Hi @TheGuru
If you still haven’t figured this out. You can check out this article by Flowradar - Has anyone successfully added a dynamic class name to each item within a Webflow collection list using custom JS? We want to vary the styling across the list items based on a field within the CMS. We're aware of the option to use multiple collection lists for different styling, but we're looking for more control. Any advice or examples would be appreciated. Thank you!