Viewing 18 posts - 1 through 18 (of 18 total)
  • Author
    Posts
  • #1131220

    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

    #1131890

    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

    #1132125

    Hi Vinay,

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

    Thanks,
    ofekw

    #1132866

    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

    #1132872

    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

    #1134246

    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

    #1136821

    Thanks Vinay,

    Much appreciated!

    ofekw

    #1137194

    Hi ofekw,

    Glad you got it working for you! :)

    If you need further assistance please let us know.

    Best regards,
    Victoria

    #1138792

    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

    #1139392

    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

    #1139415

    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

    #1139836

    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

    #1139839

    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

    #1140093

    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

    #1140107

    Thanks Ismael!
    Very much appreciated,
    ofekw

    #1140619

    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

    #1140623

    Thanks Rikard,
    Topic is closed.
    Regards,
    ofekw

    #1140876

    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

Viewing 18 posts - 1 through 18 (of 18 total)

The topic ‘Magnific Popup background’ is closed to new replies.