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 blue 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.
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;
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;
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: red; }
/* 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: blue; }
/* Adds Border and Drop-Shadow on Smugmug Gallery Style End */
This site and all of its contents are copyright © 2022 Images in the Backcountry / Mike Matenkosky – All rights reserved.
By using this site you agree to our Privacy Policy.