Customize the Lightbox - Aaron Meyers

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

Powered by SmugMug Log In