Dynamic / custom design per CMS item

Design help CMS
8

I have a similar question: would it be possible to modify the CSS of each entry in the listing view of a CMS collection. In other words: not modifying the CSS of the page of each entry, but the CSS of the thumbnail.

Say I have three entries in my CMS collection list. I want each one to have a different H1 styling. One in bold, one in italic, and one in regular. I have created fields in the CMS collection to carry font-style: italic / regular and font-weight: 400 / 600 / 800 etc. instructions. And I’m calling those fields in an HTML Embed with something like:

<style> .H1 { 
font-weight: [corresponding-font-weight-field] 
} 
</style>

This HTML Embed is placed in each entry of the collection list, in the parent div.

My problem is: the HTML instructions of the first entry (say: font-weight: 400 and font-style: normal) gets applied to all the subsequent entries. All H1s are in regular.

Is there a way to apply a different styling to each separate H1 in the listing view? Is it possible to dynamically create a combo class for each entry?

Thanks in advance for your help :pray:

EDIT: Also please note that I don’t want to use this method (duplicating H1 several times, creating combo class for each to achieve the styling, and then tying their visibility to a toggle in the CMS)

1 Like