Skip to main content

Are you still looking for something?

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

Try these: contact formbuttonbuy photos

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:

CSS
/*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;
}
CSS

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.

Related articles

Comments (2)

Leave a Reply to Jan Jespersen Cancel 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 me

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.