CSS code for overlay in new lightbox

sarasphotossarasphotos Major grinsAugsburg, GermanyRegistered Users Posts: 3,615 Major grins

Namely, I'd love to fix the following in the overlay:
1. get rid of "From "gallery name"
2. Make the Title text slightly smaller
3. Make the Caption area wider so that it doesn't wrap
4. Make the minimum height enough so that the viewer does not need to hover the mouse in order to see the entire content (what viewer would ever think to do that???)

I had this in some former Lightbox version and then it all stopped working so I got rid of all custom CSS.

Any help is appreciated!


  • Hikin' MikeHikin' Mike Walkin' like a Penguin! Atwater, CaRegistered Users Posts: 5,432 Major grins
    edited July 4, 2019

    Don't understand your first question.

    SmugMug is in the process of updating the Lightbox (https://dgrin.com/discussion/265055/upcoming-lightbox-improvements-2019-edition/p1), so you might want to wait until that is done. No idea how long.

  • sarasphotossarasphotos Major grins Augsburg, GermanyRegistered Users Posts: 3,615 Major grins

    Hi Mike, thanks for the reply.
    Although I have been roughly following the "Lightbox improvements" thread I realize now I need to read it through more carefully. I was thinking the lightbox had already gone live. Dumb me... :/ The new lightbox in Organizer really looks pretty good. I will now read the thread in detail to see if my questions are already answered.
    Ugh. So sorry to have wasted your time!

  • The MechanicThe Mechanic NOT A Support Hero Registered Users Posts: 197 Major grins


    I took a peek at your site, as it stands at the moment, here is some css that should address those specific areas:

    /*** Lightbox Caption Modifications *** Smugocity **********/

    /*** Change Lightbox Caption Title Size ***/
    .sm-lightbox-v2-photo-buttons .sm-button-label h2 {
    font-size: 12px;

    .sm-lightbox-v2-photo-buttons .sm-button-label h4 {
    font-size: 12px;

    /*** Change Lightbox Caption Text Size ***/
    .sm-lightbox-v2-photo-buttons .sm-button-label p {
    font-size: 12px;

    /*** Show More Text In Lightbox Caption ***/
    .sm-lightbox-v2-photo-buttons .sm-text-ellipsis p {
    white-space: normal !important;
    /******************** www.smugocity.com ********************/

    You can change the font sizes to whatever works best. The title text size varies whether this image is landscape (h2) or portrait (h4).

    Give this a spin. At least until things change.

Sign In or Register to comment.