New Lightbox Customization

rjwilner

I would appreciate some assistance modifying the lightbox options for Title/Caption/BuyPhoto displayed in the screen cap below...

1. I would like to remove the gradated background and have it be either defined as white...or maybe more likely 'transparent' as white is my site bg color. Either would work.
2. I would like the text to be a color of my choosing...preferably black or dk gray (or whatever I currently have defined as the site's text color if that's easier).
3. The height of the entire 'bar' that contains Title/Caption/BuyPhoto needs to be flexible to change with the length of the caption....or a fixed height much large than is currently provided.
4. Ideally, there should be a margin, or some padding, between the bar and the image. I could live without that, but really would prefer not to.

The custom css I'm currently using this is what was provided as the #8 customization option in the original Announcement of the new Lightbox going live back in July/Aug (whichever).

And lastly, the current css does not seem to be picked up by Safari on iPhone nor iPad. Is there any means of making that happen.

Thank you for any assistance.

Hikin' Mike

Need your website first...

rjwilner

@Hikin' Mike said:
Need your website first...

https://www.rjwilner.photography/

Hikin' Mike

1. I would like to remove the gradated background and have it be either defined as white...or maybe more likely 'transparent' as white is my site bg color. Either would work.

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

2. I would like the text to be a color of my choosing...preferably black or dk gray (or whatever I currently have defined as the site's text color if that's easier).

.sm-user-ui .sm-lightbox-v2-photo-title .sm-icon,
.sm-user-ui .sm-lightbox-v2-photo-title .sm-button-label,
.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: black; text-shadow: none;}

4. Ideally, there should be a margin, or some padding, between the bar and the image. I could live without that, but really would prefer not to.

You have this already:

@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;
    }
}

Adjust the bottom: -60px; to create your desired "padding".

Hikin' Mike

Also, I'm not seeing any 'Buy Photo' button, not that it matters because I'm not sure I can address your #3.

Can't help with your last question as I don't own a mobile device.

rjwilner

@Hikin' Mike said:
Also, I'm not seeing any 'Buy Photo' button, not that it matters because I'm not sure I can address your #4.

Can't help with your last question as I don't own a mobile device.

I don't have the Buy button active currently, so only I have been seeing that.

I very much appreciate the time you took to research this and provide suggestions. Unfortunately, I think I'm going to have to find another option. I should have prioritized my original list because #3 is actually the most important to me and I can't seem to figure out how to adjust the height of the element containing the title/caption/buy. I think I have found the css element that defines it...which is currently set to 'auto' and I tried modifying it to define a fixed 200 px (just as a starting point for testing), but that seems not to have done the trick.

Oh well, back to the drawing board.

PeteEckford

Hi
Stupid question but how do you access the location for pasting css alterations to the lightbox?

denisegoldberg

@PeteEckford said:
Stupid question but how do you access the location for pasting css alterations to the lightbox?

Take a look at @Hikin' Mike's help page, https://gallery.imagesinthebackcountry.com/Smugmug-customization/Adding-CSS-to-your-SmugMug-Website

PeteEckford

Hi
Thanks- very helpful!
Pete