Customizing the SmugMug Lightbox - Mike Matenkosky

Customizing the SmugMug 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-icon, 	
.sm-user-ui .sm-lightbox .sm-button.sm-button-skin-default .sm-fonticon {
	color: #ccc;
	transition: all 0.4s ease-in-out;
}
	
    /* Hover Color */
.sm-user-ui .sm-lightbox .sm-button.sm-button-skin-default:hover .sm-icon,
.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; }	
	
@media screen and ( max-width:1024px ) {

	:root * > .sm-user-ui .sm-lightbox .sm-lightbox-ft-center.sm-lightbox-panel,
	:root * > .sm-user-ui .sm-lightbox .sm-lightbox-panel.sm-lightbox-ft-left,
	:root * > .sm-user-ui .sm-lightbox .sm-lightbox-panel.sm-lightbox-ft-right { background: #333; }
	
}		

Powered by SmugMug Log In