How fix/control Lightbox controls?

redcrown@mchsi.com · June 4, 2014

My Lightbox is broke... Again. How can I get rid of or control the stuff that appears below the image in Lightbox?

When I initially converted to the "new" Smugmug, I found and used some CSS to size the lightbox image, preventing it from running edge-to-edge. Worked fine for a few months, then something changed and images were being distorted (stretched horizontally). Figured that out and fixed it. Looked OK again.

Now I discover another change has screwed up the controls on the bottom of the lightbox page. Most bothersome is a strange little scroll bar that appears in the lower right corner, next to the "download" and "other sizes" controls (Lable A in the screen shot below). It appears to have no function. How to get rid of it?

There is also a little "carat" icon in the bottom center, on top of the image. It also has no function (can't click on it). Lable B in the screen shot. How to get rid of it?

And the whole mess auto scrolls when you mouse over the area. Starts off positioned badly, partially off screen. See lable C in the screen shot. Whe you mouse over anywhere in the area, it scrolls up and the curious scroll icon disappears. How to make it stop doing that?

Please, some CSS guru show how to control this whole mess. How to display only what you want and make it stay put?

http://kellyphoto.smugmug.com/photos/i-5p6SZSV/0/X3/i-5p6SZSV-X3.jpg

thenickdude · June 4, 2014

This is SM's new-style expanding caption area. You can probably solve the whole issue by hiding the keywords, which will make the default unexpanded size be tall enough to hold the caption details. You can hide those keywords with:

.sm-lightbox-keywords {
    display:none;
}

Then you can hide the little caret with:

.sm-lightbox-basic .sm-lightbox-info-expand {
    display:none;
}

If you want to keep the keywords, you can force the caption area to be as tall as it needs to be by default, use this instead:

.sm-user-ui .sm-lightbox-basic .yui3-widget-ft .sm-lightbox-panel .sm-lightbox-info,
.sm-user-ui .sm-lightbox-basic .yui3-widget-ft .sm-lightbox-panel{
    max-height:none;
}
.sm-lightbox-basic .sm-lightbox-info-expand {
    display:none;
}

redcrown@mchsi.com · June 5, 2014

Thanks thenickdude, I appreciate your response... and all the other customization help you've provided to the community.

Unfortunately, the codes you showed don't work on my site. Maybe a conflict with other CSS I've stolen and implemented?

I realize now I've fallen into the "keywords" rabbit hole. I don't use them, never paid any attention to them, did not notice that Smugmug was auto generating keywords from file names. Found several Dgrin rants about that and learned how to turn it off for all future uploads. But unfortunately I've got them on many existing galleries.

I manually deleted keywords on a couple galleries and that solved 2 of the complaints I made above. Only that silly caret remains. So getting keywords to display:none would be nice. Any more suggestions?

Here is my entire CSS mod, set in the Entire Site section.

.sm-user-ui .sm-tile-content,.sm-tile-info
{
text-align:center;border-radius:15px
}
.sm-tile-folder .sm-tile-type-icon:after,.sm-tile-album .sm-tile-type-icon:after{display:none}
.sm-tile-page .sm-tile-type-icon:after{display:none}
/* Round the images inside Collage Landscape or Collage Portrait galleries */
.sm-tile,.sm-tile .sm-image,.sm-tile-overlay
{
border-top-left-radius:15px;
border-top-right-radius:15px;
border-bottom-right-radius:15px;
border-bottom-left-radius:15px;
overflow:hidden;
-webkit-mask-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC)
}

.sm-page-powered-by A:first-child
{
   display: none;
}
/* Label the download button */
.sm-button.sm-button-image-download:after {
    content: "Download" !important;
    margin-left: 8px;
    display:inline-block;
}
/* Label the image sizes button */
.sm-button.sm-button-image-sizes:after {
    content: "Other Sizes" !important;
    margin-left: 8px;
    display:inline-block;
}
/* Disable the share button in the lightbox */
.sm-lightbox .sm-button.sm-button-image-share{
    display:none;
}
/* Disable the tools button */
.sm-button.sm-button-image-edit{
    display:none;
}
.sm-lightbox-image {
    -webkit-transform: scale(0.93);
    -moz-transform: scale(0.93);
    -ms-transform: scale(0.93);
    transform: scale(0.93);

    -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;
}
/* Attempt to kill gray bar in lightbox */
: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-color: rgba(156, 156, 145, 0);
  /* From Sherlock - stop the lightbox control panel from expanding and scrolling */
.sm-lightbox-keywords {
    display:none;
}
  .sm-lightbox-basic .sm-lightbox-info-expand {
    display:none;
}
  .sm-user-ui .sm-lightbox-basic .yui3-widget-ft .sm-lightbox-panel .sm-lightbox-info,
.sm-user-ui .sm-lightbox-basic .yui3-widget-ft .sm-lightbox-panel{
    max-height:none;
}
.sm-lightbox-basic .sm-lightbox-info-expand {
    display:none;
}

redcrown@mchsi.com · June 6, 2014

In case anybody is following this, trial and error proved that the code "thenickdude" gave above works OK, but only when placed in the CSS for Galleries. If does NOT work if placed in the CSS for Entire Site.

JonDecker · July 30, 2014

Just to update this a bit.
The CSS codes above do work for the whole site, but you'll have to edit the theme's CSS in the advanced settings and not just drop a special CSS box into the "all galleries" or "entire Site".

Thanks coder for giving us this code option BTW. I wish Smugmug had a full resource of it's CSS and the customizeation options listed somewhere in their help page. So far DGRIN is the only solid resource.

Hikin' Mike · July 30, 2014

JonDecker wrote: »

The CSS codes above do work for the whole site, but you'll have to edit the theme's CSS in the advanced settings and not just drop a special CSS box into the "all galleries" or "entire Site".

Thanks coder for giving us this code option BTW. I wish Smugmug had a full resource of it's CSS and the customizeation options listed somewhere in their help page. So far DGRIN is the only solid resource.

Use one of the webtools. I use 'Firebug' for Firefox.

JonDecker · July 31, 2014

Hikin' Mike wrote: »

Use one of the webtools. I use 'Firebug' for Firefox.

I guess, I meant that I wish there was a list out there that explained what the CSS changes would do before I hunt them down in the coding and try them all, one by one. I'm OK with what small mods I've made, but it'd be easier for me to read a developer manual that lists every option and its effects in one spot, rather than having to remember to log into this forum to see what cool things people are doing.

How fix/control Lightbox controls?

Comments