Lightbox CSS customizations given here don't seem to work

camner · September 29, 2017

I've tried several different lightbox CSS customizations, including Center Lightbox Caption and Title and Always Show Captions in Lightbox as well as a few smaller ones, and none seem to work.

I'm wondering if SM has made a change in the default CSS that affects the lightbox, thus making these mods fail. Has anyone experienced this recently?

Lille Ulven · September 29, 2017

For the first one: it seems to work if you replace the
/* Move the lightbox title to the center /
.sm-lightbox-basic .yui3-widget-ft .sm-lightbox-title {
position: absolute; / Force the position to be where we want it /
left: 50%; / Place the title in the middle of the page */
}

/* Move the caption down 30px so it doesn't overlap with the title */
.sm-user-ui .sm-lightbox-basic .yui3-widget-ft .sm-lightbox-caption {
   position: absolute;
   left: 50%;
   top: 30px;
}

with
/* Move the lightbox title to the center /
.sm-lightbox-basic .yui3-widget-ft .sm-lightbox-title {
position: absolute; / Force the position to be where we want it /
margin-left: 50%; / Place the title in the middle of the page */
}

/* Move the caption down 30px so it doesn't overlap with the title */
.sm-user-ui .sm-lightbox-basic .yui3-widget-ft .sm-lightbox-caption {
   position: absolute;
   margin-left: 50%;
   top: 30px;
}

For the second try replacing left/right/bottom/top with margin-left/margin-right/margin-bottom/margin-top in the long code block, that could make it work.

Good luck

Lille Ulven

camner · September 29, 2017

Thanks very much for your help. Unfortunately, that didn't work.

Here's the "before" screenshot, showing the Lightbox text with title and caption, "straight out of the SM box," with the cursor hovering over the bottom so that the Title and Caption show completely:

And here's what it looks like after making the changes replacing "left" with "margin-left" and "top" with "margin-top" (although you didn't make the second change, I assume you intended it):

As you can see, the title does shift to the right, but the caption does NOT shift down. In fact, if anything it seems to shift UP (why?), overwriting the title. I tried changing the "margin-top: 30px;" to other values, but nothing made a difference. I'm thinking this CSS code is not addressing the caption, perhaps due to change in what SM has done to the underlying Lightbox CSS?

In addition, the title is now wrapped, suggesting that the container needs to be widened as well. AND, the font size of the Title has increased! That's odd, since the CSS change doesn't mention font size at all...
(For the sake of completion, the way I tested this was to be on the gallery page, click "customize", choose "this gallery only," drag a CSS block to the page, enter the CSS mod, click "Preview," open the Lightbox by clicking on the given image, and hover over the bottom.)

By the way, I'm not expert in CSS; is there a difference in CSS between "left" and "margin-left"? I'm only a CSS beginner, but I've not seen "left" used alone except on some mods here.

Thanks again for your help; I appreciate it.

Lille Ulven · September 29, 2017

@camner can you post a link to your site. I will test this later again on my site as well...but it will be a few hours before that.
@leftquark since the original code is yours: do you know of any changes that might have been made that could prevent your code from working now?

See you all later

Lille Ulven

camner · October 1, 2017

My apologies for the slow response...I had take a day or so away from the computer, alas. Here's the link to a gallery: (removed)

Lille Ulven · October 1, 2017

No problem, @camner, I sometimes wished I took some more time off the computer as well...

Try if this works for you:

.sm-lightbox-basic .yui3-widget-ft .sm-lightbox-title, .sm-lightbox-basic .yui3-widget-ft .sm-lightbox-caption, .sm-lightbox-basic .yui3-widget-ft .sm-lightbox-keywords {
    margin-left: 50%;
}

When I am trying it via FF web developer tools on the page you gave me the access to, it works just fine

Getting the always show to work, might take some more time though...

Good luck

Lille Ulven

Lille Ulven · October 1, 2017

Or maybe not... try this:

.sm-lightbox-basic .sm-lightbox-ft-center .sm-lightbox-info {
    -moz-transition: max-height 0s;
    -webkit-transition: max-height 0s;
    transition: max-height 0s;
}

It might just work out fine

Good luck

Lille Ulven

camner · October 2, 2017

Thanks for your help with this. I gave those two CSS tweaks you suggested a try, and I found partial success and partial failure. The partial success is that the title and caption did move over to the right.

However, the "always show" did not, alas. When I first open the Lightbox, the title and caption appear at the very bottom, with only the top part visible, as usual. When I hover over the region at the bottom, the title/caption region moves up, only this time much faster (due to the transition: max-height 0s replacing the 5s transition).

I'm thinking that since the title/caption region moves up when hovering over it, there must be a "hover" selector somewhere in the CSS that makes this effect happen. The question is, Where?

Lille Ulven · October 2, 2017

@camner : so you would want to have the entire caption showing always - even though it will then block part of your photo? I might be able to have a look tonight...

camner · October 2, 2017

Yes. I don't have many photos with captions, and those that do have captions tend to have short captions. I don't think the default behavior of "hover over the bottom" will work because the folks who are viewing the images won't necessarily notice the small "caret" (up arrow) at the bottom of the light box.

I've noticed that the title/caption area (when fully visible upon hovering) exactly fits the size of the text in the title/caption combined, so "always showing" should work well for me and not obscure very much of the image.

Thanks again for your help with this.

Lille Ulven · October 2, 2017

I think I might have found the solution for the "remaining" problem add this to your code (additionally to the other changes):

.sm-lightbox-basic .yui3-widget-ft .sm-lightbox-panel {
    bottom: 0;
    max-height: initial;
    -moz-transition: max-height 0s; 
        -webkit-transition: max-height 0s;
    transition: max-height 0s;
}

Good Luck

Lille Ulven

camner · October 3, 2017

Alas, this doesn't seem to work, either. The title/caption box still begins at the bottom when the Lightbox is opened and then moves up when I hover over the bottom.

I also realized that the "move the title/caption box to the right" isn't quite working, either. The right part of the text is cut off, as shown below...
Take a look at the bolded link in the caption, which cuts off.

Just to be clear, I'm using this CSS now:

.sm-lightbox-basic .yui3-widget-ft .sm-lightbox-title, .sm-lightbox-basic .yui3-widget-ft .sm-lightbox-caption, .sm-lightbox-basic .yui3-widget-ft .sm-lightbox-keywords {
    margin-left: 50%;
}

.sm-lightbox-basic .yui3-widget-ft .sm-lightbox-panel {
    bottom: 0;
    max-height: initial;
    -moz-transition: max-height 0s; 
        -webkit-transition: max-height 0s;
    transition: max-height 0s;
}

These are the CSS blocks you intended, yes?

Lille Ulven · October 3, 2017

Hi @cranmer
You missed out on using one block of CSS so here is the complete code - though still with the text being cut off:

.sm-lightbox-basic .yui3-widget-ft .sm-lightbox-title, .sm-lightbox-basic .yui3-widget-ft .sm-lightbox-caption, .sm-lightbox-basic .yui3-widget-ft .sm-lightbox-keywords {
    margin-left: 50%;
}

.sm-lightbox-basic .sm-lightbox-ft-center .sm-lightbox-info {
    -moz-transition: max-height 0s;
    -webkit-transition: max-height 0s;
    transition: max-height 0s;
}

.sm-lightbox-basic .yui3-widget-ft .sm-lightbox-panel {
    bottom: 0;
    max-height: initial;
    -moz-transition: max-height 0s; 
        -webkit-transition: max-height 0s;
    transition: max-height 0s;
}

I'll try to have a look tonight on how to improve the text and if there is then still something missing to make the caption stick (just, please leave the changed code in place, makes it easier for me to figure out what is missing).

Good luck

Lille Ulven

camner · October 3, 2017

Done! Thanks for the help...I thought I might have been missing a block in the back and forth.

The custom CSS you gave in your last post has been saved and published.

Lille Ulven · October 3, 2017

Cool, that means that I might have a solution for you

.sm-lightbox-basic .yui3-widget-ft .sm-lightbox-title, .sm-lightbox-basic .yui3-widget-ft .sm-lightbox-caption, .sm-lightbox-basic .yui3-widget-ft .sm-lightbox-keywords {
    margin-left: 50%;
}

.sm-lightbox-basic .sm-lightbox-ft-center .sm-lightbox-info {
    -moz-transition: max-height 0s;
    -webkit-transition: max-height 0s;
    transition: max-height 0s;
    max-height: 175px; /*or larger otherwise the text block is not large enough and some sort of hoover will kick in again.*/
}

.sm-lightbox-basic .yui3-widget-ft .sm-lightbox-panel {
    bottom: 0;
    max-height: initial;  /*or 1200px both seem to work*/
    -moz-transition: max-height 0s; 
        -webkit-transition: max-height 0s;
    transition: max-height 0s;
}

This would be the complete code. The basic change is that the second block got a specific max-height value to overwrite the initial set 48px, which is not large enough. You can change the max-height:initial; to a max-height:1200px; in the third block, but it seems to work with the initial.

Hope this helps.

Lille Ulven

camner · October 3, 2017

Thanks very much! That seems to do the trick as far as showing more of the caption is concerned. I made one change to the CSS, replacing max-height: 175px; with max-height: 50%;

The issue that remains is the width of the title/caption container, as the right side of the link is cut off.

I also noticed that hovering over the title/caption region leads to some weird "blinky" behavior; the title/caption region oscillates rapidly between two sizes, but that is not a big deal...Most people won't bother to try to hover if they can already read the entire caption.

Thanks again for all of your help!

camner · October 3, 2017

Looking for and at customizations leads me to wish that there existed a place one could see a list of SmugMug CSS class descriptors and what they do. I know SM doesn't maintain such a thing, but it seems to me that this could be done in the form of a Wiki where folks here would contribute (and edit) their knowledge as they gained it. I wonder if there would be any interest that in that, since there seem to be a lot of folks who want to make customizations who lack the knowledge to dig too deeply into that themselves without help from others (I, obviously, fall into that category).

camner · October 6, 2017

Hi @Lille Ulven ,

Based on what you have shared plus some additional poking around using the FF Developer tools, I came up with the following, which does everything I want it to do and doesn't seem to break anything (I think....)

/* CSS to modify how the title, caption, and keywords (info panel) appear on a Lightbox page 
   1.  moves info panel to right
   2.  increases width of info panel
   3.  always keeps the entire info panel visible instead of appearing upon hover
*/

/* increases width of info panel */
.sm-lightbox-basic .sm-lightbox-ft-center .sm-lightbox-info > div, .sm-lightbox-basic .sm-lightbox-ft-center .sm-lightbox-info > p {
    max-width: 900px;
}

/* moves the info panel to the right */
.sm-lightbox-basic .sm-lightbox-ft-center .sm-lightbox-info {
  padding-left: 300px;
}

/* changes the transition upon hover from 5s to 0s */
.sm-lightbox-basic .sm-lightbox-ft-center .sm-lightbox-info {
    -moz-transition: max-height 0s;
    -webkit-transition: max-height 0s;
    transition: max-height 0s;
    max-height: 50%; /*or larger otherwise the text block is not large enough and some sort of hoover will kick in again.*/
    max-width: 50%; /*widens so that text is not cut off*/
}

/* changes the transition upon hover from 5s to 0s */
.sm-lightbox-basic .yui3-widget-ft .sm-lightbox-panel {
    bottom: 0;
    max-height: initial;  /*or 1200px both seem to work*/
    -moz-transition: max-height 0s; 
    -webkit-transition: max-height 0s;
    transition: max-height 0s;
}

/* changes the hover behavior so that the hover height is the same as the initial height */
.sm-lightbox-basic .yui3-widget-ft.sm-lightbox-has-plugged-node .sm-lightbox-panel, .sm-lightbox-basic .yui3-widget-ft.sm-lightbox-has-plugged-node .sm-lightbox-info, .sm-lightbox-basic .yui3-widget-ft .sm-lightbox-panel:hover, .sm-lightbox-basic .yui3-widget-ft .sm-lightbox-panel:hover .sm-lightbox-info {
    max-height: inherit;
    /*visibility: hidden;*/
}

Thanks so much for your help...without the guidance I couldn't have accomplished this.

(The commented out visibility:hidden; was an unsuccessful attempt to hide the info panel upon hover...it sort of works, but there is a lot of "jitter" and this is a piece of fine-tuning I don't need right now)

Lille Ulven · October 7, 2017

Hi @camner

I am glad to hear you found a solution - and I could help you a little along the way
As for the documentation you would love to see (you are not the only one)...yes it would be amazing to have, but the trouble is less in writing it, it is more in maintaining it...those things are out of date faster than my cheese...

Lille Ulven

camner · October 7, 2017

@Lille Ulven ,

So, are you saying that SM makes changes so often that one needs to actively maintain the CSS customizations one makes on a frequent basis?

Lille Ulven · October 7, 2017

@camner,

I wouldn't say they make changes to existing tags too often, but yes, they happen. The latest I know of is the breadcrumb's s change about a month or so back. There's some new development like grid and flex boxes that were added (not sure if grid is, but flex boxes have been added to some areas about a year back).
Yes, you will have to maintain your CSS code, lookout for @leftquark's posts about changes or upcoming changes, he often gives us a heads up if there is something around the corner that might break our customizations.

camner · October 7, 2017

OK, thanks. I'll keep my eyes open. Thanks again for all your help.

Lille Ulven · October 7, 2017

You are welcome, @camner

Have a great weekend

Lille Ulven

Lightbox CSS customizations given here don't seem to work

Comments