rtmedia lightbox issue

[Carly]

I use rtmedia and the lightbox doesn’t seem to be displaying properly. The background is opaque and the sidebar is attached to lightbox, narrowing the comments area and making it look rather messy. Could someone please take a look at this for me please? Screenshots attached to illustrate.

[Anonymous]

Hi @costyclan, I will check the compatibility with rtmedia once to check it. For now you can add this css to solve the issue..

.bp-user #buddypress {
    padding-top: 3% !important;
    background: #fff !important;
    margin-top: 40px !important;
}
.mfp-bg {
    background: rgba(0, 0, 0, 0.74) !important;
}

Regards

[Carly]

I’ve added the code and the lightbox is no longer opaque but the profile is still attached to side. See attached screenshot.

[Carly]

I’ve removed code as it made the entire activity area white (see attached)

[Anonymous]

Hi @costyclan,

Lightbox is appearing in the content division and it also include the Sidebar div along with the overlay.

Please try this :

.mfp-container.mfp-ajax-holder #secondary {
  display: none;
}
.mfp-container.mfp-ajax-holder .buddypress-content {
  max-width: 100% !important;
}

It will remove the profile section and place the pop-up in center of the page.

Regards

[Carly]

does this go in custom.css of child theme @pallavi?

[Carly]

I put it in child custom.css and it’s working thank you. How can I make the background of lightbox solid white, it’s currently transluscent. The previous code made the entire ativity feed white?

[Anonymous]

Hi @costyclan, The last code was only for lightbox overlay not for bp activity area..

Try this code:

.mfp-bg {
  background: rgba(255, 255, 255, 1) none repeat scroll 0 0 !important;
}

Regards

[Carly]

thank you so much for your support @pallavi, this is working and I almost have it the way I want although now the entire background and lightbox background is white. I would like the original page background to stay as #f9f7f6 and just the lightbox window background as #ffffff
Is this possible?

[Anonymous]

Hi @costyclan,

Try this code:

.mfp-bg {
background: rgba(249, 247, 246, 0.87) !important;
}
.rtmedia-container {
    background: #fff !important;
    padding: 3% 0 !important;
}
.mfp-content.mfp-content .rtm-lightbox-container {
    background: #fff !important;
}

Regards

[Carly]

perfect. wonderful @pallavi, thank you.

[Anve S.]

HI @costyclan

Great 🙂 . I will close this thread now, if you have any other concern ,please create a new topic.

Regards
Anve