background lightbox

  • Resolved Jacqueline

    (@wplien)


    4 years, 1 month ago

    Hello,

    first of all I want to thank you for the excellent theme you created and the great support you offer to make it work perfectly!

    My question is about the background of the lightbox, that shows when clicking the magnifying glass. I managed to change the lightbox background from black to grey (thanks to support I found on this forum ?? and I would like to make a few more changes to it:

    * The top and bottom of the page are grey. Can I change this into white as well?
    * I would like to hide the image title at the bottom. Is that possible?
    * The white arrow (to go to the next image) doesn’t show on the white background anymore. Can the colour of the arrow be changed?

    Could you help me with this? Thank you so much in advance!

    Kind regards,
    Jacqueline

    The page I need help with: [log in to see the link]

Viewing 6 replies - 1 through 6 (of 6 total)

  • Hi,

    We are most certainly thankful for your great feedback.

    Sorry but not getting the 1st and 2nd issue. Please share a snapshot, if possible marked the area. That will help to inspect the issue and give you the code accordingly.

    2. do you mean the caption of the images?

    3. Please try to add the below CSS code from the Appearance > Customize > Custom CSS, and check.

    .owp-product-nav .owp-nav-link.prev {
    background-color: #04047f;
}

    PS- change the color code as per your need.

    Thread Starter Jacqueline

    (@wplien)

    Hi Abishek,

    many thanks for your quick answer!

    On this link, you can find a snapshot with the marked areas:
    https://www.dvina.nl/example-lightbox/

    It’s an example of how a lightbox is shown when you click on the magnifying glass on a single product page.

    1. Is is possible to hide the grey bars on top and bottom of the lightbox, or turn their colour into white so that they show anymore?
    2. Is it possible to hide the image title on the bottom of the lightbox?
    3. Is it possible to change the colour of the arrow on the right side of the lightbox (invisible on the snapshot, probably because the arrow and background are both white).

    I added the CSS-code you suggested into the Extra CSS section, but I didn’t see any change.

    I would really appreciate it if you could help me with my questions. Thanks again for your time!

    Kind regards,
    Jacqueline

    Thread Starter Jacqueline

    (@wplien)

    Hi Abishek,

    I’ve been trying to find answers to the questions I have (see above), but I don’t manage to figure out what to do. I would really appreciate your input or advice. If you have any further questions about the issues I mentioned, please let me know. Thank you so much for your help.

    Kind regards,
    Jacqueline

    Abhishek

    (@abhikr781)

    Hi,

    Try to use the below code to change the background color but the icon will not appear (white icon on white background). Since the icon is an image, you can’t change its color.

    .pswp__ui--fit .pswp__caption, .pswp__ui--fit .pswp__top-bar {
    background-color: rgb(255 253 253 / 30%);
}

    Unfortunately, There is no option to add the image title.

    Thread Starter Jacqueline

    (@wplien)

    Hi Abhishek,

    thanks again for your support! I managed to change the background color and to hide the bar at the bottom of the gallery image. The image caption in the bar is hidden as well. I’m very happy with the result!

    Kind regards,
    Jacqueline

    Abhishek

    (@abhikr781)

    You are most welcome and Glad to hear that the issue has been fixed!

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘background lightbox’ is closed to new replies.

Tags