# Change background color in Custom collections **URL:** \ **Category:** Ask for Help\ **Tags:** custom-css\ **Created:** [December 10, 2025, 1:26pm UTC](https://community.glideapps.com/t/change-background-color-in-custom-collections/85682 "2025-12-10T13:26:30Z")\ **Posts on this page:** 10\ **Page:** 1
**Author:** ![Federico\_Fleitas](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/federico_fleitas/32/77461_2.png) [@Federico\_Fleitas](https://community.glideapps.com/u/Federico_Fleitas)\ **Post date:** [December 10, 2025, 1:26pm UTC](https://community.glideapps.com/t/change-background-color-in-custom-collections/85682/1 "2025-12-10T13:26:30Z")
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”. ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/7/3/73f1dd89cb0ed68714f89becc4a471661827e502.png) 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. ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/d/9/d93c614a587619043cebe095861503d667ca99e7.png) The highlight button is only visible to the user who has specific roles. ---
**Author:** ![MaximeBaker](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/maximebaker/32/80877_2.png) [@MaximeBaker](https://community.glideapps.com/u/MaximeBaker)\ **Post date:** [December 10, 2025, 3:06pm UTC](https://community.glideapps.com/t/change-background-color-in-custom-collections/85682/2 "2025-12-10T15:06:47Z")
@Himaladin I remember you did something, but can’t find it. I don’t think the title was “custom collections color”. ---
**Author:** ![Himaladin](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/himaladin/32/71023_2.png) [@Himaladin](https://community.glideapps.com/u/Himaladin)\ **Post date:** [December 10, 2025, 3:18pm UTC](https://community.glideapps.com/t/change-background-color-in-custom-collections/85682/3 "2025-12-10T15:18:25Z")
You won’t find it… I haven’t covered custom collection components in a while. 😉 ---
**Author:** ![Himaladin](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/himaladin/32/71023_2.png) [@Himaladin](https://community.glideapps.com/u/Himaladin)\ **Post date:** [December 10, 2025, 3:21pm UTC](https://community.glideapps.com/t/change-background-color-in-custom-collections/85682/4 "2025-12-10T15:21:19Z")
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. ```auto section > .section-container > .no-hpad > div:has(.metaText) { background: rgba(255, 230, 120, .45); } ``` ---
**Author:** ![Federico\_Fleitas](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/federico_fleitas/32/77461_2.png) [@Federico\_Fleitas](https://community.glideapps.com/u/Federico_Fleitas)\ **Post date:** [December 10, 2025, 3:41pm UTC](https://community.glideapps.com/t/change-background-color-in-custom-collections/85682/5 "2025-12-10T15:41:18Z")
Hi @Himaladin , I try but not run, the code its work, but whe i change the class this not work ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/8/b/8b59ae4c55c1422a4d94c6c544e1ea10381a786c.png) ---
**Author:** ![Himaladin](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/himaladin/32/71023_2.png) [@Himaladin](https://community.glideapps.com/u/Himaladin)\ **Post date:** [December 10, 2025, 3:50pm UTC](https://community.glideapps.com/t/change-background-color-in-custom-collections/85682/6 "2025-12-10T15:50:55Z")
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. > [@Progress Bar - CSS to increase size (thickness)](https://community.glideapps.com/t/progress-bar-css-to-increase-size-thickness/85624/6): > > ![1000006235](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/8/8/88760df2a568dfd31f8c12bacfa04351271249db.jpeg) > > [Custom CSS | Glide Docs](https://www.glideapps.com/docs/reference/user-experience/css-for-apps) ---
**Author:** ![Himaladin](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/himaladin/32/71023_2.png) [@Himaladin](https://community.glideapps.com/u/Himaladin)\ **Post date:** [December 10, 2025, 4:10pm UTC](https://community.glideapps.com/t/change-background-color-in-custom-collections/85682/7 "2025-12-10T16:10:54Z")
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 */`. ---
**Author:** ![Federico\_Fleitas](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/federico_fleitas/32/77461_2.png) [@Federico\_Fleitas](https://community.glideapps.com/u/Federico_Fleitas)\ **Post date:** [December 10, 2025, 4:54pm UTC](https://community.glideapps.com/t/change-background-color-in-custom-collections/85682/8 "2025-12-10T16:54:18Z")
Thanks @Himaladin you are insane!!! ---
**Author:** ![Himaladin](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/himaladin/32/71023_2.png) [@Himaladin](https://community.glideapps.com/u/Himaladin)\ **Post date:** [December 10, 2025, 5:07pm UTC](https://community.glideapps.com/t/change-background-color-in-custom-collections/85682/9 "2025-12-10T17:07:31Z")
Glad it solved your issue. ---
**Author:** ![system](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/system/32/53398_2.png) [@system](https://community.glideapps.com/u/system)\ **Post date:** [December 17, 2025, 5:07pm UTC](https://community.glideapps.com/t/change-background-color-in-custom-collections/85682/10 "2025-12-17T17:07:33Z")
This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.