Customize the Lightbox

Several people have asked how to change the lightbox background. The color change be changed and other effects can be added like borders, drop-shadows, transparency, etc.

Lightbox Background Color

Add the following code to your theme's Advanced CSS settings:
/* Change the lightbox background color */
.sm-lightbox {
    background: #f00;
}

Transparent Lightbox Background

Add the following code to your theme's Advanced CSS settings:
/* Make the lightbox background slightly transparent */
.sm-user-ui .yui3-widget-mask.sm-lightbox-mask {
  opacity: 0.5;
}
Feel free to change the opacity from 0.5. It should be on a scale from 0.0 (completely transparent) to 1.0 (completely opaque).

Add a Border and Drop-Shadow to the Lightbox

Add the following code to your theme's Advanced CSS settings:
/* Add a Border and Drop-Shadow to the Lightbox */
.sm-lightbox-image {
   -webkit-box-shadow: #FFFFFF 0px 0 30px;
   -moz-box-shadow: #FFFFFF 0 0 30px;
   box-shadow:#FFFFFF 0 0 30px;
   border: 5px solid #333333;
   overflow: hidden;
   border-radius:20px 20px 20px 20px;
}
You can make the drop-shadow slightly transparent by replacing #FFFFFF with "rgba(0,0,0,0.8)" - See the original discussion on background color on the dgrin forums. - See the original discussion on lightbox adjustments on the dgrin forums.

Comments

  • K├╝lli Tedre Photography

    on October 19, 2013

    can't make the transparent work. It's still just completely opaque.
    Also, is there any way to make those arrows and buttons come closer to photo? My photo for example is only 800 px longer side. It's really weird on large sreen to have arrowas and close button (and all other buttons, icluding filename) far away from the picture itself. Even if the transparency worked for me, the lightbox has very few ways to control its appearance. Could you maybe help with this?

Powered by SmugMug Owner Log In