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,
:root *> .sm-user-ui .sm-lightbox .sm-lightbox-no-info:not(.sm-lightbox-canedit) .sm-lightbox-ft-left, 
:root *> .sm-user-ui .sm-lightbox .sm-lightbox-no-info:not(.sm-lightbox-canedit) .sm-lightbox-ft-right {
	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