Change complete lightbox to dark "theme"

bartz · April 23, 2015

Hi,
I search this forum and internet for an answer, but haven't found exactly what I want.

Currently I am setting up my site using light colors, it's a custom theme but comparable with the standard "Smugmug Lite" theme. (so you know where I'm talking about). This means the lightbox looks the same. What I would like is to have a dark lightbox so the photos have more impact.
Ok, I know I can change the lightbox background color, but then all the navigation buttons, icons and text in de lightbox still have a white background, that's just ugly. Of course I can also change this and make it dark...but then all these elements are invisible because they are black. So I'll have to change that and then the hover colors as well. So in the end I just want to have the lightbox how it looks when using the standard dark Smugmug theme.

Before I'm going to spend a lot of time to find and edit all necessary css, I would like to know if someone knows which css to use, it is after all already there. I searched hoping to find a lightbox css file which I could just "replace", but it doesn't look that easy.
Can someone help me with this ?

Hikin' Mike · April 23, 2015

You can add this to your theme's CSS...

/**
* Custom Lightbox 
*/
.sm-lightbox {
    background: #111111;
    }
.sm-lightbox-info-expand .sm-fonticon,    
.sm-user-ui .sm-lightbox .sm-button.sm-button-skin-default .sm-fonticon {
    color: #ccc;
    -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: #ffffff;
    }

:root * > .sm-user-ui .sm-lightbox .sm-lightbox-panel,
*:root * > .sm-user-ui .sm-lightbox .yui3-widget-hd .sm-lightbox-tools .sm-button,
*:root * > .sm-user-ui .sm-lightbox .sm-lightbox-nav {
    background: #333333;
    }    
    
.sm-user-ui .sm-lightbox-basic .yui3-widget-ft .sm-lightbox-caption {
    color: #999999;
    }

I added a fade in/out effect, but you can delete the 'transition' stuff.

bartz · April 23, 2015

Hi Mike,
Great, this is exactly what I want, saves me quite a bit of time digging though the css.
Thanks a lot for sharing !!

Change complete lightbox to dark "theme"

Comments