Debut Theme - how to add border around images (collection list, featured collection)

Solved
Highlighted
Shopify Partner
1427 193 476

Try adding it at the bottom of theme.scss.liquid in your assets folder.

If my solution helped you, please like and accept as solution!
If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish :D
1 Like
Highlighted
Tourist
8 0 0

Thanks that work adding the code below, but it only added a border to the product images on collections page. How do I also add the border to a collection image in collection grids?    Can I also change opacity of the border?  Dont want it so noticeable.    Thank you for your help.  

}
.product-card__image-with-placeholder-wrapper img {
    border: 1px solid grey;
}
0 Likes
Highlighted
Shopify Partner
1427 193 476

You can set it using rgba instead of a straight up color:

 

.product-card__image-with-placeholder-wrapper img {
    border: 1px solid rgba(200,200,200,.5);
}

So that would be a grey color with it's opacity set to .5, you can increase or decrease the .5 depending on how subtle you want it to be. As far as your collection grids, I'm not sure what you mean. If you can post a link to your page and password if password protected and point out what section you're referring to, I can inspect the code and provide you with the correct style.

If my solution helped you, please like and accept as solution!
If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish :D
0 Likes
Highlighted
Tourist
8 0 0

My shop is photographersdigitalmarket.com

The homepage has a collection list called Most Popular Categories I would like those images to have a border as well.  I also use a collection list on various other pages in the shop like https://photographersdigitalmarket.com/pages/in-the-box-templates.

 

 

This is a screen shot of the home page that has a collection list.  I would like the collection list images to have borders as well.  

 

Screenshot (14).png

 

This is a screen shot of a collection page that has the borders around the images using your code.  Just want the collection lists to also have a border.  

 

Screenshot (15).png

0 Likes
Highlighted
Shopify Partner
1427 193 476
.collection-grid-item a {
    border: 1px solid rgba(200,200,200,.5);
}

Should do the trick.

If my solution helped you, please like and accept as solution!
If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish :D
1 Like
Highlighted
Tourist
8 0 0

Thank you those worked great!  Unrelated question I cant seem to resolve is the spacing of the collection list, it is cutting off the second line.  How to I make sure the entire collection title is seen.  You can see it on the homepage or the other page above I linked.  I have tried adjusting 

.collection-grid-item {
    margin-bottom: 0;
}

tried changing that to 90px and no change happened.   

0 Likes
Highlighted
Tourist
5 0 2

Hi there,

 

I have followed all of the above steps but I want the border to be offset inside the collection cover images. I've tried adding offset CSS to the collection-grid-item div style section but no luck.

 

Any thoughts on why it's not working?

0 Likes
Highlighted
Shopify Partner
1427 193 476

Could you post your store url? For a border offset you'll need to us an "outline" instead of a border, because outline has an offset property.

If my solution helped you, please like and accept as solution!
If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish :D
0 Likes
Highlighted
Excursionist
19 1 5

I put the code at the end of themcss liquid and nothing changes can i have some help?

0 Likes
Highlighted
Tourist
20 0 1
Hi, can you please help me I dont know how to code and dont know where to write the case. Thanks
0 Likes