Streaming live at 10am (PST)

Changing Collection List Item Class Independantly


#1

Hello guys,

I want to use custom code to a collection list. Now I need to give every collection list item an independant class so they get each different attributes. Is this possible? As every time I change one class every collection item is going to get this class not the one I want only.


#2

Yes this is possible. Use the item’s slug, which is unique and is already CSS class (format) ready.

However if you are going to style each one individually it will be a PITA.

May I know what you are trying to do with this?


#3

No, all the collections items are completely identical.

The only way I know to style them differently would be to use custom code and pseudo elements, targetting 1st, 2nd, nth child of a collection list. It has limitations, but depending on what you’re trying to achieve, it could be possible.

Just FYI, when Webflow designers want to have various style within a collection list, they use several collection lists and they work the sorting to make it look like a continuous flow of dynamic items.

For example, check www.larochelle.today : it’s really one list of dynamic content, but it’s using 5 collection lists.


#4

Interesting. I just checked but I’m not fully getting it. By slug you mean Name right? But it’s not used as a class for the item, so how would you target an item?


#5

You can use slug field in embed code.


#6

How would you use the Name field with custom code to STYLE a given item?


#7

The same way you would have done it normally - manually give an element the same class and style it, or via custom code CSS.


#8

I don’t get how you give a CMS item a class using the field name and custom code. I see how you can add an element inside of it, with a class that’s using the Name field, but wrapping the content of a CMS item inside of one, or adding a class to the item, I don’t see how.

Edit: well you could add a div class:slug in the item, then a wrapper for all your item content just afterwards, and use pseudo to target the next element after the div class.slug. Is that what you have in mind?


#9

If you want to wrap (like what OP is suggesting), then there are two ways:

  • Every child element is done via custom code as well, or
  • Use custom code to copy the content of the slug contained in a child element, and move it to the parent “item”

Anything is possible with JS.

This is also a possibility


#10

I didn’t realize you were talking about using JS.

The solution I envisionned in my edit on the previous answer should work with no JS needed though.


#11

Now I never thought of doing this… you put me on the path, thanks Sam. It’s going to be very useful, very very useful…


#12

I think you’ll need either of my suggestions for this. OP is not asking to style each item, just wants each item to be unique.


#13

You should have provided this information earlier.

Refer to

[TUTORIAL] Using Isotope and MixItUp plugins with Webflow, and
[TUTORIAL] Advanced filtering (several dimensions)+ Search with MixitUp plugin, and
[TUTORIAL] MixItUp filtering plugin with Dynamic content

and please try to use the search functionality on the forum first!


#14

I know how this works, but if I use a collection list with cms I cannot refer each different collection item a different class to then point them to each different filter type


#15

However if I get in a collection list and add at every item a button lets say to link somewhere. How can I link independently with each button to a other site? Atm if I link one button to one site and automatically all buttons from the list refer to the same page?


#16

You’ll want to bind the URL of the link to a URL field in the collection.