Tagged: ,

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • January 18, 2017 at 9:50 pm #735549
    scottvarga

    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?

    Thanks!

    January 20, 2017 at 3:56 pm #736546
    Yigit

    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,
    Yigit

    January 21, 2017 at 6:39 pm #736833
    scottvarga

    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?

    http://www.rotatorcreative.com/Testing/popOverWindow.jpg

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

    http://rotatorcreative.com/Testing/popOverWindow2.jpg

    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, 10 months ago by scottvarga.
    January 25, 2017 at 7:38 pm #738535
    Yigit

    Hi,

    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,
    Yigit

    January 25, 2017 at 8:38 pm #738564
    scottvarga

    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!

    January 25, 2017 at 9:02 pm #738581
    Yigit

    Hey!

    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.

    Regards,
    Yigit

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