htmlweebly

Changing the background color on the Weebly lightbox


I am working on this non-profit art site and could use some help. What I would like is to make the background color on the gallery lightbox less opaque and darker for better viewing experience. Please see https://www.openthesky.co.uk/finally-found.html and click one of the pictures for an example.

As the weebly editor does not give any options on this, I thought that it might be possible to do it via HTML, yet I haven't been able to find the element there. Any tips would be much appreciated!


Solution

  • Weebly has a common CSS Style Sheet for common element designs, so you likely will not see it in your Theme's design unless the designer added some customizations to the lightbox for your theme.

    Add the following CSS to your Settings > SEO > Header (to add it to all the pages of your website).

    <style>
    .fancybox-overlay {
        background: rgba(0,0,0,0.95) !important;
    }
    </style>
    

    The 0,0,0 is the color(black), the 0.95 is the transparency(1 = solid and 0.01 = almost completely transparent) and "!important" will make sure your CSS is used as the background for the lightbox in place of the default design.