# Container Backgrounds CSS **URL:** \ **Category:** Ask for Help\ **Tags:** custom-css\ **Created:** [April 29, 2026, 10:03pm UTC](https://community.glideapps.com/t/container-backgrounds-css/86984 "2026-04-29T22:03:23Z")\ **Posts on this page:** 12\ **Page:** 1
**Author:** ![Etu-IT](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/etu-it/32/94625_2.png) [@Etu-IT](https://community.glideapps.com/u/Etu-IT)\ **Post date:** [April 29, 2026, 10:03pm UTC](https://community.glideapps.com/t/container-backgrounds-css/86984/1 "2026-04-29T22:03:23Z")
Hi Glide Community, I am using the following custom CSS to get a teal background around the items in a collection: .customcontainerborder div[class\*=“pages-component-renderer\_\_\_StyledDiv7”] { border-right: 2px solid #2E3C47; border-bottom: 2px solid #2E3C47; border-radius: 20px; background-color: #31404C; } This works well, but on one page I want the background-color of my collection to be #000000. I can’t seem to be able to create a second class with a different background colour that affects the collection item borders, can someone please offer me some help with the CSS I need to make this happen? ---
**Author:** ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)\ **Post date:** [April 29, 2026, 11:31pm UTC](https://community.glideapps.com/t/container-backgrounds-css/86984/3 "2026-04-29T23:31:59Z")
Do you mean you have tried a new custom class name and applied separate code for that class name but it doesn’t work? ---
**Author:** ![Etu-IT](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/etu-it/32/94625_2.png) [@Etu-IT](https://community.glideapps.com/u/Etu-IT)\ **Post date:** [April 29, 2026, 11:45pm UTC](https://community.glideapps.com/t/container-backgrounds-css/86984/4 "2026-04-29T23:45:29Z")
Yes, I’ve created this: .darkcontainerborder div[class\*=“pages-component-renderer\_\_\_StyledDiv7”] { border-right: 2px solid #2E3C47; border-bottom: 2px solid #2E3C47; border-radius: 20px; background-color: #000000; } but when I apply it to the collection, or a container with the collection in it, the background colour does not change ---
**Author:** ![Etu-IT](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/etu-it/32/94625_2.png) [@Etu-IT](https://community.glideapps.com/u/Etu-IT)\ **Post date:** [April 29, 2026, 11:47pm UTC](https://community.glideapps.com/t/container-backgrounds-css/86984/5 "2026-04-29T23:47:51Z")
Actually, I’ve looked at my CSS and it appears this is applying the border: .collection-item \> div { border: 4px solid #2E3C47; border-radius: 12px; background-color: #31404C; } But I have also created .collection-item-dark \> div { border: 4px solid #000000; border-radius: 12px; background-color: #000000; } and it hasn’t affected the collection I am trying to apply it to ---
**Author:** ![Etu-IT](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/etu-it/32/94625_2.png) [@Etu-IT](https://community.glideapps.com/u/Etu-IT)\ **Post date:** [April 30, 2026, 12:37am UTC](https://community.glideapps.com/t/container-backgrounds-css/86984/6 "2026-04-30T00:37:43Z")
For further clarification, this is what it looks like currenlty: ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/7/7/7744683c80ee2db6063d0540b969d11b4e2800a7.jpeg) And this is what I want it to look like (but on this page only) ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/3/3/33db4775a5038f12bd239abfe88ed4d6bce41630.jpeg) ---
**Author:** ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)\ **Post date:** [April 30, 2026, 1:25am UTC](https://community.glideapps.com/t/container-backgrounds-css/86984/7 "2026-04-30T01:25:55Z")
> [@Etu-IT](#): > > .collection-item \> div { > border: 4px solid #2E3C47; > border-radius: 12px; > background-color: #31404C; > } Is this the thing you would want to apply to all collections? Looks like this is the native collection’s div name so if you can’t remove this, there needs to be an overwrite with !important happening on the darkcontainerborder part perhaps. ---
**Author:** ![Etu-IT](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/etu-it/32/94625_2.png) [@Etu-IT](https://community.glideapps.com/u/Etu-IT)\ **Post date:** [April 30, 2026, 1:33am UTC](https://community.glideapps.com/t/container-backgrounds-css/86984/8 "2026-04-30T01:33:24Z")
Yeah, that was put in there so by default collections would appear with the teal border. I have put in: .collection-item-dark \> div { border: 4px solid #000000 !important; border-radius: 12px; background-color: #000000 !important; } but the only effect this seems to have is making the thumbnails slightly smaller: ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/7/7/77bf5c4a7f38b123f10d77202da34be5edb756c2.jpeg) ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/4/5/45a4afef528c7924313999162c7a4493e640c9cc.jpeg) ---
**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:** [April 30, 2026, 4:27am UTC](https://community.glideapps.com/t/container-backgrounds-css/86984/9 "2026-04-30T04:27:07Z")
A few issues with your CSS: 1. **`div[class*="pages-component-renderer___StyledDiv7"]`** – I don’t see this attribute in the collection component you’re trying to target. 2. If you’re trying to target the cards, try using **`[data-testid="cc-card"]`** instead. 3. Your images are shrinking because you’re applying a 4px border . Either reduce the border width or remove the border entirely to prevent the content from being compressed. ---
**Author:** ![Etu-IT](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/etu-it/32/94625_2.png) [@Etu-IT](https://community.glideapps.com/u/Etu-IT)\ **Post date:** [May 3, 2026, 10:39pm UTC](https://community.glideapps.com/t/container-backgrounds-css/86984/10 "2026-05-03T22:39:27Z")
Thanks Himaladin, I tried your suggestion and it didn’t seem to work. This is what I have in my custom css: .collection-item \> div { border: 4px solid #31404C; border-radius: 12px; background-color: #31404C; } .collection-item-dark \> div { border: 4px solid #000000 !important; border-radius: 12px; background-color: #000000 !important; } .customborder div[data-testid=“cc-card”] { border-right: 2px solid #000000; border-bottom: 2px solid #000000; border-radius: 20px; background-color: #000000; } The .collection-item seems to apply to all collections, so by default, they have the #31404C border. neither .collection-item-dark and .customborder do not seem to override this when I apply either of them to the collection I am trying to have a black border for. I feel like I need a second version of .collection-item with the different settings (or one that applies the teal border and leave it as borderless by default) but I am unsure what CSS code is needed to achieve this ---
**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:** [May 4, 2026, 3:20am UTC](https://community.glideapps.com/t/container-backgrounds-css/86984/11 "2026-05-04T03:20:52Z")
Are you applying a custom class per specific collection component? It would help to see the settings in your Glide dashboard where the class is assigned, and please also share a screenshot of your custom CSS. Avoid using broad selectors like `.collection-item > div` or `.collection-item-dark > div` unless you are certain of the exact target element, as this can unintentionally affect multiple nested elements. If your intention is to have one collection use the default style and another use a custom style, then proper scoping is required. For example: `.custom-class [data-testid="cc-card"] { ... }` should work as long as `.custom-class` is correctly assigned in the Glide component options tab. If you are trying to achieve dynamic or conditional styling behavior per collection instance, you may also find this approach relevant: > [@link CSS Hack: Dynamic CSS in Glide 2 via URL Fragment](https://community.glideapps.com/t/css-hack-dynamic-css-in-glide-2-via-url-fragment/85613): > > Use image URL fragments as lightweight, reliable selectors. I previously shared [brain CSS Hack: Dynamic CSS in Glide](https://community.glideapps.com/t/css-hack-dynamic-css-in-glide/85080#:~:text=CSS%20Hack%3A%20Dynamic%20CSS%20in%20Glide) — a method relying on Rich Text injection — and also using attributes already available in Glide: [https://community.glideapps.com/t/css-hack-dynamic-css-in-glide/85080/4](https://community.glideapps.com/t/css-hack-dynamic-css-in-glide/85080/4). However, many of Glide’s built-in attributes are not stable as selectors because they may be translated. A more reliable method is to append a fragment at the end of the image URL. Example Note: The followi… > If you want to avoid layout shift (e.g. border affecting image size), you can use `outline` instead of `border`, since outline does not affect element dimensions. ---
**Author:** ![Etu-IT](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/etu-it/32/94625_2.png) [@Etu-IT](https://community.glideapps.com/u/Etu-IT)\ **Post date:** [May 6, 2026, 10:34pm UTC](https://community.glideapps.com/t/container-backgrounds-css/86984/12 "2026-05-06T22:34:35Z")
That worked, Thank you Himaladin! ---
**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:** [May 13, 2026, 10:34pm UTC](https://community.glideapps.com/t/container-backgrounds-css/86984/13 "2026-05-13T22:34:58Z")
This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.