Lightbox background transparency

Hello @tyco72

Thank you for reaching out to us!
Please rest assured, we will help asap. Please give me a bit more details about your issue and what does not work.
Also sending us the URL of your gallery would really help us investigate this faster.

Looking forward to your reply!

Have a nice day ! ??

All the best,
Marian

Hi, thank you. It is not a technical issue. It is only about how to set the transparency grade, or opacity, of the background in the lightbox, in the area not covered by the photo. You can open for example this gallery:
https://www.tycospages.com/cats-and-dogs/cats-photo-gallery/#cat_beauty

When you view a small photo, as the second photo on the right in the second row (the cat behind the grass), the thumbnail in the background is still too much visible (for me). I would like disable at all the transparency, or reduce it much more.

Hello again @tyco72

We are sorry for the delay !
So you want to remove all the background from the lightbox, that is, you want me to make your background from the lightbox completely black? or completely transparent to see the website?
I want to clarify the problem very clearly so that I can solve it in the best way.
Thank you for understanding !

Please let me know if you have some more questions !

All the best,
Marian

Hi, yes I would like to set the background black, or anyway darker than now.

Hello @tyco72

We have created a Custom CSS for your background in lightbox !
How can you add a Custom CSS?
Very simple, go to WordPress dashbord -> Apparance -> Customize -> Additional CSS -> insert the code below -> after go to “Save”.
.modula-fancybox-slide–image{
background-color:black;
}

Please let me know if you have some more questions !

Warmly,
Marian

Hi, thank you. I have tried, but the background doesn’t change.

Hi @tyco72

Can you send me a screenshot? From Appearance -> Customize -> Additional CSS? to see how you inserted the code?

Please let me know if you have more questions !

All the best,
Marian

Hi, here the screenshot:
https://drive.google.com/file/d/1TPh0lJpbCnO1IsHjQ3BGdcjswoVSm6Wq/view?usp=sharing

Hi again @tyco72

You can copy the code below exactly as it is because you have the wrong parentheses.

.modula-fancybox-slide–image{
background-color:black;
}

Please let me know if you have more questions !

Warmly,
Marian

Hello, I have copied it again, but the parentheses are correct. Maybe they look different in the screenshot. You can check it better viewing the code of the page directly in your browser, pressing “CTRL+U” in the page of the gallery.

Hello @tyco72

I am extremely sorry it was my fault I did not notice a small detail in CSS, the correct code is:

.modula-fancybox-slide--image{
background-color:black;
}

I apologize once again, and thank you for your understanding!

All the best,
Marian

• This reply was modified 4 years, 5 months ago by visi19.

Hi! Thank you very much! Now it works, and also when inserting a custom color with hex value, example:

.modula-fancybox-slide–image{
background-color:#1c1c1c;
}

Is there also a command to set a custom transparency? Something like:
background-opacity:90;

It would be very useful.

Hello @tyco72

Of course, you can add in that code I sent you “opacity: 0.7;” or what opacity you want to have in the lightbox background.
https://gyazo.com/e60f85db07c3668da0877bab206cdc2c
I hope I could help you!

Please let me know if you have some more questions !

Have a nice day ! ??

Warmly,
Marian

Hi thank you, it works!

Just to know, how it should be. What is the syntax if I want keep the default background color, and change only the opacity? I have tried something like:

.modula-fancybox-slide–image{
background-opacity: 0,90;
}

but it doesn’t work. With or without “-“

Hello @tyco72

Please just copy the piece of code below and insert it instead of the previous one.
If I send you a piece of code in CSS, please respect it.

.modula-fancybox-slide--image {
background-color:#1c1c1c;
opacity:0.7;
}

I hope it works for you ?? !

Please let me know if it’s work !

Warmly,
Marian