Adding border to images in the new lightbox view

You can add a border to your images in the lightbox view. Just add a CSS content block { if you do not have one already } in the ENTIRE SITE section of your website and then add this code to it:

/*Adding border to lightbox image*/
.sm-user-ui .sm-lightbox-v2-photo {
    border: 4px solid black;
}

/*Adding transparency to side panels*/
.sm-user-ui .sm-lightbox-v2-navbar {
    background-color: #17171a2e;
}

In the first line of code change BLACK to any colour of your choice – you can use HEX colour codes as well – for example #000000.

The border width can be changed by changing the 4px value in the CSS code.

As you can see, there is a second line of code to add transparency to side panels – this is so the border is visible on smaller screens – otherwise, these panels would hide them.