Lightbox Formatting Tweaks

Motorider · February 9, 2020

I'm hoping these a simple tweaks for someone who knows CSS a little better than I do.

1) I would like the title & caption text to be displayed in white & yellow on pics in the lightbox just like they are in my galleries.

2) I'd also like to increase the height of the caption area so that it displays more than one line of text.

3) Is it possible to have keywords displayed without requiring users to click on a button? I would like them displayed when they 1st see the image in lightbox.

Thanks

Hikin' Mike · February 12, 2020

@Motorider said:
1) I would like the title & caption text to be displayed in white & yellow on pics in the lightbox just like they are in my galleries.

.sm-user-ui .sm-text-ellipsis {color:yellow;}

@Motorider said:
2) I'd also like to increase the height of the caption area so that it displays more than one line of text.

SM designed it to display only one line.

@Motorider said:
3) Is it possible to have keywords displayed without requiring users to click on a button? I would like them displayed when they 1st see the image in lightbox.

Not that I know of.

Motorider · February 13, 2020

Thank you for the code for the text color as well as taking the time to clarify the other two items Mike. I built my site about 7 years ago & haven't had a chance to update it until last month when I quickly realized I'd forgotten almost everything I knew about SM and CSS. So while I do have some CSS in my site & it worked well back then, some of it now needs to be cleaned up, like this simple font color change that didn't carry over into the new Lightbox. Here's the old code I had in there before which I've replaced with yours:

.sm-lightbox-basic .yui3-widget-ft .sm-lightbox-caption {color: gold !important;}

Unfortunately, I think there probably a lot of other lines of code in there that are no longer working, but I don't know enough about CSS to feel safe in removing them. I guess as long as I'm seeing the results I want on my site & they're not causing any delays or problems with it loading, then they're probably fine being left there... right?

I also spent a little time looking through your site & wanted to thank you for the items you have there to help SM users like myself. One question I have about the different CSS sections though is how does the 'Theme' section differ from 'Entire Site' CSS section? How do I know when to add CSS to one section or the other?

Cheers,
Daren

The Mechanic · February 13, 2020

@Motorider

I took a peek at your site and there are a few more options to make the lightbox caption look like the gallery caption. This should help you out:

/*** Lightbox Caption Modifications *** Smugocity **********/
/*** Show More Text In Lightbox Caption ***/
.sm-lightbox-v2-photo-title-and-caption .sm-text-ellipsis {
white-space: normal !important;
}

/*** Change Lightbox Caption - Title Text (h1)***/
.sm-lightbox-v2-photo-title-and-caption h1 {
color: white !important;
}

/*** Change Lightbox Caption - Description Text (p)***/
.sm-lightbox-v2-photo-title-and-caption p {
color: yellow !important;
}

/*** Alter The Caption Box Background ***/
.sm-lightbox-v2-photo-buttons-scrim-dark {
background: rgba(0, 0, 0, 0.60) !important;
padding-top: 2% !important;
}
/******************** www.smugocity.com ********************/

This is notated nicely so you can see what each item does. You can change the colors to any hex color by replacing the word white with #fffffff for example.

Hikin' Mike · February 13, 2020

@Motorider said:
One question I have about the different CSS sections though is how does the 'Theme' section differ from 'Entire Site' CSS section? How do I know when to add CSS to one section or the other?

It's probably a personal preference, but I put most of my custom CSS in my theme's custom CSS section. If I were to change to a different theme, I would have to start over again, which is what I want anyway. I do have some CSS that are specific to the Galleries, mainly for my tutorial stuff, so I want that code stay with the galleries regardless of theme.

Allen · February 13, 2020

The only CSS I put in the theme are the changes to the theme. Make the site look pretty.
Like Mike said changing themes would lose all your CSS.

I use all the CSS sections so I can easiely find specific CSS. The old Smug had one user CSS file that had everything in it. Almost impossible to find anything.
Now I put folder CSS in "All Folders", gallery CSS in "all galleries".
General CSS in "entire site".
At least I try to do this.

One thing I'd like to see is being able to label each of the CSS boxes in the content flyout.

BTW, I copy out each CSS and paste into separate texts file with a version number for backup.
Few examples: Also copy out HTML and save in text file.
_NewSmug CSS Entire Site 1 of 4 v2.txt
_NewSmug CSS All Galleries 4 of 4 v28.txt
_NewSmug CSS All Folders v4 new,txt

Motorider · February 15, 2020

Thank you all for your wise advice, it's definitely helped.

Lightbox Formatting Tweaks

Comments