Change Background to Black _only_ in full screen view

Lichtrausch

Hi everybody,

as far as I understand, what I want to do is only possible with custom code (please correct me if I am wrong...).

Here's my problem: My site has a white background. When viewing my images in full screen or slideshow mode, I get white bars on the left and right sides (or on top and on bottom) if the aspect ratio of the image doesn't match the screen. This is quite annoying if I want to showcase my images on a 4K TV or on a beamer; it would be much nicer and less distracting to get black bars (just like the ones we're all used to when watching movies) instead of white ones. Is there any way to do this without changing the background color of the whole site to black?

Thanks for any help,

Andreas

Hikin' Mike

A link to your site/gallery will may help. I don't have a '4K TV' and I have no idea what a 'beamer' is though.

Lichtrausch

Forgive me, English is not my first language. :) My site is "lichtrausch.smugmug.com".
I think the question is pretty general, though. Is nobody else annoyed by the fact that you get white bars left and right (or on top and on bottom) of your images when viewing them full screen? O.o

Thanks again for any help...

Lille Ulven

@Hikin' Mike a "beamer" is a projector - not the thing Scotty used on the Enterprise

@Lichtrausch: I don't get white bars for my site...simply because it is on a black background anyway

Lichtrausch

> @Hikin' Mike a "beamer" is a projector - not the thing Scotty used on the Enterprise :wink:

Thanks for the clarification, that's the word! (Germans have a strang habit of misusing English words, like "handy" for mobile phone...)


> @Lichtrausch: I don't get white bars for my site...simply because it is on a black background anyway :wink:

That's an option of course. Still, it would be nice to be able to have a white background on the whole site but not in full screen view...

Hikin' Mike

I looked at your home page and I didn't see any white bars on your slideshow when viewing them full screen.

Lichtrausch

I don't understand. If the aspect ratio of the image does not match the aspect ratio of the screen there are white bars in full screen view. I would like to have those bars black. Unforunately I can post neither links nor screenshots to this forum...

Hikin' Mike

@Lichtrausch said:
Unforunately I can post neither links nor screenshots to this forum...

One of the stupid rules about this new forum software. You don't have enough post-counts to post links and photos. Stupid for a photo forum...

Lichtrausch

Too bad.

I just noticed a very strange thing: If I click on full screen view in one of my galleries, I get the white bars as described. If I click on the full screen button for my homepage slideshow, I get black bars (= the behavior I would like to see everywhere).

denisegoldberg

@Lichtrausch said:
Unforunately I can post neither links nor screenshots to this forum...

You can always post your site URL as text. If pure text doesn't work (without the http://) then post the site link as text like this:

www dot mysite dot com

That will at least allow the helpers here to look at your site.

Lichtrausch

Here is a screenshot:

https://www (dot) dropbox (dot) com/s/ywo9q9yxsfo185p/Bildschirmfoto%202017-10-02%20um%2010.04.05.jpg?dl=0

The image is displayed on a white background in full screen view, so I have white bars left and right of the image (the navigation elements disappear if I don't move the mouse, of course). Is there any way to display the image on a black background while keeping the rest of my site on a white background?

Hikin' Mike

@Lichtrausch said:
Here is a screenshot:

https://www (dot) dropbox (dot) com/s/ywo9q9yxsfo185p/Bildschirmfoto%202017-10-02%20um%2010.04.05.jpg?dl=0

The image is displayed on a white background in full screen view, so I have white bars left and right of the image (the navigation elements disappear if I don't move the mouse, of course). Is there any way to display the image on a black background while keeping the rest of my site on a white background?

I see know. You need this: Customizing the SmugMug Lightbox

/**
* 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;
    }   

Lichtrausch

Thanks you so much, that was very helpful...

There are only two things that would make it even greater:
1. Is it possible to only affect the full screen background and not the "normal" lightbox?
2. Is it possible to make the background of the bottons transparent?

Thanks so much for your help...

Lille Ulven

For the background of your buttons try this:

: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,
: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-color: rgba(255,255,255,0);
}

/* change the color of the buttons, as the light grey now really isn't visible*/
.sm-fonticon::before{
color: white;
}

This could to the trick.
And yes, I know of the German inventions when it comes to "English sounding words" - I am passport German.

Good luck.

Lille Ulven

Lichtrausch

Thank you so much... Works as intended. Transparant background on the buttons looks so much nicer... :-D

Lichtrausch

Hmmm... One side effect seems to be that my social icons (Facebook and 500px) no longer work, they seem to be displayed now "white on white" so that you can click them but cannot see them... O.o

Hikin' Mike

@Lichtrausch said:
Hmmm... One side effect seems to be that my social icons (Facebook and 500px) no longer work, they seem to be displayed now "white on white" so that you can click them but cannot see them...

I disabled this and I'm still not seeing your Social Icons:

/* change the color of the buttons, as the light grey now really isn't visible*/
.sm-fonticon::before{
color: white;
}

That code will make EVERYTHING white. If you want to ONLY show those fonticons (icons) on your lightbox, then you need to use the code I posted above:

/* 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;
    }