Viewing 18 posts - 1 through 18 (of 18 total)
  • Author
    Posts
  • August 27, 2019 at 6:36 am #1131220
    ofekw

    Hello Team,

    Clicking on Read More... opens a popup window where the background is grayed out.
    When creating a subdomain, The popup opens against opaque white background. How can I replace the opaque white background with a grayed out background?

    Code block starts with <div id="more-info" class="gallery-more-info mfp-hide">

    Thanks,

    ofekw

    August 29, 2019 at 2:46 pm #1131890
    Vinay

    Hey ofekw,

    Thank you for sharing the details.

    Please check the Subdomain link you have provided again? It is not working for me and I’m unable to notice the issue you mentioned. If possible please post a screenshot of the issue.

    Best regards,
    Vinay

    August 29, 2019 at 10:59 pm #1132125
    ofekw

    Hi Vinay,

    Here is a link to a few pages in the subdomain. The issue happens when your click on Read More…

    Thanks,
    ofekw

    September 2, 2019 at 8:27 am #1132866
    Vinay

    Hi,

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

    CSS Snippet:

    
/* CSS - */

.mfp-container {
    background: gold !important;
}

#more-info {
    background: transparent !important;
}

    Best regards,
    Vinay

    September 2, 2019 at 8:39 am #1132872
    ofekw

    Hello Vinay,
    Thanks for your support.
    This code has created an opaque gold background – see link below.
    I am looking to create a translucent gray background that shows the grid behind the Pop-up window, see example link.
    Please advise,
    ofekw

    September 5, 2019 at 9:14 am #1134246
    Vinay

    Hi,

    Please replace the word “gold” and “transparent” to the rbga color value of your choice or replace the earlier code with the below code.

    /* CSS – */

    .mfp-container {
    background: transparent !important;
    }

    .mfp-bg {
    background: rgba(0,0,0,.8) !important;

    }

    #more-info {
    background: rgba(255,255,255,1)!important;
    }

    Best regards,
    Vinay

    September 10, 2019 at 10:50 pm #1136821
    ofekw

    Thanks Vinay,

    Much appreciated!

    ofekw

    September 11, 2019 at 7:00 pm #1137194
    Victoria

    Hi ofekw,

    Glad you got it working for you! :)

    If you need further assistance please let us know.

    Best regards,
    Victoria

    September 16, 2019 at 12:28 pm #1138792
    ofekw

    Hi Vinay,

    The code works perfectly for pop-ups. However, the semi-transparent gray background now shows behind gallery images that are enlarged, i.e. the grid is showing in the background which is distracting. The idea is to keep the background white when enlarging photos.

    What code will affect the pop-up only and not the grid enlargements?

    Thanks,

    ofekw

    September 18, 2019 at 10:45 am #1139392
    Ismael

    Hi,

    Thank you for the update.

    You should be able to set the background of the lightbox container to any color using css. Try this one.

    .mfp-container {
    background: #ffffff !important;
}

    Make sure to toggle the Performance > File Compression settings after adding the code to regenerate the stylesheets.

    Best regards,
    Ismael

    September 18, 2019 at 11:32 am #1139415
    ofekw

    Hi Ismael,

    Have updated the code but background is still grayed out. Perhaps there is a conflict with the code that sets the grayed-out background for the pop-up windows:

    .mfp-container {
background: transparent !important;
}
.mfp-bg {
background: rgba(0,0,0,.8) !important;
}

    Is there a way to keep the grayed out background for the pop-up windows (when Read More.. is clicked at the header) and have white background for enlarged photos?
    See url below for desired behaviour.
    Thanks,
    ofekw

    September 19, 2019 at 10:31 am #1139836
    Ismael

    Hi,

    Did you toggle the Performance > File Compression settings after adding the code?

    Is there a way to keep the grayed out background for the pop-up windows (when Read More.. is clicked at the header) and have white background for enlarged photos?

    That is possible but it will require some modification. Unfortunately, we can’t help you with that. By default, the markup of the lightbox container will be the same regardless of the source or of the event that triggers it, so we won’t be able to identify which is which.

    Best regards,
    Ismael

    September 19, 2019 at 10:42 am #1139839
    ofekw

    Hi Ismael,
    Thanks for following up. Yes, have toggled the Performance > File Compression settings, cleared the cache and did a hard refresh to the browser.
    Can you please inspect the css of the site below – it has the exact required behaviour so could probably be able to copy the required code from there.
    Regards,
    ofekw

    September 20, 2019 at 4:30 am #1140093
    Ismael

    Hi,

    Thank you for the update.

    The following css code applies the white background color to the lightbox gallery container.

    .mfp-gallery {
    background: #fff !important;
}

    Best regards,
    Ismael

    September 20, 2019 at 5:36 am #1140107
    ofekw

    Thanks Ismael!
    Very much appreciated,
    ofekw

    September 22, 2019 at 11:20 am #1140619
    Rikard

    Hi,

    Great, I’m glad that Ismael could help you out. Please let us know if you should need any further help on the topic or if we can close it.

    Best regards,
    Rikard

    September 22, 2019 at 1:01 pm #1140623
    ofekw

    Thanks Rikard,
    Topic is closed.
    Regards,
    ofekw

    September 23, 2019 at 8:56 am #1140876
    Rikard

    Hi,

    Thanks for letting us know, I’ll close this thread for now then. Please open a new thread if you should have any further questions or problems.

    Best regards,
    Rikard

  • Author
    Posts
Viewing 18 posts - 1 through 18 (of 18 total)
  • The topic ‘Magnific Popup background’ is closed to new replies.