Clarify with copy: updating your lightbox view.

Tomasz Nowicki
SmugMug
Published in
2 min readDec 5, 2017

--

SmugMug has a beautiful, minimalistic look when viewing your images in the lightbox — that is, when you click on an image and the image shows full screen with icons at the bottom. Although I like this minimalistic look, I’ve been asked many times if it was possible to add text labels to these icons to make it more obvious what each of them do.

Icons only vs. icons and descriptions

Adding these descriptions is as easy as adding a few lines of CSS to your site. Plus, you can customize the descriptions however you see fit. You don’t need to use the same labels as I did on my site; you can change the labels to whatever words you want in the CSS code below. I have also added a font-size parameter to the label to make the text a little smaller. You can adjust the pixel (px) value for each label individually.

Adding CSS code

After logging in to your SmugMug account, click Customize > Content and Design from the main navigation at the top of the page. From the main customizer panel, make sure you have All Galleries selected. (We want to affect all galleries with this code.) Under the CONTENT section, scroll down to Add Content Blocks and drag a CSS content block to your page and paste the following code into it.

Happy customizing! To see more SmugMug customization tips and how-tos, visit https://portal.photom.me.

--

--

Photographer, Designer, Web Designer, Cat lover :) Check out my SmugMug website - www.photom.me