How to add a black border around products and the card below it on Dawn theme

[leighmarino]

Hi there, 

I am looking to add a thin black border around product images in a grid and the text description card below them. The same for Collections in a grid as well. 

I found out how to put a border around just the image, but I would like the border to go around not just the image, but the image and the white card below it. Please see reference image. Thank you!

[PageFly-Richard]

Hi @leighmarino 

can you share with me the page url

[leighmarino]

Sure, it's machineartmoto.myshopify.com

password: seigao

[PageFly-Richard]

I’m Richard Nguyen from PageFly- Free Landing Page Builder

You can try with this code.

Follow this:

Go to Online Store->Theme->Edit code->base.css ->paste bellow code in bottom of file

.card-wrapper {

    padding: 15px;

}

.card-wrapper.underline-links-hover{

    border: 3px solid #3333337a;

}

.card-wrapper .card__inner {

    border: 2px solid #333;

}

Hope that my solution works for you.

Best regards,

Richard | PageFly

[leighmarino]

Hi,

I'm sorry, but that didn't do anything that I can see. Any other suggestions?

Thanks,

Leigh

[oscprofessional]

Hello @leighmarino 

Go to Online Store->Theme->Edit code->base.css ->Add code at the bottom.

.card-wrapper.underline-links-hover {
    border-width: thin;
    border-style: groove;
}
.card-wrapper {
padding: 22px;
}

[leighmarino]

Still nothing. hmmm.

I added that code in addition to the code you already sent and it did nothing. So I removed the original code you sent and tried just the second code and still, nothing. 

[oscprofessional]

Hello Again @leighmarino 

Do want it like this - on this Page?

 https://machineartmoto.myshopify.com/collections/r1200-1250-gs-a 

[leighmarino]

Yes please. 

[oscprofessional]

Hello Again @leighmarino 

Go to Online Store->Theme->Edit code->base.css ->Add code at the bottom.

.card--card, .card--standard .card__inner {
    padding: 22px;
    border: groove;
    border-width: thin;
}

[leighmarino]

Is this in addition to all of the other code you've already suggested or just this code by itself? 

I added just this code at the bottom by itself and it didn't do anything. I'm not understanding why nothing is working...

[PageFly-Richard]

@leighmarino 

You can try again with this code.

Follow this:

Go to Online Store->Theme->Edit code->theme.liquid->paste bellow code in tag </body>

<style>

.card-wrapper {

    padding: 15px;

}

.card-wrapper.underline-links-hover{

    border: 3px solid #3333337a;

}

.card-wrapper .card__inner {

    border: 2px solid #333;

}

</style>

[leighmarino]

We're getting closer. There is now a border (can it be thinner?) around the products and text, however it is also adding a black border around the images:

It did not work correctly for the collections on the home page - it added a border around the images instead:

[PageFly-Richard]

You can adjust so you can make it thinner

[PageFly-Richard · Accepted solution]

and please remove this code

[leighmarino]

Wonderful, thank you! You are the best.

[PageFly-Richard]

You are welcome @leighmarino  😉

[DejanP]

Hi. I have tired all of the codes, but non of them work. I use the Focal theme. Can you help me?