nooneshome Posted May 22, 2023 Posted May 22, 2023 (edited) How do I change the background color of an enlarged/zoomed product image? When I click on the thumbnail of the product I get an enlarged image with a black border/background color. I'd like it to be white. How do I do that? I can't seem to find the right search term to find an answer. Thanks in advance. https://www.granolafromanothermother.com/shop/granola-10-oz Edited May 22, 2023 by nooneshome
Solution tuanphan Posted May 25, 2023 Solution Posted May 25, 2023 Add this to Design > Custom CSS /* Lightbox background color */ .yui3-lightbox2 .sqs-lightbox-overlay { background-color: white !important; } Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)
nooneshome Posted May 26, 2023 Author Posted May 26, 2023 Anyway to make the background color opaque and not transparent and make the left and right arrows and X (close box) black?
tuanphan Posted May 28, 2023 Posted May 28, 2023 On 5/27/2023 at 5:08 AM, nooneshome said: Anyway to make the background color opaque and not transparent and make the left and right arrows and X (close box) black? Use this new code /* Lightbox background color */ .yui3-lightbox2 .sqs-lightbox-overlay { background-color: rgba(255,255,255,0.5) !important; } .yui3-lightbox2 .sqs-lightbox-close, .yui3-lightbox2 .sqs-lightbox-previous, .yui3-lightbox2 .sqs-lightbox-next, .yui3-lightbox2 .sqs-lightbox-meta-trigger { color: black !important; } Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment