How to Style Thumbnail Titles and Captions on SmugMug

Customize the appearance of photo titles and captions displayed on gallery thumbnails including font size, color, and text transform.

Gallery thumbnails in SmugMug can display titles and captions beneath or over the images. This tutorial shows you how to customize their appearance to match your site's design.

Thumbnail titles and captions styling

CSS code

Add this to a CSS content block in your gallery or the Entire Site section:

/* Style thumbnail titles */
.sm-user-ui .sm-tile-title a {
    font-size: 18px;
    color: #ffd400;
}

/* Style thumbnail captions */
.sm-user-ui .sm-tile-caption {
    font-size: 16px;
    color: #ff0000;
}

What you can customize

Color

Change the color value using hex codes or color names:

color: #ffffff; /* White */
color: #333333; /* Dark gray */
color: #0066cc; /* Blue */
color: gold;    /* Named color */

Text transform

Make titles uppercase, lowercase, or capitalized:

.sm-user-ui .sm-tile-title a {
    text-transform: uppercase;
}

Options:

uppercase — ALL CAPS
lowercase — all lowercase
capitalize — First Letter Of Each Word

Font weight

Make text bolder or lighter:

.sm-user-ui .sm-tile-title a {
    font-weight: bold;   /* Bold */
    font-weight: 300;    /* Light */
    font-weight: normal; /* Regular */
}

Letter spacing

Adjust spacing between letters:

.sm-user-ui .sm-tile-title a {
    letter-spacing: 2px;  /* Spaced out */
    letter-spacing: -1px; /* Tighter */
}

Complete example

Here's a comprehensive styling example:

/* Styled thumbnail titles */
.sm-user-ui .sm-tile-title a {
    font-size: 16px;
    color: #ffffff;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 600;
}

/* Styled thumbnail captions */
.sm-user-ui .sm-tile-caption {
    font-size: 14px;
    color: #999999;
    font-style: italic;
    line-height: 1.4;
}

Style on hover

Add effects when visitors hover over thumbnails:

/* Title hover effect */
.sm-user-ui .sm-tile-title a:hover {
    color: #0066cc;
    text-decoration: underline;
}

/* Fade in captions on hover */
.sm-user-ui .sm-tile-caption {
    opacity: 0.7;
    transition: opacity 0.3s ease;
}

.sm-user-ui .sm-tile:hover .sm-tile-caption {
    opacity: 1;
}

These styles apply to the text displayed below or around thumbnails in grid gallery views. For lightbox text styling, see the Lightbox Font Sizes tutorial.

Where to add the code

Single gallery — Add CSS content block to that specific gallery
All galleries — Add to the "All Galleries" section
Entire site — Add to the "Entire Site" section (also affects folder thumbnails)