Change background color in Custom collections

[Federico_Fleitas]

Hello good,

I am doing a social network type project and I need to make a change when a button in a custom collection is clicked, I saw some CSS resources that change the background of the cards collection according to the text of the button, I tried it but it does not work in the custom collection, can you help me?

In the first image a custom collection is displayed with its components, my idea is that when the “Highlight” button is pressed, it changes its text to “Do not highlight”.

The following image shows how the custom collection looks once the button is pressed, the changes are, the button text to “Do not highlight” and the display of a Meta Text is activated: Highlighted by Lic. Ejemplo.

The highlight button is only visible to the user who has specific roles.

[MaximeBaker]

@Himaladin I remember you did something, but can’t find it. I don’t think the title was “custom collections color”.

[Himaladin]

You won’t find it… I haven’t covered custom collection components in a while.

[Himaladin]

If my understanding is correct, this is not a complicated case.
The key is your MetaText component. I assume you can control its visibility based on your button action.

If you only have one MetaText component, you can use the code below directly (without adding a custom-class).
But if you have multiple MetaText components, then replace .metaText with the custom class assigned to the specific MetaText component you are showing/hiding.

section > .section-container > .no-hpad > div:has(.metaText) {
  background: rgba(255, 230, 120, .45);
}

[Federico_Fleitas]

Hi @Himaladin ,

I try but not run, the code its work, but whe i change the class this not work

[Himaladin]

No, you cannot use the name igvxFI.
If you want to use your own class name, then assign your own arbitrary custom class in the component’s Options panel (on the right side of the builder) of that MetaText component—without using a dot.
The dot should only be used in the CSS code.

@Jeff_Hager

Custom CSS | Glide Docs

[Himaladin]

Also, I noticed that you added comments using //, which is incorrect. Remove them all, because they will cause the code below to stop working.
In CSS, comments must use /* comment */.

[Federico_Fleitas]

Thanks @Himaladin you are insane!!!

[Himaladin]

Glad it solved your issue.