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

  • Aaron @ SmugMug

    on February 1, 2015

    This only works for the "SmugMug" gallery layout, not the Collage style ones. :(

  • Annie's World

    on February 1, 2015

    I'm not seeing any change with the code for outlining everything... perhaps the new Smugmug layout doesn't like this...

  • bluelinestudios

    on July 19, 2014

    Can I do a border around the folder images?

  • Alison Dodd

    on April 28, 2014

    Hi Aaron, could you tell me the code for the border to be displayed around the main image only please? I've tried to work it out from what you've posted above but I haven't any luck

    Thank you

  • Doesn't seem to work on my site either, not on smugmug gallery style either

  • Walt Zubak Photography

    on October 30, 2013

    can't seem to get this to work
    www.wzphotos.smugmug.com

  • K├╝lli Tedre Photography

    on October 19, 2013

    this seems to work only with smugmug gallery style :(

Powered by SmugMug Owner Log In