Found what you have been looking for?

Generic filters
Exact matches only
Filter by Categories
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.

borders, css, image border, lightbox view, smugmug lightbox

Tomasz Nowicki

My name is Tomasz Nowicki and I am a PHOTOGRAPHER and WEB DESIGNER based in the UK. Few years ago I have created my first website using SmugMug - a powerful platform for any type of photographer. I fell in love with it and from day one I have started exploring the possibilities of customizing my website. PHOTOM Portal is a my personal SmugMug knowledge base website where you can find some tips and tricks on how to use and get the most out of your SmugMug website.

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.