Where should I put CSS (customization Lightbox)?

Paul (France)

Dgrinner Allen came up with this CSS for customizing the Lightbox

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

You can see it work on his website:
https://www.photosbyat.com/Birds/Missouri-Bird-Photos-A-G/i-Mrg8Z6F/A

I want to use his code, but I don't know where to put it. Can somebody explain me - as to a child - where and how to put this code? Thanks!

Allen

Why is .sm-page-gallery-keyword in there? Is this only for a keyword page?
I would remove that because this is for all galleries.

Customize > Content and Design >
This is something that would be applicable to all galleries. I'd highlight "All Galleries" and add to a CSS box/widget there.

In the flyout on right Click the "+ Content" tab below. A list will appear showing widgets for everything on the page.

You're looking for an existing CSS widget. If none you'll have to add one
Anything in the Content list you mouse over will highlight that widget out on the page.

If a widget gets highlighted out on the page, at the top of it, it shows where its is applicable.
You're looking for CSS widget applicable to "All Galleries".

OR
If in the flyout under the CONTENT tab, there's no CSS listed applicable to "All Galleries" you need to add the widget.

In the top of the flyout make sure "All Galleries" is highlighted.

Scroll the page to the bottom. You'll be adding the CSS widget/box just above the footer.

On the flyout scroll down below "Content" and see "Add Content Blocks".

At the bottom of its list see "HTML & CSS". Click it to expand.
This is where you'll click and hold the CSS text and drag out on the page.

When dragging, out on the page hover over the photo/gallery box. Four arrows will appear.
Move mouse till the down arrow highlights.
Let go of mouse hold and widget will appear.

Click on its wrench, it will open so you can add CSS.
After adding CSS rules click "Done".
(You can also go back to the Content list and see new CSS at the bottom, click wrench there)

Now to save it all.
In the top right of the browser window click "DONE".
"PUBLISH NOW"

The content space wraps lines so to see all you might need to shorten text.
Or add more height to that button. I added xxx's in test it. Don't add them.
Then I played with the height in the 2nd rule below.
With the height set at zero, and you see all the text, don't add 2nd rule.

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

.sm-user-ui .sm-lightbox-v2 .sm-lightbox-v2-navbar-primary li:nth-child(2) {
height: 80px;
}

Paul (France)

"Why is .sm-page-gallery-keyword in there? Is this only for a keyword page?
I would remove that because this is for all galleries."

Hi Allen, thanks. I don't know the answer to your above question. The CSS I mentioned comes from you. And IT WORKS! You can see it for yourself here:
https://paulsmit.smugmug.com/Features/Europe/France/Annot-Wonderland-of-petrified-sand
And click on whatever photo.

Thanks a lot and stay healthy!