Customizing the New Lightbox

Hikin' Mike

@blouie said:
As mentioned, my objective is to show captions but not show the Photo Details button. And I've tried the above mentioned code. However, probably other code is interfering. So here is the code I have now that perhaps is the interfering code:

Remove all 3 and use this:

/* Removes "Shadow" */
.sm-user-ui .sm-lightbox-v2-photo-buttons-scrim-dark {background: transparent;}

/* Displays Captions All of the Time */
.sm-user-ui .sm-lightbox-v2[data-hide-ui] .sm-lightbox-v2-hideable {opacity: 1;}

/* Removes Icons */
.sm-user-ui .sm-lightbox-v2-photo-title .sm-icon,
.sm-user-ui .sm-button.sm-button-skin-default.sm-button-nochrome[data-elem-id="lightbox_details_button"],
.sm-user-ui .sm-button.sm-button-skin-default.sm-button-nochrome[data-elem-id="lightbox_fullscreen_button"] {display: none;}

/* Changes Caption Color */
.sm-user-ui .sm-button.sm-button-nochrome[data-elem-id="lightbox_image_title"] p {color: black;}

leftquark

@camner said:
That's wonderful! BUT, if "Shop View" is only available to Pro and Portfolio level users, then those of use on the Power plan are going to be SOL, right? Obviously that's a business decision for SM to make, but since Shop View is intended to help Pro and Portfolio level users drive their selling-prints business (and presumably those that use SM primarily as a sales platform are less likely to have captions, let alone prefer to have captions always showing), might SM consider making the option to show captions by default NOT be limited to those with higher level plans?

Absolutely. This setting wouldn't be something we'd gate on specific plans. One way I could invision it being built is that certain options within that setting (like Shop View) wouldn't be shown if the plan didn't support it. For example, for Power/Basic accounts, the options could be "Details, Share, Comments" while Portfolio/Pro would have an additional "Shop" option.

camner

@leftquark said:

@camner said:
That's wonderful! BUT, if "Shop View" is only available to Pro and Portfolio level users, then those of use on the Power plan are going to be SOL, right? Obviously that's a business decision for SM to make, but since Shop View is intended to help Pro and Portfolio level users drive their selling-prints business (and presumably those that use SM primarily as a sales platform are less likely to have captions, let alone prefer to have captions always showing), might SM consider making the option to show captions by default NOT be limited to those with higher level plans?

Absolutely. This setting wouldn't be something we'd gate on specific plans. One way I could invision it being built is that certain options within that setting (like Shop View) wouldn't be shown if the plan didn't support it. For example, for Power/Basic accounts, the options could be "Details, Share, Comments" while Portfolio/Pro would have an additional "Shop" option.

Wonderful to hear! Thanks.

blouie

@Hikin' Mike said:

@blouie said:
As mentioned, my objective is to show captions but not show the Photo Details button. And I've tried the above mentioned code. However, probably other code is interfering. So here is the code I have now that perhaps is the interfering code:

Remove all 3 and use this:

```
/* Removes "Shadow" */
.sm-user-ui .sm-lightbox-v2-photo-buttons-scrim-dark {background: transparent;}

/* Displays Captions All of the Time */
.sm-user-ui .sm-lightbox-v2[data-hide-ui] .sm-lightbox-v2-hideable {opacity: 1;}

/* Removes Icons */
.sm-user-ui .sm-lightbox-v2-photo-title .sm-icon,
.sm-user-ui .sm-button.sm-button-skin-default.sm-button-nochrome[data-elem-id="lightbox_details_button"],
.sm-user-ui .sm-button.sm-button-skin-default.sm-button-nochrome[data-elem-id="lightbox_fullscreen_button"] {display: none;}

/* Changes Caption Color */
.sm-user-ui .sm-button.sm-button-nochrome[data-elem-id="lightbox_image_title"] p {color: black;}

Doesn't work. It still displays the Photo Details button. It works in the sense that clicking the Photo Details button then reveals the caption and the captions display, without having to again click Photo Details, throughout the clicking forward. But all I want is no Photo Details button and just the caption.

I guess I give up. All I wanted was to have it the way it was before the new Lightbox: just the image, the caption, the left and right arrows, and the X close button.

The Mechanic

@blouie It sounds like this is getting a bit confusing. The following links should help to address each thing you want to change one at a time:

Remove Lightbox Left Sidebar Nav:
https://smugocity.com/customization-toolbox/smugmug-lightbox-v2/remove-side-nav-bar/

Remove View Details When No Title/Caption Present:
https://smugocity.com/customization-toolbox/smugmug-lightbox-v2/remove-view-details/

Make The Caption Always On Without Mouse Movement:
https://smugocity.com/customization-toolbox/smugmug-lightbox-v2/static-title-caption-lightbox/

This should help you address these changes one at a time.

Paul (France)

Dear Smugmug and Dgrin-community, I like very much the lightbox lay-out AFTER you click on the "photo details"-symbol (or the cut-off caption): the photo at right, with title, captions and keywords left of the photo. I would like to get that lay-out immediately after my visitors click on a thumbnail in my gallery view. How can I skip the standard lightbox and directly go to the view with the photo details? Thanks for your suggestions, Paul.

camner

@Paul (France):
At the present time what you want is not possible. The SmugMug team has said that they intend to implement this at some point in the future.

Paul (France)

Isn't the only thing that is needed some code that says: "click on the photo details symbol"? Can somebody write the code for that command?

Allen

.> @Paul (France) said:

Isn't the only thing that is needed some code that says: "click on the photo details symbol"? Can somebody write the code for that command?

Not sure what you're referring to but.

Like this? Upper left corner.
https://www.photosbyat.com/Birds/Missouri-Bird-Photos-A-G/i-Mrg8Z6F/A

camner

@Allen
Can you share the CSS that you used to produce this effect?

(BTW, on my iPad only the first two lines appear...the third line (“on/off”) is missing)

Allen

@camner said:
@Allen
Can you share the CSS that you used to produce this effect?

(BTW, on my iPad only the first two lines appear...the third line (“on/off”) is missing)

Might try removing "& CAPTION" but line breaks aren't allowed and might not wrap right.
Maybe "PHOTO INFO On/Off" would wrap better.

or for only two lines (might also play with height for 3 lines)
content:" INFO On/Off";
font-size:90%;

 .sm-user-ui .sm-page-gallery-keyword .sm-lightbox-v2 .sm-lightbox-v2-navbar-primary li:nth-child(3) .sm-button-square:after {
  content:" INFO & CAPTION On/Off";
  font-size:75%;
  background:#222;
  color:#ff0
 }

RonvanderPlas

Does anyone know the code to get the title/caption displayed on mobile landscape?

Currently you have to click on the details button which opens an overlay that covers the whole image. The portrait display does show the title/caption fine. I would like to have that in landscape mode too.

Paul (France)

@Allen Yes, Allen, that is an acceptable solution. Thanks for the CSS-code. I have no idea where I should put that code. I have no experience with CSS. Can you explain to me where I should put it? And explain it like to a child ;-) Thanks!

LaurieWinterNZ

@leftquark I would like to add my support to those wanting the Title, Caption and other details to stay permanently visible on the left hand side in lightbox.
As I am planning on using Collage Landscape layout, this is the only way I can get all of that information to show nicely for each photo. Most of my customers are a little older, and may not realise to click on the caption or the hamburgers to see more.

I appreciate the various codes I have found reading through these posts but this is the one thing I would really, really like. The option to turn that on and off would satisfy both sides of the coin.

For me, the reasoning is that I want to include purchasing information in my caption. I live in New Zealand and SmugMug does not have a printer here. It's totally not economical for me as a hobby photographer to ship from other areas of the world, and thus I can not use SmugMug's buy functionality.

Davidw25

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

JoMel

I need some help with round corners in the new lightbox.

I used this code to round the corners:

.sm-user-ui .sm-lightbox-v2-photo {
border-radius:20px;
}

It mostly works good, but not on all photos. Some photos have alle 4 corners rounded but there are some where only the the upper corners were rounded and one or sometimes both corners at the bottom are still angular.
Why is this so and how can I fix this?

Allen

It's the background of the lightbox caption showing its square corners.
Add the radius to this, the caption box with background, to match the photo corner radius.

.sm-lightbox-v2-photo-buttons-scrim-dark {
    border-radius: 20px
}

JoMel

Perfect, now it`s looking good on all images.

Thanks

blouie

In Lightbox, how can I change the 'X' button to a button with the standard Internet icon of a grid indicating "goes to thumbnails'. Also, how to change the text of the popup from 'Close' to 'Thumbnails'.

Also, none of the suggestions mentioned above work to have persistent captions without having to first click the 'Photo Details' button. I want to not have the 'Photo Details' button at all; just the captions to appear automatically immediately when opening Lightbox. On both desktop and mobile. (With mobile now, the 'Photo Details' button doesn't even appear unless you hold the phone horizontally.) Also, not to have the appearance of the caption shift the image to the right in the window.

blouie

Also, how to get rid of the purple bar to the left of the 'Photo Details' button when the 'Photo Details' button has been clicked on?

savoirferret21

In my Lightbox, the tooltips for the icons are showing up as white text on white background. I've searched but cannot find the identifier to address the tooltips in CSS. I just need to change the tooltip background to black.

Hikin' Mike

@savoirferret21 said:
In my Lightbox, the tooltips for the icons are showing up as white text on white background. I've searched but cannot find the identifier to address the tooltips in CSS. I just need to change the tooltip background to black.

/**
* Changes Tooltip Color
**********************************/
.sm-user-ui.sm-tooltip,
.sm-user-ui .sm-tooltip {
  color: #000;
}

savoirferret21

> @"Hikin' Mike" said:
> /*** Changes Tooltip Color**********************************/.sm-user-ui.sm-tooltip,.sm-user-ui .sm-tooltip { color: #000;}

Thank you, Mike. I wish that worked, but they're still white-on-white.

Hikin' Mike

@savoirferret21 said:

@Hikin' Mike said:
/*** Changes Tooltip Color**********************************/.sm-user-ui.sm-tooltip,.sm-user-ui .sm-tooltip { color: #000;}

Thank you, Mike. I wish that worked, but they're still white-on-white.

Looks like they changed it to:

.sm-user-ui .sm-tooltip-v2,
.sm-user-ui .sm-tooltip-v2::after {background: #000;}

savoirferret21

> @"Hikin' Mike" said:
> Looks like they changed it to:
>
> .sm-user-ui .sm-tooltip-v2,.sm-user-ui .sm-tooltip-v2::after {background: #000;}

Awesome. That worked.

However, I probably should have dug deeper before reporting this issue. It seems that all buttons/textareas/etc. are displaying white-on-white. See attached photos of the Share Photos and Commerce popups.

This all became apparent after I changed my Lightbox background color to black. Obviously, not all elements followed suit. Text was always white and I was working to make the Lightbox readable. I used the following code

.sm-user-ui .sm-lightbox-v2,
.sm-user-ui .sm-lightbox-v2-navbar,
.sm-user-ui .sm-lightbox-v2-sidebar {
background-color: #000000; /* or #000, #8B008B, etc */
}

https://www.savoirferret.com

Hikin' Mike

@savoirferret21 said:

@Hikin' Mike said:
Looks like they changed it to:

.sm-user-ui .sm-tooltip-v2,.sm-user-ui .sm-tooltip-v2::after {background: #000;}

Awesome. That worked.

However, I probably should have dug deeper before reporting this issue. It seems that all buttons/textareas/etc. are displaying white-on-white. See attached photos of the Share Photos and Commerce popups.

This all became apparent after I changed my Lightbox background color to black. Obviously, not all elements followed suit. Text was always white and I was working to make the Lightbox readable. I used the following code

.sm-user-ui .sm-lightbox-v2,
.sm-user-ui .sm-lightbox-v2-navbar,
.sm-user-ui .sm-lightbox-v2-sidebar {
background-color: #000000; /* or #000, #8B008B, etc */
}

https://www.savoirferret.com

Look at this: https://gallery.imagesinthebackcountry.com/Smugmug-customization/Change-Background-Color-in-SmugMug-Lightbox

savoirferret21

@Hikin' Mike said:

Look at this: https://gallery.imagesinthebackcountry.com/Smugmug-customization/Change-Background-Color-in-SmugMug-Lightbox

Thanks, Mike. That is a large feast of code. I will get to chomping on it shortly.

hadron

@Hikin' Mike said:

@blouie said:
As mentioned, my objective is to show captions but not show the Photo Details button. And I've tried the above mentioned code. However, probably other code is interfering. So here is the code I have now that perhaps is the interfering code:

Remove all 3 and use this:

/* Removes "Shadow" */
.sm-user-ui .sm-lightbox-v2-photo-buttons-scrim-dark {background: transparent;}

/* Displays Captions All of the Time */
.sm-user-ui .sm-lightbox-v2[data-hide-ui] .sm-lightbox-v2-hideable {opacity: 1;}

/* Removes Icons */
.sm-user-ui .sm-lightbox-v2-photo-title .sm-icon,
.sm-user-ui .sm-button.sm-button-skin-default.sm-button-nochrome[data-elem-id="lightbox_details_button"],
.sm-user-ui .sm-button.sm-button-skin-default.sm-button-nochrome[data-elem-id="lightbox_fullscreen_button"] {display: none;}

/* Changes Caption Color */
.sm-user-ui .sm-button.sm-button-nochrome[data-elem-id="lightbox_image_title"] p {color: black;}

I'm a Pro SM user. This CSS in my Homepage CSS does not work. Should it?
I'm trying to get the complete Captions always showing Under the photo, and remove the PhotoDetails button.

Hikin' Mike

@hadron said:
I'm a Pro SM user. This CSS in my Homepage CSS does not work. Should it?
I'm trying to get the complete Captions always showing Under the photo, and remove the PhotoDetails button.

It has to go in your theme's custom CSS section, not on your home page.

blouie

@Hikin' Mike said:

@hadron said:
I'm a Pro SM user. This CSS in my Homepage CSS does not work. Should it?
I'm trying to get the complete Captions always showing Under the photo, and remove the PhotoDetails button.

It has to go in your theme's custom CSS section, not on your home page.

I tried that, and it didn't work.

I went to Entire Site > My Themes > wrench on the theme that is my active theme > Advanced > Custom CSS Edit > pasted in the code. And published. No change occurs on my Lightbox page,