How can I add a transparent rectangle to my slideshow photos on Yuva Theme?

Solved

How can I add a transparent rectangle to my slideshow photos on Yuva Theme?

DanSal8
Shopify Partner
26 0 3

I want to add a slightly transparent white rectangle that covers the text in all my slideshow photos like the one in the photo. How can i do this? Theme code?

 

I am using the Yuva Theme 

 

here is my store link 

Buccia di Mela (a6f643.myshopify.com)

 

Screenshot (933).pngScreenshot (934).png

 

Accepted Solution (1)

Vinsinfo
Shopify Partner
486 165 169

This is an accepted solution.

@DanSal8 Please follow below steps to display background color of the text container in banner and let me know whether it is helpful for you.

 

1. From admin, go to "Online Store" -> "Themes".
2. Click "Customize" button from the current theme.

3. Select the slideshow section and paste below code in the "Custom CSS" field like below attached image.

 

.yv-banner-container .yv-banner-content {
    background-color: #f5f4f2b0 !important;
    margin: 30px;
    padding: 30px;
    text-align: center;
}

 

priyavinsinfo_1-1710166166219.png

4. Save.

 

Now, the slides content background will display like below attached image.

priyavinsinfo_0-1710165981184.png

 

Please provide your support by click "Like" and "Accepted" if our solution works for you. Thanks for your support.

Please reach out to bizdev@vinsinfo.com for any enquires related to Shopify.
Our Services: Custom Theme Development, Theme Customization, Custom Feature Implementation, Data Migration, Custom APP Development, Website Optimization and Google Merchant Center Support

View solution in original post

Replies 4 (4)

gmeo
Shopify Partner
16 2 2

Hi,
Can you share the password to enter your store?
This problem is very simple, I can help you
Thank you!

Trong Nguyen Quoc

JasmeetVT14313
Shopify Partner
292 63 77

Hello @DanSal8 

Try adding below code to the bottom of "banner.liquid" section file

<style>
.banner-section .yv-banner-content::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgb(0, 0, 0, 0.5);
}
</style>

 

- VTN Customer Dashboard enhances your customer's dashboard with advanced features, profile management, and order tracking. Free trial available.
- Feel free to contact me at jasmeet.kaur@vtnetzwelt.com

Vinsinfo
Shopify Partner
486 165 169

This is an accepted solution.

@DanSal8 Please follow below steps to display background color of the text container in banner and let me know whether it is helpful for you.

 

1. From admin, go to "Online Store" -> "Themes".
2. Click "Customize" button from the current theme.

3. Select the slideshow section and paste below code in the "Custom CSS" field like below attached image.

 

.yv-banner-container .yv-banner-content {
    background-color: #f5f4f2b0 !important;
    margin: 30px;
    padding: 30px;
    text-align: center;
}

 

priyavinsinfo_1-1710166166219.png

4. Save.

 

Now, the slides content background will display like below attached image.

priyavinsinfo_0-1710165981184.png

 

Please provide your support by click "Like" and "Accepted" if our solution works for you. Thanks for your support.

Please reach out to bizdev@vinsinfo.com for any enquires related to Shopify.
Our Services: Custom Theme Development, Theme Customization, Custom Feature Implementation, Data Migration, Custom APP Development, Website Optimization and Google Merchant Center Support
DanSal8
Shopify Partner
26 0 3

It worked, thank you so much