Tagged: ,

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
  • #735549

    I don’t have a link to share as I am working on a localhost server.

    I have a button on a page that launches an iframe that loads another page into that iframe. example button link: ?page_id=465&preview=true?iframe=true

    How do I get rid of the black solid black rectangle and shadow that shows up while keeping the close “X”? I just want the page content I have loaded into the iframe to float over the background.

    With CSS I am able to change the background overlay color and opacity

    /*Lightbox fullscreen overlay*/
    .mfp-bg {
    background-color:#aa2f22 !important;
    .mfp-zoom-in.mfp-ready.mfp-bg, .mfp-zoom-in.mfp-ready .mfp-preloader {
    opacity: .65;

    I am also able to make the background of the page that loads into the iframe transparent

    /*Page or element*/
    #bg-transparent {
    background-color: transparent;

    I just don’t know how to keep the lightbox interface close button but drop the black rectangle background and shadow. Also, can I make this iframe larger or even fullscreen?



    Hey Scott,

    Please try adding this code to the Quick CSS section under Enfold > General Styling or to your child themes style.css file:

    .mfp-bg {
        background: transparent;

    Best regards,


    Thanks Yigit,

    I already have that CSS in my custom style sheet and it works as it removes the background of what I think is the page but as you can see from this screenshot there is still a dark background and a drop shadow. Also, how do I increase the size of this iframe?


    and with your specific cod it just removes the lightbox overlay not the background of the iframe.


    My goal would be to put a form or text like terms over the screen showing the full image behind it with no iframe background color.

    Thanks for your help

    • This reply was modified 7 years, 4 months ago by scottvarga.


    Can you please post a link to your page and point out the lightbox?
    It would depend on what you are dislaying in your lightbox. You need to set that elements background color to transparent.

    Best regards,


    Thanks Yigit.

    I have pasted a link to our site in the private content area below. If you scroll to the bottom and click the “START THE CONVERSATION” button in the footer you get a light box that populates with a form page. Currently this form page has a white page background.

    When I remove that white page background from the form page with this code:

    #bg-transparent {
    background-color: transparent;

    It removes the white page background AND THAT IS GREAT, but it leaves the solid dark color small box background and drop shadow.

    We do not want the small box background OR the drop shadow that is around the edges of it. We only want the “X” to close it and the form page to overlay the screen behind it keeping the fullscreen .05 opacity black overlay.

    We would also like to increase the size of the window that opens the form in it.

    Thanks again!



    Please refer to my post here – https://kriesi.at/support/topic/lightbox-for-mailchimp-form/#post-582439. I believe that will be a lot easier for you. You can simply set background to “transparent” in custom CSS code.


Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.