how to change lightbox background for product detail pages

Site URL: https://vuvuzela-cardioid-7tl5.squarespace.com/artworklist/p/mohanas-eyes

squarespace 7.1 

pw:  g0)Zq|Qdr@6Gv-IP9uXU

when looking at any product detail page i have, you can see the full sized image (in a lightbox) by clicking on the image in the page.  the lightbox is white and i'd like it to be black. 

I looked at theme editor and checked Galleries -> lightboxbox background  but its already set to the color I want to use. so is there some other place i can set this?  

Thank you for the response!

turns out i also need to set the color on the lightbox  "X" button since its black by default.  and is there a way to set the opacity?  I think i'd like to set it at 100% so you can't see anything under it. 

John

On 2/8/2022 at 9:45 PM, genfoch01 said:

Thank you for the response!

turns out i also need to set the color on the lightbox  "X" button since its black by default.  and is there a way to set the opacity?  I think i'd like to set it at 100% so you can't see anything under it. 

John

Use this new code

.gallery-lightbox-background {
    background-color: rgba(0,0,0,0.5);
}
button.gallery-lightbox-control-btn polyline {
    stroke: green !important;
}

thanks again for the help!   

so the

.gallery-lightbox-background {
    background-color: rgba(0,0,0,0.5);
}

did work to make the background black i used rgba(0,0,0,1) to try to get a completely opaque background 

                    which got me close but not quite 100%

the 

button.gallery-lightbox-control-btn polyline {
    stroke: green !important;
}

seems to work on the scroll buttons on each side of the picture but not on the  "X " button that should appear on the upper right hand corner of the picture.  its black by default so i need to change it to some other color. 

finally figured it out.   I can't stress how helpful you have been. Thank you so much

.gallery-lightbox-close-btn {
    color: white;
}

On 2/7/2022 at 6:45 AM, tuanphan said:

Add to Design > Custom CSS

.gallery-lightbox-background {
    background-color: black;
}

 

Dear Tuan,

This works great I have a problem with it in mobile.

 

It  works on the first link and not on the second one below in mobile.

 

( works)        https://swan-kangaroo-7t96.squarespace.com/portfolio/digital/eco-print-series

 

(doesn't work)     https://swan-kangaroo-7t96.squarespace.com/portfolio/falling-rockets

 

This image will show you the problem:

 

Site:
https://swan-kangaroo-7t96.squarespace.com

Password:
atlantic2B

 

Big thanks,

George

On 10/8/2022 at 10:55 PM, gcart said:

Because default opacity is 0.9, you need to set it to 1

11 hours ago, tuanphan said:

Because default opacity is 0.9, you need to set it to 1

That's a big help.

Thanks,

George