Styling Album, Folder& Page Thumbnails on SmugMug

This adds a red “frame” (border); a gray “mat” (background); a dark drop shadow on all of the Albums/Galleries, Folders and Page thumbnails; and a white border/mat when hovered. Add this to your theme’s CSS or add a CSS block on your ‘All Galleries’ section.

You may have/want to create an unlisted galleries for specific format (1:1, 3:1, 3:2 etc) gallery feature images. You can see the square (1:1) format squishes the images unless you create specific crops.

I’ve included three formats (3:2, 4:3 and 1:1) below. Feel free to remove unused code and/or edit the sizes to suit.

CSS


/**
* Adds "Frame", "Mat" and Drop Shadows on Albums/Galleries, Folders and Pages Thumbnails
******************************************************************************************/	
.sm-user-ui .sm-tile-page .sm-tile-content,
.sm-user-ui .sm-tile-album .sm-tile-content,
.sm-user-ui .sm-tile-folder .sm-tile-content {
	border: 2px solid red;
	box-shadow: 5px 5px 5px #151515;
}	

		/* Frame Hover Color */
	.sm-user-ui .sm-tile-page .sm-tile-content:hover,
	.sm-user-ui .sm-tile-album .sm-tile-content:hover,
	.sm-user-ui .sm-tile-folder .sm-tile-content:hover { border-color: blue; }	

	/* "Mat" Sizes - Landscape 3:2 */	
.sm-user-ui .sm-tiles-3x2 .sm-tile-content .sm-image {
	height: 90%;
	width: 	93%;
}	
	
	/* "Mat" Sizes - Square 1:1 */
.sm-user-ui .sm-tiles-1x1 .sm-tile-content .sm-image {
	height: 90%;
	width: 	90%;
}
	
	/* "Mat" Sizes - Landscape 4:3 */	
.sm-user-ui .sm-tiles-4x3 .sm-tile-content .sm-image {
	height: 90%;
	width: 	93%;
}		

	/* "Mat" Color */
.sm-user-ui .sm-tiles .sm-tile-content,
.sm-user-ui .sm-tiles-column-organic.sm-tiles-info-over .sm-tile-content,
.sm-user-ui .sm-tiles-column-organic.sm-tiles-info-cover .sm-tile-content,
.sm-user-ui .sm-tiles-column-organic .sm-tile-content.sm-tile-content-empty { background-color: gray; }
/* Adds "Frame", "Mat" and Drop Shadows on Albums/Galleries, Folders and Pages Thumbnails End */

Styling Album, Folder& Page Thumbnails on SmugMug

Galleries - 3:2

Folders - 1:1

Pages - 4:3

CSS