Image overlay color in Venture theme?

Solved
rosegardengraph
Tourist
7 1 0

Every other theme I have tried, there has been the option to change the image overlay color and opacity, yet Venture does not give this option. The current overlay is extremely dark and gray! Is there a way to adjust color and/or opacity in this theme?

Accepted Solution (1)

Accepted Solutions
rosegardengraph
Tourist
7 1 0

This is an accepted solution.

Okay, I ended up figuring this out myself after spending hours figuring out the code. So for anyone reading in the future, here's what you do.

The above steps will work if you want to get rid of the "selection" or transition overlay. To have full range of customization though, you can do the steps below.

Go into your theme.scss.liquid and ctrl + f and look for ".link-block".

 

Should see a style like this:

 

.link-block {
position: relative;
display: block;
@include display-flexbox();
justify-content: center;
padding: 20px 20px;
text-align: center;
flex: 1;
background: {
size: cover;
position: top center;
}

&:after {
content: '';
display: block;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: $color-fixed-black;
opacity: 0.8;
transition: opacity 0.2s ease;
z-index: 1;

 
Or something close to that. I don't remember what my numbers were before as I've changed them now.

Anyway, it's this part that's important

background-color: $color-fixed-black;
opacity: 0.8;
transition: opacity 0.2s ease;

Or whatever your exact numbers say. So first off, you can change the $color-fixed-black to $color-fixed-white if you'd rather have a white button overlay, which I did.

The regular opacity over the buttons is the top number. I set mine all the way down now to 0.2. You can make it anywhere from 0 to 1 though.


The transition opacity was the one I kept referring to as the "selection" opacity, basically showing that you're about to click an option. You can also set it from 0 to 1 per your preference.

View solution in original post

Replies 7 (7)
dmwwebartisan
Shopify Partner
9731 2223 3051

@rosegardengraph 

Please share store URL & screenshot what do you want .

Thanks!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | Bag is a cart drawer that maximizes your sales. View app →
rosegardengraph
Tourist
7 1 0

The overlay over these 4 link blocks in the top and over my collections.  In the first image, I have the first option selected so you can see how dark the overlay already is on the options are when not selected. The color behind that overlay is the exact same color as the menu bar, yet you can't tell because the overlay is so dark. The color on the second image is white but looks super dark gray because of the overlay.

12.PNG13.PNG

rosegardengraph
Tourist
7 1 0

I don't currently have this as my theme because I'm trying to fix this before publishing it, so I don't have my actual URL to share, but here's the preview URL: https://rdjjm0wwodpg1qux-55442145437.shopifypreview.com

rosegardengraph
Tourist
7 1 0

@dmwwebartisan 

Sorry, forgot to tag you so that you could see the reply

dmwwebartisan
Shopify Partner
9731 2223 3051

@rosegardengraph 

please Go to Online Store->Theme->Edit code then go to assets/theme.scss.liquid ->paste below code at the bottom of the file. 

.link-block:after {
    background-color: #fff !important;
    opacity: .8 !important;
}

Thanks!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | Bag is a cart drawer that maximizes your sales. View app →
rosegardengraph
Tourist
7 1 0

@dmwwebartisan this did work! But when I put this in, then it gets rid of everything. I was okay with the overlay that just showed what item you were selecting, it's just the dark overlay when you're not even on the image that I'm trying to get rid of. With this code, both the regular overlay and selection overlay go away. Is there a way to just make the random dark overlay on the color go away without making the standard selection overlay go away too?

Thank you so much!!

rosegardengraph
Tourist
7 1 0

This is an accepted solution.

Okay, I ended up figuring this out myself after spending hours figuring out the code. So for anyone reading in the future, here's what you do.

The above steps will work if you want to get rid of the "selection" or transition overlay. To have full range of customization though, you can do the steps below.

Go into your theme.scss.liquid and ctrl + f and look for ".link-block".

 

Should see a style like this:

 

.link-block {
position: relative;
display: block;
@include display-flexbox();
justify-content: center;
padding: 20px 20px;
text-align: center;
flex: 1;
background: {
size: cover;
position: top center;
}

&:after {
content: '';
display: block;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: $color-fixed-black;
opacity: 0.8;
transition: opacity 0.2s ease;
z-index: 1;

 
Or something close to that. I don't remember what my numbers were before as I've changed them now.

Anyway, it's this part that's important

background-color: $color-fixed-black;
opacity: 0.8;
transition: opacity 0.2s ease;

Or whatever your exact numbers say. So first off, you can change the $color-fixed-black to $color-fixed-white if you'd rather have a white button overlay, which I did.

The regular opacity over the buttons is the top number. I set mine all the way down now to 0.2. You can make it anywhere from 0 to 1 though.


The transition opacity was the one I kept referring to as the "selection" opacity, basically showing that you're about to click an option. You can also set it from 0 to 1 per your preference.

View solution in original post