How can I adjust the size and color of a variant border in Brooklyn?

Store Design
1

I’m currently using an app for the variant, i want the height and length of the “size” border to be the same as the “add to cart” button below, I also want to decrease the font size inside the border and change the border color to black instead of grey/transparent.

6.PNG
6.PNG1312×316 272 KB

Thank you

2

@vanessaliew – can you please share the link to the page the screenshot was taken from?

Thanks,
Mario

3

Hi,

I’ll send through pm

4

@vanessaliew

I would not remove the border – this would be the outcome:

Screenshot 2021-09-14 at 12.33.54.jpg
Screenshot 2021-09-14 at 12.33.54.jpg592×372 17.4 KB

If you really do want this, add the following CSS snippet:

.ul-globo-dropdown-option.ul-globo-dropdown-option {
  width: 100%;
  border-color: transparent; /* optional – remove to keep border */
}

This is what it would look like keeping the border:

Screenshot 2021-09-14 at 12.34.03.jpg
Screenshot 2021-09-14 at 12.34.03.jpg579×379 23.4 KB

To change the font-size use …

.ul-globo-dropdown-option.ul-globo-dropdown-option .swatch-anchor.swatch-anchor.swatch-anchor.swatch-anchor {
  font-size: 90%;
}

Hope this helps,
Mario

5

@r8r Hi thanks the border width and the options font are working perfectly, however the border color is not changing, i want to change it to “solid black” instead of grey,

Please help me again thank you so much.

6

@vanessaliew – sure – all you need to do is modify the color value:

.ul-globo-dropdown-option.ul-globo-dropdown-option {
  width: 100%;
  border-color: #000;
}

Hope this helps,
Mario