CSS in Custom Collection

Ask for Help
1

I’m really challenged by CSS but hoping someone can help me do something fairly simple to change the styling on a custom collection. When you use the card background there is a lot of space between the elements and on the top and bottom.

Screenshot 2025-06-14 at 9.25.48 AM
Screenshot 2025-06-14 at 9.25.48 AM2128×794 9.82 KB

So for example I would like “Blocks” to sit closer to “Opus” and also reduce the space above Opus and below “Blocks”

Alternately, if the background is NOT a card, the look is very confusing since everything runs together and there is no mouseover highlight that tells the user they can select something. How would I had a bottom border to the non-card layout and have it highlight upon hover

Screenshot 2025-06-14 at 9.21.08 AM
Screenshot 2025-06-14 at 9.21.08 AM2362×1252 101 KB

(as it does with a List Component)
Screenshot 2025-06-14 at 9.22.16 AM
Screenshot 2025-06-14 at 9.22.16 AM2544×686 30.5 KB

Thank you in advance for any advice on this!

2

This may give you a couple ideas

3

Does it have to be a custom collection, or can a list collection with a card setup be enough to work with (further CSS can be applied).

4

@Eric_Penn Thanks. Great resource I had forgotten about. @ThinhDinh, it does need to be a custom collection because I have some custom butttons that I created with the AI component that I want to deploy.

2 Likes
5

Good to know. Browse through the CSS Library and find something to play with I guess. If it doesn’t work, please let us know here.

6

Ok, so experimenting a bit with it and relying on one entry from @ThinhDinh (and some input from ChatGPT) I was able to achieve most of what I want for the non-card layout. I think my css is probably bloated. Any advice on cleaning it up would be great.

.test div[class*="pages-component-renderer___StyledDiv5"] {
  padding: 8px 0;
  border-bottom: 1px solid #d1d1d1;
  transition: background-color 0.2s ease;
}

.test div[class*="pages-component-renderer___StyledDiv5"]:hover {
  background-color: #f6f6f6;
  cursor: pointer;
}

.test div[class*="pages-component-renderer___StyledDiv5"] p,
.test div[class*="pages-component-renderer___StyledDiv5"] h6 {
  margin: 0;
  padding: 0;
}

.test div[class*="pages-component-renderer___StyledDiv5"] p {
  margin: 4px 0;
}

.test div[class*="pages-component-renderer___StyledDiv5"] h6 {
  margin: 6px 0;
}

.test div[class*="pages-component-renderer___StyledDiv5"] > div > div > div:nth-child(1),
.test div[class*="pages-component-renderer___StyledDiv5"] > div > div > div:nth-child(2) {
  margin: 0 !important;
}

#must-start-with-a-letter6b845812313c3b03c315de9f149441ba > .select-mode-container___StyledDiv2-sc-1q98tyi-1 {
  margin: 0 !important;
  padding: 0 !important;
}

#must-start-with-a-letter6b845812313c3b03c315de9f149441ba p {
  margin: 0 !important;
  padding: 0 !important;
}

Also, there is one weird thing happening at the top which is that in adjusting the margins, the component sneaks up into the search field. I assume I need to have a different margin that applies to the very first item but not sure how to do that.

7

#must-start-with-a-letter6b845812313c3b03c315de9f149441ba

6b845812313c3b03c315de9f149441ba

There are some parts where you don’t want this, it might be different for different devices/OS.