Container Backgrounds CSS

Ask for Help
1

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?

3

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

4

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

5

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

6

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

image
image397×693 37.9 KB

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

image
image395×694 36.9 KB

7

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.

8

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
image392×525 31.7 KB

image
image391×520 31.8 KB

9

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.