Is there a way to customize the background color of the Product Gallery widget?
After reading the api reference for the widget, it doesn't seem like there is an option, but I wanted to check since some other widgets do in fact have that option.
Answers
-
Hi @josheewa
The gallery itself doesn't have a background, images may have a background (but that's not related to the gallery itself... that depends on the image). You can add the background you want in the CSS file of your project, for example: https://jsfiddle.net/nrdw9ezu/
Best regards,
Tamara
0 -
Thanks for the reply. I do have an applied background that is black, but no matter what element I apply the background color to, the gallery itself doesn't change. I originally assumed that it would work like that but I haven't had any luck yet. I've tried re-declaring a black background for the container divs, the main and body, and the only thing I've seen is I can make the whole gallery black, since the div on top just covers everything if I make all divs have a black background.
If it changes anything, my project is being built with React/Next.js.
0 -
Hi @josheewa
Can you please create a small project in JSfiddle or any code editor that can run this independently to re-create this? or share your code here?
By the way, we have a beautiful demo website, maybe what you are looking for can be found there:
https://demo.cloudinary.com/product-gallery/?editor
Best,
Tamara
0 -
Hi @Tamara
I tried for a while but wasn't able to figure out how to put it on JSFiddle. I made a new Github repo with the product gallery part isolated (https://github.com/josheewa/product-gallery-test).
I've also deployed it to Vercel in case that helps: https://product-gallery-test.vercel.app/
Thanks.
0 -
That's really weird, I just tried again, and both work for me (regular browsing and incognito). I thought the Github might be private for some reason, but I checked and it isn't. What does each one say specifically?
0 -
Hi @josheewa,
Your code looks great, the images that are part of this gallery widget are using
c_padthat pads them with a white background (theb_rgb:FFFFFF), if you want to change the background to black, try changing the background to this:b_blackinstead of theb_rgb:FFFFFF.Please let me know if you have any further questions,
Best,
Tamara
0 -
Ohh that makes a lot of sense. I was able to add a transformation to each image with both b_black and b_transparent, and that fully solves the issue.
Thank you so much for the assistance,
Joshua
0
