Add a Border Around Thumbnails and Gallery Image - Aaron Meyers

Add a Border Around Thumbnails and Gallery Image

The Legacy SmugMug had a slight grey border around the main image and thumbnails on your page. The New SmugMug has no border by default. To add a border add the following CSS:

Border around Thumbnails AND Main Image

/* Add 1 pixel border around the thumbnails and photos */
.sm-user-ui .sm-gallery-smugmug .sm-image {
  border: 1px solid #4F4F4F;
  padding: 0px;
}

/* Set the overflow of the images to be visible so the border actually displays properly */
.sm-user-ui .sm-gallery-smugmug .sm-tile-content {
  position: relative;
  display: block;
  overflow: visible;
}

Border Around Thumbnails Only

If you would like to limit the border to be only around the thumbnail images, use this code:
/* Add 1 pixel border around the thumbnails  */
.sm-user-ui .sm-gallery-tilesnav .sm-image {
  border: 1px solid #4F4F4F;
  padding: 0px;
}

/* Set the overflow of the images to be visible so the border actually displays properly */
.sm-user-ui .sm-gallery-smugmug .sm-tile-content {
  position: relative;
  display: block;
  overflow: visible;
}

Border around Main Image Only

If you would like to limit the border to be only around the thumbnail images, use this code:
/* Add 1 pixel border around the thumbnails and photos */
.sm-user-ui .sm-gallery-image-container .sm-image {
  border: 1px solid #4F4F4F;
  padding: 0px;
}

/* Set the overflow of the images to be visible so the border actually displays properly */
.sm-user-ui .sm-gallery-smugmug .sm-tile-content {
  position: relative;
  display: block;
  overflow: visible;
}

Comments

Powered by SmugMug Log In