Container Backgrounds CSS

[Etu-IT]

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?

[ThinhDinh]

Do you mean you have tried a new custom class name and applied separate code for that class name but it doesn’t work?

[Etu-IT]

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

[Etu-IT]

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

[Etu-IT]

For further clarification, this is what it looks like currenlty:

And this is what I want it to look like (but on this page only)

[ThinhDinh]

@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.

[Etu-IT]

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:

[Himaladin]

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.

[Etu-IT]

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

[Himaladin]

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:

CSS Hack: Dynamic CSS in Glide 2 via URL Fragment

Use image URL fragments as lightweight, reliable selectors. I previously shared CSS Hack: Dynamic CSS in Glide — 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. 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.

[Etu-IT]

That worked, Thank you Himaladin!