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:

/* Mobile first media query only applies our custom labels to desktops and tablets */

@media screen and (min-width: 737px) {
    /*Allow lightbox icon buttons to expand to our custom content width*/
    .sm-user-ui .sm-lightbox .sm-lightbox-panel .sm-lightbox-tools .sm-lightbox-icons .sm-button {
        width: auto;
    }
    /*Give the icons some space between them and our custom text*/
    .sm-user-ui .sm-lightbox .sm-lightbox-panel .sm-lightbox-tools .sm-lightbox-icons .sm-button .sm-icon,
    .sm-user-ui .sm-lightbox .sm-lightbox-panel .sm-lightbox-tools .sm-lightbox-icons .sm-button .sm-fonticon {
        margin-right: 6px;
    }
    /*Adding download image label to the download icon in lightbox view*/
    .sm-user-ui .sm-button-image-download:after {
        content: ' Download';
        font-size: 16px;
    }
    /*Adding image size label to the size icon in lightbox view */
    .sm-user-ui .sm-button-image-sizes:after {
        content: ' Image size';
        font-size: 16px;
    }
    /*Adding Image info label to the info icon in lightbox view*/
    .sm-user-ui .sm-button-image-info:after {
        content: ' Information';
        font-size: 16px;
    }
    /*Adding leave a comment labeel to the comment icon in lightbox view*/
    .sm-user-ui .sm-button-image-comment:after {
        content: ' Leave a comment';
        font-size: 16px;
    }
    /*Adding share photo label to the share icon in lightbox view*/
    .sm-user-ui .sm-button-image-share:after {
        content: ' Share photo';
        font-size: 16px;
    }
    /*Adding tools label to the tools icon in lightbox view*/
    .sm-user-ui .sm-button-image-tools:after {
        content: ' Tools';
        font-size: 16px;
    }
}

 

Updated on May 9, 2018

Was this article helpful?

Related Articles

Comments

  1. Thank you for sharing this customization. I added it to my site and it looked great but now, a few weeks later, the labels are jumbled up over the icons when viewing the images. At this point I just want to remove the CSS but can’t seem to find how to do this. Can you help?

  2. Please disregard my previous comment – I see the article was updated Friday. I added the new code and now it’s working fine. Again, Thank you for sharing this AND keeping it updated!

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.