Add a box behind text on featured collections on Sahara theme

Store Design
,
1

Hi

I find the font does not stand out enough on my featured collections images.

I am looking to add a almost transparent semi see through (or something that matches the colour) box behind the text on my featured collections to make the wording stand out more.

I am using Sahara theme.

Can anyone assist please?

2

Hi @Sharon-W ,

Please go to Actions > Edit code > Assets > base.css file and paste this at the bottom of the file:

.media.media--overlay.card-collection__media:after {
    content: '';
    background: #0000003b;
}
3

can you give me images that explain what you want to do because your problem is not clear enough for me

4

1234.png
1234.png1920×1080 270 KB

5

Hi @Sharon-W ,

Have you tried my tutorial? Is it what you want :blush:

6

You can make the text in box over the image, i will give you an example, because it is never stand out on the image and you will harms the customer experience and this will effects your store salles and Customer Retention to your store

Screenshot_20240711-185957_Chrome.jpg
Screenshot_20240711-185957_Chrome.jpg1080×1687 55.6 KB

7

Hi

Thank you. Please see attached image, where the writing is on the
collections, i would like a transparent banner put behind it to make the
text stand out a bit more

8

Hi @Sharon-W ,

Please go to Actions > Edit code > Assets > base.css file and paste this at the bottom of the file:

.media.media--overlay.card-collection__media:after {
    content: '';
    background: #0000003b;
}
9

I seen it you can make the font bigger and bolder and change the color to something like white like this image

Screenshot_20240711-193844_Chrome.jpg
Screenshot_20240711-193844_Chrome.jpg1080×1148 75 KB

10

Thank you, this is not what I am looking for. I am looking to place a more definitive banner over the text to highlight the text. But thank you

11

Thank you, can you provide an example of what this will look like? and also, do I have to manually go in and apply it or should it apply automatically?

12

So that i can understand what you are looking for send me an example

13

Hi @Sharon-W ,

Please go to Actions > Edit code > Assets > base.css file and paste this at the bottom of the file:

.card-collection__title {
    position: relative;
}
.card-collection__title:after {
    content: '';
    background: #0000003b;
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
}

You can change the background as you like, it will display like this:

Screenshot.png
Screenshot.png1393×129 180 KB