Add Drop Shadow & Border to the SmugMug Gallery - Prints for Sale

Add Drop Shadow & Border to the SmugMug Gallery

This will add a red 1px on the thumbnails and a red 5px on the larger photo. It also adds a white border when hovered. This also adds a drop shadow on both. Due to the way the hover is done on the thumbnails here, you can still see part of the red border and I can’t figure out how to hide it. Add this to your theme’s CSS or add a CSS block on your ‘All Galleries’ section.

You can view a live demo here.

CSS


/** 
* Adds Border and Drop-Shadow on Smugmug Gallery Style 
**********************************************************/
.sm-user-ui .sm-gallery-smugmug .sm-tile-overlay,
.sm-user-ui .sm-gallery-smugmug .sm-tile-limit-both,
.sm-user-ui .sm-gallery-smugmug .sm-tile-single.sm-tiles-uncropped .sm-image {
	max-width: 90%; /* Decrease 'max-width' when increasing border */
	max-height: 90%; /* Decrease 'max-height' when increasing border */
	}	
	
/* Small Thumbnails */
.sm-user-ui .sm-gallery-smugmug .sm-tile-overlay,
.sm-user-ui .sm-gallery-smugmug .sm-tile-limit-both {
	border: 1px solid;
	-webkit-box-shadow: 2px 3px 5px #151515;
	   -moz-box-shadow: 2px 3px 5px #151515;
			box-shadow: 2px 3px 5px #151515;
	}
	
	/* Single/Full-size Photo */
.sm-user-ui .sm-gallery-smugmug .sm-tile-single.sm-tiles-uncropped .sm-image {
	border: 5px solid;
	margin: 10px;
	-webkit-box-shadow: 5px 5px 5px #151515;
	   -moz-box-shadow: 5px 5px 5px #151515;
			box-shadow: 5px 5px 5px #151515;
	}	

.sm-user-ui .sm-gallery-smugmug .sm-tile-limit-both,
.sm-user-ui .sm-gallery-smugmug .sm-tile-single.sm-tiles-uncropped .sm-image {
	border-color: #f00;
	}	
	
	/* Hover Color */
.sm-user-ui .sm-gallery-smugmug .sm-tile-overlay,
.sm-user-ui .sm-gallery-smugmug .sm-tile-single.sm-tiles-uncropped .sm-image:hover {
	border-color: #fff;
	}

ActionActionAltAdjustAlertAlert2AngleBracketDownAngleBracketLeftAngleBracketLeftSlimAngleBracketRightAngleBracketRightSlimAngleBracketUpic AspectRectable 18dpic AspectSquare 18dpBrowserCalendarCameraPhotoCameraPhoto2CameraVideo2CartCart2CartAddCartAdd2CheckmarkCommentComment2CreditCardCropDesktopDownloadDownload2EditEdit2EmailEmail2FlagFlag2FolderFolder2FolderOpenFullScreenGalleryGallery2GearHeartHeartOutlinedHelpHelpEncircledHideHistoryHistory2HomeHome2ImageImage2InfoInfoEncircledInfoEncircled2LaptopLayoutLinkLockLock2MenuMenu2MinusMinusSlimMobileMoreHorizMoreVertPagePage2PausePlayPlusPlusSlimPrinterSearchSearch2ShareSizesStarStarOutlinedSyncTabletTagTrashTrash2UploadUpload2UserUsersVideoCameraViewWarningWrenchXCrossActionActionAltAddAdjustAlertAlert2AmazonAndroidAppleArrowBackArrowNextBrowserCameraPhotoCameraPhoto2CartCart2CartAddCheckCloseCommentComment2CropCursorMoveDesktopDownloadDropboxFacebookFlickrFolderFolder2FullScreenSlimGalleryGallery2GoogleDriveGooglePhotosHelpEncircledHelpEncircled2HistoryHistory2HomeHome2InfoEncircledInfoEncircled2LaptopLayoutLightroomLinkLockLock2MenuMobileMoreHorizMoreVertNavigateBackNavigateNextPaintPausePeoplePeople2PersonPerson2PhoneSavePlayPrinterRemoveSearchSettingsSettings2ShareSharePrivateSizesSmugMugStarStar2TabletTrashTrash2TwitterUploadUpload2Wrench Page 1Page 1 CopyCombined ShapeCombined ShapeCombined ShapeCombined ShapetemplatestemplatesEZprints-98404-landscapeEZprints-98404-portraittemplatestemplatesEZprints-98406-landscapeEZprints-98406-portraitEZprints-98407-landscapeEZprints-98407-portraittemplatestemplatestemplatestemplatesEZprints-98416-landscapeEZprints-98416-portraitEZprints-98417-landscapeEZprints-98417-portraitEZprints-98418-landscapeEZprints-98418-portraitEZprints-98419-landscapeEZprints-98419-portraitshared-style-defs
Powered by SmugMug Log In