How to add an opaque image border in Dawn theme?

Store Design
1

Hi, how do I add an opaque image border to the images in my collection list only? Here is an example of what I’m looking for but I want the color to be opaque black. Thank you :slightly_smiling_face:

url: https://lua-wolves-crystals.myshopify.com/

password: bahcri

Screen Shot 2022-09-16 at 3.25.29 AM.png
Screen Shot 2022-09-16 at 3.25.29 AM.png2056×1010 418 KB

2

Hi there!

This code, added to the bottom of your base.css stylesheet should do the trick:

.collection-list-wrapper .card {
	background: black;
	padding: 20px;
}

This will produce the following effect:

valiermedia_0-1663265247787.png
valiermedia_0-1663265247787.png1878×1653 600 KB

1 Like
3

Thank you so much! I just have one more question. How do I make the black color to be opaque, semi-transparent? :slightly_smiling_face:

4

Happy to help! In that case, you can use the following:

.collection-list-wrapper .card {
	background: rgba(0,0,0,0.7);
	padding: 20px;
}

The “0.7” in that represents 70% opacity, so change the number to increase or decrease the opacity as you see fit :slightly_smiling_face:

1 Like
5

Hi, thank you! I’ve tried the code but it didn’t have an effect on the opacity color.

6

Hi there!

I just checked the page and you upped the opacity to 90% by setting the code to 0.9, which is almost pure black. You will want to reduce the 0.7 if you want the black to be more transparent. Try lowering that value and you will see that it works as expected.

Once you are able to confirm this, please mark my previous post as an accepted solution to help others accomplish this same effort :slightly_smiling_face:

7

Ah alright. Fixed it! Thank you so, so much for your help. :slightly_smiling_face: