1. Home
  2. Customization
  3. Add text labels to icon buttons in lightbox view

Add text labels to icon buttons in lightbox view

Intro

SmugMug has a beautiful, minimalistic look when viewing your images in lightbox view { when you click on an image and the image shows full screen with icons at the bottom }.  Although I like this minimalistic look – I have been asked multiple times how to add text labels to these icons – to make it more obvious what they do.

I am going to show you how to transform this look:

lightbox icon view - smugmug

Into this look:

lightbox ixons with labels

You do not need to use the same labels as I did on my site – you can change the labels to your own in the CSS code below.

I have also added a ‘font-size’ to the label to make the text a little smaller.  You can adjust the px value for each label individually.

 

Adding CSS code

Log in to your SmugMug account → click CUSTOMIZE → CONTENT AND DESIGN → on the right top panel make sure that you select ALL GALLERIES { we want to affect all galleries with this code } → add a CSS content block to the ALL GALLERIES section of your site → paste this code to it:

 

Updated on September 15, 2017

Was this article helpful?

Related Articles

Leave a Comment