Change Opacity of Text Box in Slideshow - Venue Theme

Solved
K13
Excursionist
21 0 3

Hello,

 

I would like to make the background of the text box in the slideshow less opaque than the "Semi-Opaque" selection in the theme. My text is white and hard to read on top of the pizza images. I selected the "Semi-Opaque", but it's too opaque and covers the pizza images, so I want to reduce it. I'm using the Venue Theme.

 

Thank you!

 

Kristin

Accepted Solutions (3)

Accepted Solutions
KetanKumar
Shopify Partner
32506 3268 10845

This is an accepted solution.

1. Go to Online Store->Theme->Edit code
2. Asset->/theme-critical.scss.liquid->paste bellow code in bottom of file

.home-carousel--minimal .home-carousel__content.home-carousel__content {
background: rgba(0, 0, 0, 0.5);
}

yes, you have used any color code.
this code use RGB code like white color whit opacite you this one 
background: rgba(255, 255, 255, 0.5);

Want to modify or incorporate custom changes on store
If helpful then please Like and Accept Solution.
Email: bamaniyaketan.sky@gmail.com
Skype : bamaniya.sky
Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | SEO & Digital Marketing | Site Speed Optimization 
If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing

View solution in original post

KetanKumar
Shopify Partner
32506 3268 10845

This is an accepted solution.

please check screenshotReply to Message - Shopify Community.png 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing

View solution in original post

KetanKumar
Shopify Partner
32506 3268 10845

This is an accepted solution.

1. Go to Online Store->Theme->Edit code
2. Asset->/theme.scss.liquid->find bellow class and code on updated of file

.home-carousel--title-5 .section__title-text {
font-size: 1em;
font-weight: bold;
}
.home-carousel--minimal .home-carousel__text {
font-size: 1em;
font-weight: bold;
}

Reply to Message - Shopify Community (1).png
Want to modify or incorporate custom changes on store
If helpful then please Like and Accept Solution.
Email: bamaniyaketan.sky@gmail.com
Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Custom Theme Development | Custom Modifications In To Shopify Theme | SEO & Digital Marketing 
If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing

View solution in original post

Replies 25 (25)
KetanKumar
Shopify Partner
32506 3268 10845

Hello. K13
Please share your site URL.
So that I can check and provide you the exact solution here.

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
K13
Excursionist
21 0 3
KetanKumar
Shopify Partner
32506 3268 10845

Hello, K13
Thanks for shared. 
you have like this.Etalia Rising Crust, Gluten-Free, Organic Pizza. OMG Rising GF Crust!.png

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
K13
Excursionist
21 0 3
Can it be even less opaque and maybe a different color?
KetanKumar
Shopify Partner
32506 3268 10845

This is an accepted solution.

1. Go to Online Store->Theme->Edit code
2. Asset->/theme-critical.scss.liquid->paste bellow code in bottom of file

.home-carousel--minimal .home-carousel__content.home-carousel__content {
background: rgba(0, 0, 0, 0.5);
}

yes, you have used any color code.
this code use RGB code like white color whit opacite you this one 
background: rgba(255, 255, 255, 0.5);

Want to modify or incorporate custom changes on store
If helpful then please Like and Accept Solution.
Email: bamaniyaketan.sky@gmail.com
Skype : bamaniya.sky
Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | SEO & Digital Marketing | Site Speed Optimization 
If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
KetanKumar
Shopify Partner
32506 3268 10845

This is an accepted solution.

please check screenshotReply to Message - Shopify Community.png 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
K13
Excursionist
21 0 3

Awesome! It worked! Thank you!

Can I increase the text size and bold the text, too?

KetanKumar
Shopify Partner
32506 3268 10845

This is an accepted solution.

1. Go to Online Store->Theme->Edit code
2. Asset->/theme.scss.liquid->find bellow class and code on updated of file

.home-carousel--title-5 .section__title-text {
font-size: 1em;
font-weight: bold;
}
.home-carousel--minimal .home-carousel__text {
font-size: 1em;
font-weight: bold;
}

Reply to Message - Shopify Community (1).png
Want to modify or incorporate custom changes on store
If helpful then please Like and Accept Solution.
Email: bamaniyaketan.sky@gmail.com
Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Custom Theme Development | Custom Modifications In To Shopify Theme | SEO & Digital Marketing 
If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
K13
Excursionist
21 0 3
Thank you for your help!!!
jofg
New Member
2 0 0

Hey, I'm also struggling to reduce the opacity of the text background in the slideshow. Could you take a look and explain how I can do this in code?

My site is https://slastik-uk.myshopify.com/?key=b26e6be91b12fb73b7f11bfcee321605c19ed3ad00ff378c2579400e7d530e...

Temp. password: aufays

KetanKumar
Shopify Partner
32506 3268 10845

@jofg 

Thanks for post 

1. Go to Online Store->Theme->Edit code
2. Asset->/theme.scss.liquid->paste below code at the bottom of the file.

.hero-content__title {
background-color: rgba(0,0,0, 0.5); /* change opacity last 0.5 as you like */
}

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
jofg
New Member
2 0 0

SOLVED! Thank you so much 👍

KetanKumar
Shopify Partner
32506 3268 10845

@jofg 

Thankf for update 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
ddrozdov15
Tourist
4 0 3

Hi! can you please help with the same thing? Also, how can i make my slider bigger in height? thanks a lot!

KetanKumar
Shopify Partner
32506 3268 10845

@ddrozdov15 

Sorry you are facing this issue, it would be my pleasure to help you.

Welcome to the Shopify community!😊
Thanks for your good question.

Please share your site URL,
I will check out the issue and provide you a solution here.

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
ddrozdov15
Tourist
4 0 3

hers's my URL. And I do need help with adding a transparency box and removing a small image icon. see you on picture attached. thnak you!Screen Shot 2021-08-29 at 9.45.08 PM.png

KetanKumar
Shopify Partner
32506 3268 10845

@ddrozdov15 

store URL?

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
KetanKumar
Shopify Partner
32506 3268 10845

@ddrozdov15 

thanks for it 

i can't see that section can you please show me

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing