Change Background to Black _only_ in full screen view

LichtrauschLichtrausch MunichPosts: 10Registered Users Big grins
edited October 1, 2017 in SmugMug Customization
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

Comments

  • Hikin' MikeHikin' Mike Walkin' like a Penguin! Atwater, CaPosts: 4,556Registered Users Major grins

    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.

  • LichtrauschLichtrausch MunichPosts: 10Registered Users Big grins
    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 UlvenLille Ulven Lille Ulven ScandinaviaPosts: 525Registered Users Major grins

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

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

    http://www.lilleulven.com - The Photos of my travels
    http://blog.lilleulven.com - The Stories of my travels
  • LichtrauschLichtrausch MunichPosts: 10Registered Users Big grins
    > @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' MikeHikin' Mike Walkin' like a Penguin! Atwater, CaPosts: 4,556Registered Users Major grins

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

  • LichtrauschLichtrausch MunichPosts: 10Registered Users Big grins
    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' MikeHikin' Mike Walkin' like a Penguin! Atwater, CaPosts: 4,556Registered Users Major grins

    @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...

  • LichtrauschLichtrausch MunichPosts: 10Registered Users Big grins
    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).
  • denisegoldbergdenisegoldberg Major grins North Andover, MAPosts: 12,531Super Moderators moderator
    edited October 2, 2017

    @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.

  • LichtrauschLichtrausch MunichPosts: 10Registered Users Big grins

    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' MikeHikin' Mike Walkin' like a Penguin! Atwater, CaPosts: 4,556Registered Users Major grins
    edited October 2, 2017

    @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;
        }   
    
  • LichtrauschLichtrausch MunichPosts: 10Registered Users Big grins
    edited October 2, 2017

    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 UlvenLille Ulven Lille Ulven ScandinaviaPosts: 525Registered Users Major grins

    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

    http://www.lilleulven.com - The Photos of my travels
    http://blog.lilleulven.com - The Stories of my travels
  • LichtrauschLichtrausch MunichPosts: 10Registered Users Big grins

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

  • LichtrauschLichtrausch MunichPosts: 10Registered Users Big grins

    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' MikeHikin' Mike Walkin' like a Penguin! Atwater, CaPosts: 4,556Registered Users Major grins

    @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;
        }
    
Sign In or Register to comment.