Found what you have been looking for?

Search
Generic filters
Exact matches only
Filter by Categories
Customization
Domains
Lightroom Plugin
Tools and Tips

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.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Support this PORTAL

I am writing this portal in my free time and I pay for it myself. So, if you want to support my work – use this button to buy me a coffee 🙂 Which will help towards the hosting costs of the portal.