Customizing the SmugMug Lightbox - Fine Art Prints for Sale

Customizing the Lightbox

If your theme’s colors are light and you prefer darker colors on your theme, then add this to your theme’s CSS. I added a transition effect, but you can delete that portion if you don’t want it.

CSS


/**
* Customizing the Lightbox 
*/
	/* Lightbox Background Color */
.sm-user-ui .sm-lightbox {
	background: #111;
	}
	
	/* Icon (Font) Colors */
.sm-user-ui .sm-lightbox-info-expand .sm-fonticon,	
.sm-user-ui .sm-lightbox .sm-button.sm-button-skin-default .sm-fonticon {
    color: #ccc;
		/* Transitions */
	-webkit-transition: all 0.4s ease-in-out;
	   -moz-transition: all 0.4s ease-in-out;
	     -o-transition: all 0.4s ease-in-out;
		transition: all 0.4s ease-in-out;
    }
	
    /* Hover Color */
.sm-user-ui .sm-lightbox .sm-button.sm-button-skin-default:hover .sm-fonticon {
    color: #fff;
    }
	
	/* Font Background */
:root * > .sm-user-ui .sm-lightbox .sm-lightbox-panel,
*:root * > .sm-user-ui .sm-lightbox .sm-lightbox-nav,
*:root * > .sm-user-ui .sm-lightbox .yui3-widget-hd .sm-lightbox-tools .sm-button {
	background: #333;
	}	
	
	/* Image Stuff */
.sm-user-ui .sm-lightbox-image {
	border: 5px solid #fefefe;
	}
	
	/* Title */
.sm-user-ui .sm-lightbox-title {
	color: #fefefe;
	}	
	
	/* Captions */
.sm-user-ui .sm-lightbox-basic .yui3-widget-ft .sm-lightbox-caption {
	color: #999;
	}	

Powered by SmugMug Log In