How to increase the background opacity of the lightbox?

[5high-photohub]

Hi again Laura,
reminder: this is to try to increase the opacity of the background to the LightBox (so the website behind it is much fainter).
code I’ve tried already with no effect is:

COPY CODE

.mfp-bg {
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1042;
overflow: hidden;
position: fixed;
background: #020202;
opacity: 0.9 !important;
filter: alpha(opacity=80);
}

and…

COPY CODE

opacity: 0.99 !important;
filter: alpha(opacity=99);

and this…

COPY CODE

.mfp-bg {
  background-color: rgba(0,0,0,0.9) !important;
}

I’ve also attached a screenshot to clarify the area that I want to make darker.

I’m also slightly confused as to whether this is a theme or rtmedia setting??

Thanks – I’ll post login details below.

[5high-photohub]

Ok here’s the url: https://www.the-photohub.co.nz/
The menu login link redirects to wp-login.php which has a CAPTCHA code on it too.

Admin login details:
username = ph-tester
p/word = z0eI$mdkhSk6

I’ve disabled the BPS Pro quarantine feature so you can test css edits in either Kleo custom css or my child theme style.css but if you need to do anything more drastic please can you first put it into Maintenance Mode?

Go to BPS Pro > Maintenance Mode; then go to MM Options settings and whitelist your ‘Reconmmended IP address’ in the ‘Maintenance Mode IP Address Whitelist Text Box’; SAVE OPTIONS; then TURN ON.

When you’re finished please TURN OFF MM again! Thanks.

Looking forward to your thoughts about this.

Many thanks, Jenny

[sharmstr]

Its rtmedia.

Anyhow this works for me. See attached example.

COPY CODE

.mfp-bg {
opacity: 1 !important;
}

by default its set to .08

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

[5high-photohub]

Oh, maybe I’m looking at the wrong thing? When you open your image above, what controls the surrounding background overall? – where the arrows sit in the lightbox? – see attached.
I have tried tracking down this css but can’t seem to select it.

[sharmstr]

There are two different things happening here. On this forum, you get arrows that you are pointing to. In rtmedia the arrows are a lot closer to the image. The overall background is the css I gave you. I’ve changed it to red using the same .mfp-bg class selector. See attached.

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

[5high-photohub]

Thanks sharstr – it has worked at last! Perfect! Not sure why not before, maybe a caching thing (though I do usually clear the cache on page review) or maybe I stuffed up the code somewhere…
Anyway all sorted and thanks for your patience!

[sharmstr]

anytime

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

[Author]

Posts