When you use a Container, the Background can be set to one of several things like Card or Accent. This can help clearly define areas or blocks on a page.
However, when you use a Custom Collection, you are only able to define “Card” or “None” on the background, but then it is just assigned to the background of each element in the collection, not the overall Container of that Custom Collection.
Here is what a Container with Card background and a Card Collection inside of it.
Here is the Custom Collection where the overall container (background) isn’t shown, but the background is there for each element inside.
Feel free to vote on your own post!
There are way with CSS to workaround this, but I agree that there must be the options.
Thanks @MaximeBaker, that is a valid point as with much of what we can do, but dealing with custom styling just to get it to look like the other built in components seems like a lot of work for basic consistency.
This has been a thorn in my side since custom collections were released a few years ago. I hate the lack of design consistency.
Do you custom style it, or just deal with it?
I just deal with it. I try to keep CSS to a minimum and only use it when necessary. In my case I ultimately went without a background color everywhere else to keep consistency. I have sections where I use standard collections inside a container and other sections where I need to use a custom collection which can’t be placed in a container. I like using color backgrounds to help draw the eye to the important information. Otherwise there is so much white and grey that everything blends together in my opinion. Switching to a dark theme helps in some cases, but still presents some visual challenges.
Since a custom collection is essentially a repeating container, it only makes sense to me that it should have the same styling options as a container.
Agreed! The custom collection hasn’t had anny significant updates since its inception despite our many feature requests.
Maybe one day. Keep the feature request coming!
Would you have an example of css to make this happen? I have been chasing it around but can’t quite to seem to get it to work right. I get it close, but it seems that the margin of the overall container tends to be different than other things on the page.
The Blue here is what I am trying to get aligned:
Here is what I am using thus far:
.lkBvDn.Custom-Card{
background:blue;
margin:8 auto;
border:solid 2px black;
border-radius:15px;
max-width:95vw; → I can adjust this down enough to get it be narrower, but it doesn’t want to scale with everything else so it ends up being different as well.
padding:1.5rem;
}
I do also have some overall “wide” styling applied as well:
#main-root div[class*=“justify-center”] {
–container-x-pad: 25px;
max-width: 95vw;
}
#page-root div[class*=“justify-center”] {
–container-x-pad: 25px;
max-width: 95vw;
}
Something like this?
Top is card container with grid collection. Bottom is custom collection with Grid Layout + Card Style.
.custom-card {
background-color: var(--gv-accent);
margin: 30px;
border-radius: 15px;
width: auto;
}
Only issue is that mobile adds additional margin, so margin: 30px might need some calc tweaking or the like.
Wow, all I needed was “auto…”
Thank you @Robert_Petitto!!
