Lightbox Help

Davidw25

I posted this in the pinned section, but after reading further it seems like people have moved on from that due to the size of the thread...so here it goes again:

I am working on building my first site. One of the things I am really struggling with is that in the Lightbox view and Galleries, there is text that comes over the image which I really do not prefer. I don't mind it, actually kind of like it when it is the title of the gallery that shows up upon hover, or goes away when you hover, but when someone is just viewing the images, I don't want any text over the image. So I have been exploring a bit for the last 24 hours and have found a few things that get close but it isn't really what I want. Here is a link to a gallery - https://www.davidwallacephotography.com/Galleries/Details/

The way it looks on the gallery page is fine, but when I go to the lightbox there are a few things I don't like.
1st, the "ombre" effect...I just want the text on the background.
2nd, I would like the text to be dark, like the buttons on the left
3rd, I would be happy if I could change the subtext to a slightly lighter color.

Here is the code I have, it is on the Whole Site level in the the Theme CSS section:

/*Changing font size and color of TITLE*/
.sm-lightbox-title {
font-size: 30px !important; /*This code will change the font size of TITLE*/
color: #222222 !important; /*This code will change the font color of TITLE*/
}

/*Changing the font size and color of CAPTION*/
.sm-lightbox-caption {
font-size: 24px !important; /*This code will change the font size of CAPTION*/
color: #3a3a3a !important; /*This code will change the font color of CAPTION*/
}

/*
8. Render title and buy button below image on desktop
& tablet landscape viewports.
*/
@media screen and (min-width: 961px) {
.sm-user-ui .sm-lightbox-v2-content {
height: calc(100% - 72px);
}

.sm-user-ui .sm-lightbox-v2-photo-buttons {
padding: 0;
bottom: -60px;
}

.sm-user-ui .sm-lightbox-v2-photo-buttons-scrim {
background: none;
}

/* Make the folder images slightly transparent when the mouse hovers over it */
.sm-user-ui .sm-tiles .sm-tile-content:hover {
opacity: 0.85;
/* Have the transparency fade in */
-webkit-transition: all 0.15s ease-in;
-moz-transition: all 0.15s ease-in;
transition: all 0.15 ease-in;
}

/* Fade out the transparency. This code can be removed if you do not want it to fade */
.sm-user-ui .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;
}

Hikin' Mike

@Davidw25 said:
The way it looks on the gallery page is fine, but when I go to the lightbox there are a few things I don't like.
1st, the "ombre" effect...I just want the text on the background.
2nd, I would like the text to be dark, like the buttons on the left
3rd, I would be happy if I could change the subtext to a slightly lighter color.

Add this to your Theme's Custom CSS Section. If you don't know how, read this: https://gallery.imagesinthebackcountry.com/Smugmug-customization/Adding-CSS-to-your-SmugMug-Website

/*
* Removes Gradient, Text Shadow and Changes Titles/Captions 
************************************************************/
.sm-user-ui .sm-lightbox-v2-photo-buttons-scrim-dark {background: transparent;}

.sm-user-ui .sm-lightbox-v2-photo-title .sm-button-label h4,
.sm-user-ui .sm-lightbox-v2-photo-title .sm-button-label p {text-shadow: none;}

.sm-user-ui .sm-lightbox-v2-photo-title .sm-button-label h4 {color: #000;}

.sm-user-ui .sm-lightbox-v2-photo-title .sm-button-label p {color: #555;}

Change the colors to suit.

Davidw25

@"Hikin' Mike"

> @"Hikin' Mike" said:
> Add this to your Theme's Custom CSS Section. If you don't know how, read this: https://gallery.imagesinthebackcountry.com/Smugmug-customization/Adding-CSS-to-your-SmugMug-Website
>
> /** Removes Gradient, Text Shadow and Changes Titles/Captions ************************************************************/.sm-user-ui .sm-lightbox-v2-photo-buttons-scrim-dark {background: transparent;}.sm-user-ui .sm-lightbox-v2-photo-title .sm-button-label h4,.sm-user-ui .sm-lightbox-v2-photo-title .sm-button-label p {text-shadow: none;}.sm-user-ui .sm-lightbox-v2-photo-title .sm-button-label h4 {color: #000;}.sm-user-ui .sm-lightbox-v2-photo-title .sm-button-label p {color: #555;}
>
> Change the colors to suit.

Thank you for that! It seems to have worked for some images but not others...https://www.davidwallacephotography.com/Galleries/Details/

When you go into the lightbox there are two different ways it is showing up, they are all below the image which is what I want, and the gradient effect was removed. Not sure why some seem to have taken the code you shared but something is overriding it for other's.

Thoughts?

Hikin' Mike

@Davidw25 said:
Thank you for that! It seems to have worked for some images but not others...https://www.davidwallacephotography.com/Galleries/Details/

When you go into the lightbox there are two different ways it is showing up, they are all below the image which is what I want, and the gradient effect was removed. Not sure why some seem to have taken the code you shared but something is overriding it for other's.

Thoughts?

Didn't realize that the Title changes sizes from h2 to h4 when the screen size get smaller. This should work now:

/*
* Removes Gradient, Text Shadow and Changes Titles/Captions 
************************************************************/
.sm-user-ui .sm-lightbox-v2-photo-buttons-scrim-dark {background: transparent;}

.sm-user-ui .sm-lightbox-v2-photo-title .sm-button-label h2,
.sm-user-ui .sm-lightbox-v2-photo-title .sm-button-label h4,
.sm-user-ui .sm-lightbox-v2-photo-title .sm-button-label p {text-shadow: none;}

.sm-user-ui .sm-lightbox-v2-photo-title .sm-button-label h2,
.sm-user-ui .sm-lightbox-v2-photo-title .sm-button-label h4 {color: #000;}

.sm-user-ui .sm-lightbox-v2-photo-title .sm-button-label p {color: #555;}

Davidw25

That worked! Thank you!

I saw there is a way to change the lightbox background color which I'm interested in doing, the problem is all the icons along the left will be lost in a gray background, is there a way to adjust the color of those icons? Also at the bottom next to the title and description sometimes three white bars show up, sometimes they don't, depends on the image. Can that be removed?

Allen

Are you sure those three white bars are not dots? The 3 dots show when the wording is longer when the allowed width is exceeded.

Hikin' Mike

@Davidw25 said:
I saw there is a way to change the lightbox background color which I'm interested in doing, the problem is all the icons along the left will be lost in a gray background, is there a way to adjust the color of those icons?

You might want to do this instead: https://gallery.imagesinthebackcountry.com/Smugmug-customization/Change-Background-Color-in-SmugMug-Lightbox

Davidw25

@Allen said:
Are you sure those three white bars are not dots? The 3 dots show when the wording is longer when the allowed width is exceeded.

Yeah, it looks like it only does it when there is no description to go under the Title. It puts three long bars to the left of the title I assume to let people know there is more information if they click the title. I will have to go back and add some more text to those which isn't a bad thing to do anyway.

@Hikin' Mike said:

@Davidw25 said:
I saw there is a way to change the lightbox background color which I'm interested in doing, the problem is all the icons along the left will be lost in a gray background, is there a way to adjust the color of those icons?

You might want to do this instead: https://gallery.imagesinthebackcountry.com/Smugmug-customization/Change-Background-Color-in-SmugMug-Lightbox

I will have to look this over and test it out. There is a ton in there, I need to sort through it all, but thank you for that suggestion, hopefully it will work!

Davidw25

@Hikin' Mike
It is so close! The last piece is the text under the title...this is ONLY an issue when someone clicks on the title to see more in the lightbox view OR clicks the photo details button on the left side while in the lightbox. I have messed with a bunch of colors and can't seem to find the one that targets that text in particular.

Hikin' Mike

@Davidw25 said:
@Hikin' Mike
It is so close! The last piece is the text under the title...this is ONLY an issue when someone clicks on the title to see more in the lightbox view OR clicks the photo details button on the left side while in the lightbox. I have messed with a bunch of colors and can't seem to find the one that targets that text in particular.

Try this: .sm-user-ui .sm-image-metadata-caption {color: white;}

Davidw25

@Hikin' Mike That did it! Thank you so much for your help, you have really brought this to life! Is it easy to copy this over to the mobile experience? It still has the white background instead of the gray.

www.davidwallacephotography.com

Hikin' Mike

@Davidw25 said:
@Hikin' Mike That did it! Thank you so much for your help, you have really brought this to life! Is it easy to copy this over to the mobile experience? It still has the white background instead of the gray.

www.davidwallacephotography.com

Looks like you deleted a closing } here in your custom CSS:

/*
8. Render title and buy button below image on desktop
& tablet landscape viewports.
*/
@media screen and (min-width: 961px) {
    .sm-user-ui .sm-lightbox-v2-content {
        height: calc(100% - 72px);
    }

    .sm-user-ui .sm-lightbox-v2-photo-buttons {
        padding: 0;
        bottom: -60px;
    }

    .sm-user-ui .sm-lightbox-v2-photo-buttons-scrim {
        background: none;
    }

It should be this:

/*
8. Render title and buy button below image on desktop
& tablet landscape viewports.
*/
@media screen and (min-width: 961px) {
    .sm-user-ui .sm-lightbox-v2-content {
        height: calc(100% - 72px);
    }

    .sm-user-ui .sm-lightbox-v2-photo-buttons {
        padding: 0;
        bottom: -60px;
    }

    .sm-user-ui .sm-lightbox-v2-photo-buttons-scrim {
        background: none;
    }
}

Davidw25

@Hikin' Mike Nailed it...Thanks a ton!