How to Change Lightbox Background Colour

Su2zSu2z Registered Users Posts: 25 Big grins
edited December 21, 2015 in SmugMug Customization
Hi,

We are using a light theme, Dina, and would like to have a transparent dark background colour only in lightbox pages. Is there a way to do this?

Comments

  • jerryrjerryr Registered Users Posts: 595 Major grins
    edited September 4, 2015
    Hi -
    I usually use this CSS to change the background color of the lightbox :

    .sm-user-ui .sm-lightbox{
    background-color: #000000 !important;
    opacity: .75;
    }

    You can adjust the numbers accordingly.

    Try it :) jerryr
    Part-Time Photographer / Web Designer (Site : jrcustomization.com)
    SmugMug Sites - Creative Examples
    Favorite Images and SmugMug Designs
  • Su2zSu2z Registered Users Posts: 25 Big grins
    edited September 4, 2015
    Thank you! It worked, but it makes images transparent, too...
  • AllenAllen Registered Users Posts: 10,013 Major grins
    edited September 4, 2015
    See if assigning the color like this works better.
    22, 22, 22, is the RGB color
    .40 is the transparency .10 (lighter) to .90 (darker)

    background: rgba(22, 22, 22, .40);
    Al - Just a volunteer here having fun
    My Website index | My Blog
  • Su2zSu2z Registered Users Posts: 25 Big grins
    edited September 4, 2015
    It worked!
    Thank you, jerryr and Allen clap.gif
  • ChancyRatChancyRat Registered Users Posts: 2,141 Major grins
    edited September 4, 2015
    Could I extend this request for code to address other parts of lightbox?
    My background is a pale yellow, yet several components remain grey. Arrows drawn:
    - left and right arrows
    - bottom caption bar
    - The X to get out

    Thanks! In all the many customization codes for lightbox that I've seen, I could not figure out these pieces.
  • AllenAllen Registered Users Posts: 10,013 Major grins
    edited September 4, 2015
    Sorry, can't help. Everything, including all those elements, in lightbox is protected by right click. So Inspect Element does not work.
    Usually only photos are protected but not all the page elements.
    Al - Just a volunteer here having fun
    My Website index | My Blog
  • ChancyRatChancyRat Registered Users Posts: 2,141 Major grins
    edited September 4, 2015
    Allen wrote: »
    Sorry, can't help. Everything, including all those elements, in lightbox is protected by right click. So Inspect Element does not work.
    Usually only photos are protected but not all the page elements.

    Is this a comment to me, Allen? I'm not understanding then, because most customized sites I've viewed do have these extra elements matching their background. Sherlock has a very dark grey... Denise has a pale tan against her soft white background. You have a black/dark grey background and your captions are also dark grey, but with transparency.

    These code bits have to be available to code dunces like me. :D
  • AllenAllen Registered Users Posts: 10,013 Major grins
    edited September 4, 2015
    ChancyRat wrote: »
    Is this a comment to me, Allen? I'm not understanding then, because most customized sites I've viewed do have these extra elements matching their background. Sherlock has a very dark grey... Denise has a pale tan against her soft white background. You have a black/dark grey background and your captions are also dark grey, but with transparency.

    These code bits have to be available to code dunces like me. :D
    Yelp, you. Everything I R/C on, close X, caption, arrows, photo, etc. I get your R/C message.
    Never seen that on any other site.

    Edit: actually now R/C does not even work anywhere in lightbox.
    Al - Just a volunteer here having fun
    My Website index | My Blog
  • ChancyRatChancyRat Registered Users Posts: 2,141 Major grins
    edited September 4, 2015
    Allen wrote: »
    Yelp, you. Everything I R/C on, close X, caption, arrows, photo, etc. I get your R/C message.
    Never seen that on any other site.

    Edit: actually now R/C does not even work anywhere in lightbox.

    This is just on my site that R/C doesn't work? headscratch.gif
    Very confused... have no idea what's wrong or how to fix it... :cry:cry:cry:cry
  • Hikin' MikeHikin' Mike Registered Users Posts: 5,467 Major grins
    edited September 4, 2015
    ChancyRat wrote: »
    Could I extend this request for code to address other parts of lightbox?
    My background is a pale yellow, yet several components remain grey. Arrows drawn:
    - left and right arrows
    - bottom caption bar
    - The X to get out

    Thanks! In all the many customization codes for lightbox that I've seen, I could not figure out these pieces.

    This is what I have on my site:
    :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 {
    background: #333;
    }
    - Mike
    Images in the Backcountry

    My SmugMug Customizations | Adding CSS to Your Site | SEO for the Photographer | Locate Your Page/Widget Number | SmugMug Help Desk
  • ChancyRatChancyRat Registered Users Posts: 2,141 Major grins
    edited September 4, 2015
    Hey, Hikin' thanks for trying.

    I didn't understand the "root" part of your code... since I have lots of customized galleries where one gallery's lightbox and its small other associated parts need to be separately coded, I tried this code in one gallery:
    .sm-user-ui .sm-lightbox .sm-lightbox-panel,
    .sm-user-ui .sm-lightbox .sm-lightbox-nav,
    .sm-user-ui .sm-lightbox .yui3-widget-hd .sm-lightbox-tools .sm-button {
    background: #333;
    }

    But there was no change to the default (pale yellow with grey other bits).
    I would appreciate knowing what to do differently.
  • Hikin' MikeHikin' Mike Registered Users Posts: 5,467 Major grins
    edited September 4, 2015
    Did you try the code I provided? It works on my site and the code you posted doesn't. I can't tell you what the "root" part does, but I found it when I used the Firebug tool.
    - Mike
    Images in the Backcountry

    My SmugMug Customizations | Adding CSS to Your Site | SEO for the Photographer | Locate Your Page/Widget Number | SmugMug Help Desk
  • ChancyRatChancyRat Registered Users Posts: 2,141 Major grins
    edited September 4, 2015
    Hikin' Mike wrote: »
    Did you try the code I provided? It works on my site and the code you posted doesn't. I can't tell you what the "root" part does, but I found it when I used the Firebug tool.

    HOLY MOLEY it worked! GO FIGURE. I was certain "root" must have something to do with being in site-wide css only.
    :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 {     background: #333;     }

    WOW. Okay, now I have to figure out how to control each one of these babies separately, for color and transparency. You grouped them together and applied one color to all. Can I add this part of the code to each code, as in:
    :root * > .sm-user-ui .sm-lightbox .sm-lightbox-panel,
{background: #000;}

*:root * > .sm-user-ui .sm-lightbox .sm-lightbox-nav, 
{background: #222;}

*:root * > .sm-user-ui .sm-lightbox .yui3-widget-hd .sm-lightbox-tools .sm-button 
{background: #333;}
  • Hikin' MikeHikin' Mike Registered Users Posts: 5,467 Major grins
    edited September 4, 2015
    ChancyRat wrote: »
    Can I add this part of the code to each code, as in:
    :root * > .sm-user-ui .sm-lightbox .sm-lightbox-panel,
{background: #000;}

*:root * > .sm-user-ui .sm-lightbox .sm-lightbox-nav, 
{background: #222;}

*:root * > .sm-user-ui .sm-lightbox .yui3-widget-hd .sm-lightbox-tools .sm-button 
{background: #333;}

    Of course. In my case I wanted them all the same color.

    EDIT: Make sure you remove the commas:
    :root * > .sm-user-ui .sm-lightbox .sm-lightbox-panel
{background: #000;}

*:root * > .sm-user-ui .sm-lightbox .sm-lightbox-nav
{background: #222;}

*:root * > .sm-user-ui .sm-lightbox .yui3-widget-hd .sm-lightbox-tools .sm-button 
{background: #333;}
    - Mike
    Images in the Backcountry

    My SmugMug Customizations | Adding CSS to Your Site | SEO for the Photographer | Locate Your Page/Widget Number | SmugMug Help Desk
  • ChancyRatChancyRat Registered Users Posts: 2,141 Major grins
    edited September 4, 2015
    Thanks, Mike. I can't figure this next part out at the moment: I added the code to "all galleries".
    What appears to have happened is that the code is "taking" in the custom galleries too (those ought to have defaulted to the original site-wide default? (which would have been grey for the little bits)).

    Maybe this is what "root" caused? In which case I need to test whether this code will let me change the colors in a custom gallery that now seems to be controlled by the code in "all galleries".

    A later project... but not too much later. mwink.gif
  • Hikin' MikeHikin' Mike Registered Users Posts: 5,467 Major grins
    edited September 4, 2015
    I don't know. I put my all of my custom CSS in my Theme's CSS only.
    - Mike
    Images in the Backcountry

    My SmugMug Customizations | Adding CSS to Your Site | SEO for the Photographer | Locate Your Page/Widget Number | SmugMug Help Desk
  • ChancyRatChancyRat Registered Users Posts: 2,141 Major grins
    edited September 10, 2015
    Hikin' Mike wrote: »
    I don't know. I put my all of my custom CSS in my Theme's CSS only.

    Thanks, Mike! iloveyou.giflust I went ahead and moved the code to the site-wide CSS... sure wish I could tell if I now have conflicting code anywhere else, but, in random photo views in different galleries, including some that are the default site format, and some that are "this gallery only", the color scheme seems reasonable. One example:

    http://www.joinrats.com/Beautiful/i-cGVzTdK/A

    The code I ended up with: 
    /* Control lightbox caption background */ 
:root * > .sm-user-ui .sm-lightbox .sm-lightbox-panel
{background: #FFFFCC;
}

/* Control lightbox left and right nav arrows */ 
*:root * > .sm-user-ui .sm-lightbox .sm-lightbox-nav
{background: #FFFFBB;
opacity: .50;}

/* Control lightbox x out of lightbox */ 
*:root * > .sm-user-ui .sm-lightbox .yui3-widget-hd .sm-lightbox-tools .sm-button 
{background: #FDFCC4;
opacity: .70;}

    In case it matters, this is the only other lightbox code in my CSS:
    /* sets background of lightbox mode */ 
.sm-lightbox-basic {
  background-color: #FFFFCC;}

/* ===================================================== */ 
/* Sherlock Lamah Lightbox codes */ 

* ===================================================== */ 

/* Transition the links so they fade in and out */
a { 
-webkit-transition:color 0.25s ease-in;
-moz-transition:color 0.25s ease-in;
transition:color 0.2s ease-in;
}
/* Set the buttons to transition to the hover color slowly */
.sm-user-ui .sm-button-skin-accent, 
.sm-user-ui .sm-button,
.sm-user-ui .sm-page-widget-galleries .sm-tiles .sm-tile-content,
.sm-user-ui .sm-page-widget-folders .sm-tiles .sm-tile-content {
-webkit-transition: all 0.15s ease-in;
-moz-transition: all 0.15s ease-in;
transition: all 0.15 ease-in;
}
/* Transition the links under the photo */
.sm-button .sm-fonticon-small, 
.sm-user-ui .sm-button-label,
.sm-fonticon {
-webkit-transition: all 0.2s ease-in;
-moz-transition: all 0.2s ease-in;
transition: all 0.2 ease-in;
}

    And these don't seem to work:
    /* Lightbox Add the word "Sizes" after the Sizes button */
.sm-lightbox-icons .sm-button.sm-button-image-sizes:after {
    content: "Sizes" !important;
    font-size: 95%;
}
  
/* Lightbox Add the word "Share" after the Share button */
.sm-lightbox-icons .sm-button.sm-button-image-share:after {
    content: "Share" !important;
    font-size: 95%;
}

    Would you know how I can change the arrows (left/right nav), and the "X" in the top right corner, to change the color and size?
  • Hikin' MikeHikin' Mike Registered Users Posts: 5,467 Major grins
    edited September 10, 2015
    ChancyRat wrote: »
    Would you know how I can change the arrows (left/right nav), and the "X" in the top right corner, to change the color and size?

    I use this to change the color.
    .sm-user-ui .sm-lightbox .sm-button.sm-button-skin-default .sm-fonticon {
    color: #ccc;
    font-size: 20px;
    }
    
	/* For Hover */
.sm-user-ui .sm-lightbox .sm-button.sm-button-skin-default:hover .sm-fonticon {
    color: #fff;
    }


    - Mike
    Images in the Backcountry

    My SmugMug Customizations | Adding CSS to Your Site | SEO for the Photographer | Locate Your Page/Widget Number | SmugMug Help Desk
  • rainforest1155rainforest1155 Registered Users Posts: 4,566 Major grins
    edited September 11, 2015
    Note that the lightbox UI uses the theme > primary color as the basis. If you change the primary color of your theme, the lightbox UI changes as well.
    Sebastian
    SmugMug Support Hero
  • ChancyRatChancyRat Registered Users Posts: 2,141 Major grins
    edited September 11, 2015
    rainforest1155 wrote: »
    Note that the lightbox UI uses the theme > primary color as the basis. If you change the primary color of your theme, the lightbox UI changes as well.

    Or, change the lightbox background in site-wide CSS. This is what I have (hopefully it's the best code for the purpose):
    /* sets background of lightbox mode */ 
.sm-lightbox-basic {
  background-color: #FFFFCC;
}
  • ChancyRatChancyRat Registered Users Posts: 2,141 Major grins
    edited September 11, 2015
    Hikin' Mike wrote: »
    I use this to change the color.
    .sm-user-ui .sm-lightbox .sm-button.sm-button-skin-default .sm-fonticon {
    color: #ccc;
    font-size: 20px;
    }
    
    /* For Hover */
.sm-user-ui .sm-lightbox .sm-button.sm-button-skin-default:hover .sm-fonticon {
    color: #fff;
    }

    Thanks, Mike, I tried this. Got the colors working well, but the size seems to control all the elements, arrows, X for out, and the icons for Share/Settings/Download, etc. I think I need to separate them for size control.
  • BogdanBogdan Registered Users Posts: 2 Beginner grinner
    edited December 21, 2015
    Allen wrote: »
    See if assigning the color like this works better.
    22, 22, 22, is the RGB color
    .40 is the transparency .10 (lighter) to .90 (darker)

    background: rgba(22, 22, 22, .40);

    I face the same problem, the photo becomes transparent too. I tried this recommendation of yours but it didn't work for me. Do you have a complete CSS for this?
  • AllenAllen Registered Users Posts: 10,013 Major grins
    edited December 21, 2015
    Bogdan wrote: »
    I face the same problem, the photo becomes transparent too. I tried this recommendation of yours but it didn't work for me. Do you have a complete CSS for this?
    There might be some opacity applied from somewhere. Might try to adding "opacity: 1;" to the rule.


    {
    ...
    opacity: 1;
    }
    Al - Just a volunteer here having fun
    My Website index | My Blog
  • sarasphotossarasphotos Registered Users Posts: 3,863 Major grins
    edited December 21, 2015
    Hi, since I have a light background, I had the same problem with my lightbox. It took me forever and a day to figure out the stuff arround the X and the arrows but I finally got it! Here is the entire extra css for my lightbox:
    /*LIGHTBOX STARTS HERE*/
/* change lightbox expand-close-nav background */
.sm-user-ui .sm-lightbox .yui3-widget-hd .sm-lightbox-tools .sm-button.sm-lightbox-close,
.sm-user-ui .sm-lightbox .yui3-widget-hd .sm-lightbox-tools .sm-button.sm-lightbox-expand {
  background-color: transparent; !important;
  color: #ffffff;  
}
.sm-user-ui .sm-lightbox .yui3-widget-hd a.sm-button.sm-button-skin-default,
.sm-user-ui .sm-lightbox .yui3-widget-hd a.sm-button-sm-button-skin-default:hover {
  background-color: transparent; !important;
  color: #ffffff;  
}
.sm-user-ui .sm-lightbox .yui3-widget-hd .sm-lightbox-nav {
  background-color: transparent; !important;
  color: #ffffff;  
}
.sm-user-ui .sm-lightbox .sm-button.sm-button-skin-default .sm-fonticon {
  background-color: transparent;
  color: #fff;  
}
.sm-user-ui .sm-lightbox .sm-button.sm-button-skin-default .sm-fonticon {
  background-color: transparent;
  color: #fff;  
}
.sm-user-ui .sm-lightbox .yui3-widget-ft .sm-button.sm-button-skin-default,
.sm-user-ui .sm-lightbox .yui3-widget-ft .sm-button.sm-button-skin-default .sm-fonticon {
  max-height: 60px;
  background-color: transparent;
  color: #fff;  
  opacity: 80.0;
  filter:alpha(opacity=80);
}
.sm-user-ui .sm-lightbox-basic .sm-lightbox-ft-center .sm-lightbox-info > div, 
.sm-user-ui .sm-lightbox-basic .sm-lightbox-ft-center .sm-lightbox-info > p {
max-width: 1000px !important;
}
/* Make the width of the lightbox caption wider */
.sm-lightbox-basic .sm-lightbox-ft-center .sm-lightbox-info {
  max-width: 100% !important;
}
/* Turn off keywords in lightbox */
.sm-lightbox-keywords {
   display: none;
}
/* Change Lightbox Title */
.sm-lightbox-basic .yui3-widget-ft .sm-lightbox-title {
    color: #ffffff;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
}
/* Change Lightbox Captions*/
.sm-lightbox-basic .yui3-widget-ft .sm-lightbox-caption {
    color: #ffffff !important;
    font-size: 14px;
}
/* don't display info panel expand button */
.sm-lightbox-basic .yui3-widget-ft .sm-lightbox-info-expand {
    display: none;
}
/*change lightbox info panel attrributes */
.sm-user-ui .yui3-widget-ft .sm-lightbox-panel-grid .sm-lightbox-info,
.sm-user-ui .yui3-widget-ft .sm-lightbox-panel-grid .sm-lightbox-tools {
    max-height: 60px;
    background-color: transparent;
    color: #fff;
    opacity: 0.80;
    filter:alpha(opacity=80);
}
.sm-user-ui .yui3-widget-ft .sm-lightbox-panel-grid .sm-lightbox-panel {
    max-height: 60px;
    background-color: #222;
    color: #fff;
    opacity: 0.80;
    filter:alpha(opacity=80);
}
/* Make the lightbox background slightly transparent */
.sm-user-ui .yui3-widget-mask.sm-lightbox-mask {
  background-color: #000;
  opacity: 0.95;
  filter:alpha(opacity=95); /* For IE8 and earlier */
}
.sm-lightbox-image {
    -webkit-transform: scale(0.97);
    -moz-transform: scale(0.97);
    -ms-transform: scale(0.97);
    transform: scale(0.97);
    -webkit-backface-visibility: hidden;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain !important;
}

    and here's an example of what it looks like:

    http://www.sarasphotos.de/Recent-Additions/i-rbnzhg6/A

    Hope this helps someone!

    Cheers, Sara
    Sara's Photos | Recent Additions

  • AllenAllen Registered Users Posts: 10,013 Major grins
    edited December 21, 2015
    Remove the semi-colon before the !important. The semi-colon ends the parameter.
    background-color: transparent; !important;

    background-color: transparent !important;
    Al - Just a volunteer here having fun
    My Website index | My Blog
  • sarasphotossarasphotos Registered Users Posts: 3,863 Major grins
    edited December 21, 2015
    Geez, I'm sure I proof read this a thousand times... Thanks, Allen! It's now fixed

    Cheers, Sara
    Sara's Photos | Recent Additions

  • AllenAllen Registered Users Posts: 10,013 Major grins
    edited December 21, 2015
    sarasphotos wrote: »
    Geez, I'm sure I proof read this a thousand times... Thanks, Allen! It's now fixed

    Cheers, Sara
    If it's working like it was you don't need to override with the !important.
    Al - Just a volunteer here having fun
    My Website index | My Blog
  • gschlactgschlact Registered Users Posts: 56 Big grins

    Can someone please help me with my Lightbox CSS code.
    In a nut shell, I have it setup so that the image appears and fills the browser vertically, and then the Viewer can scroll down to see the Title / Caption / keywords etc.
    I want a dark background for the image but can't get it to work. I have found the code the prevents it from working but don't understand why.

    You'll see that the first phrase if included in the CSS prevents it from working, where as if I remove it, the background color works, but the image is full height (included in the scroll area, and the title/caption/keywords cannot be seen.

    Your help would be greatly appreciated. (Ignore the ugle #ff00ff value, it is for readily recognizing whether it worked. )
    All other code in my CSS is working including the rest of the lightbox arrow behavior.

    To find this in CSS – search Sherlock

    /* THIS First PHRASE breaks background color for lightbox */
    body.sm-page-node.sm-noscroll .sm-lightbox {
    position: static;
    }

    /* set background color DOESN”T WORK and auto height */
    .sm-user-ui .sm-lightbox {
    height: auto !important;
    width: auto !important;
    background-color: #FF00FF !important;
    }

    TIA,
    Guy
    gschlact
    schlacter.smugmug.com

    -gschlact
    http://schlacter.smugmug.com
Sign In or Register to comment.