Dynamic / custom design per CMS item

Hi there,

I was wondering if there is a way to also create a custom layout per CMS item?
So for example now I can only a custom colour, but I would also like to be able to decide between a text-alignment (centered / left aligned) per CMS item, or even a custom background block width.

Added a screenshot with multiple examples that I would like to be able to pick between in the blog post editor somehow:

Is something like that possible or is there a workaround?

Thanks!
Thomas


Here is my public share link: LINK
(how to access public share link)

Hi, @thomas123 welcome to the forums.

Natively there is not a feature that would allow you to do this. However, since webflow generates HTML you could achieve the desired outcome a couple of different ways. How you approach this will be based on who will be adding/editing collection items.

  1. You could add a text field to the collection in question, that stored CSS styles targeting the element(s) you want to modify. This style(s) could be applied to the template by adding a <style>yourcollectionfieldname</style> to the inside head tag area, inside the template settings.
  2. You could style the alternative with a combo class in the designer to create a style you could then apply to the element using JavaScript or JQuery (It is loaded automatically). You would remove it from the element in the designer, and apply it on page load, by adding the combo class to be a variable used in your new script tag that you would need to add to the template > Custom Code> before body tag area.
2 Likes

CMS items are going to follow the same CSS styles. Although you could create a specific field for something like this like a dropdown menu with let’s say “Right”, “Center” and “Left” and include some javascript if you know it. But if you don’t I would reach out to someone who is well versed with javascript to help you out there. I’m sure future updates and features will allow for more customization to create different layouts for various CMS items.

1 Like

Haha man, right on the money. We must have posted at the same time.

1 Like

There are convoluted methods of achieving this goal, if you’re not into JavaScript, but they lead down murky paths of extra markup and confusion for people who take over your project/ or even yourself once you forget the reasoning behind the doubled-up collections lists, or duplicate link blocks with different conditionals on each, for example.

I add notes to pages that are in a dev folder and saved as draft, to document custom code and processes within a webflow site.

The example of using some JQuery to add a class to an element would be very easy to maintain. Don’t delete the class, and you can update the styles in the designer. There should be other supported things in the pipeline. The wishlist is a good place to vote on existing ideas or create new ones.

1 Like

Hi everyone,

Thanks for the great responses! It’s a shame that currently no CSS styles are supported by the custom fields. I don’t have any scripting knowledge, so for now I’ll think of another design.
But can imagine it would open up a bunch of new design options if it would be possible.

Thanks for you time and consideration!

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