Styling Album, Folder& Page Thumbnails on SmugMug - Fine Art Prints for Sale

Styling Album, Folder and Page Thumbnails

Galleries - 3:2

Folders - 1:1

Pages - 4:3

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;
	-webkit-box-shadow: 5px 5px 5px #151515;
	   -moz-box-shadow: 5px 5px 5px #151515;
		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: white;
		}	

/* "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;
	}

Powered by SmugMug Log In