Swap the Image and Thumbnails (SmugMug Layout) - Aaron Meyers

Swap the Image and Thumbnails (SmugMug Layout)

By default the "SmugMug Layout" the thumbnails on the left and the main image on the right of the screen. If you'd like to swap them and make the image be on the left and the thumbnails on the right, use the following: Add the following code to your theme's Advanced CSS settings:

/* ================================================
   = SWAP IMAGE AND THUMBNAILS IN SMUGMUG LAYOUT  =
   ================================================ */
/* In SmugMug Layout, swap the thumbnails and the image.
    The image moves to the left and the thumbnails on the right.
    This section of code works for all browsers except FireFox. */
.sm-gallery-smugmug .sm-gallery-images.yui3-g {
  -webkit-flex-direction: row !important;
  -ms-flex-direction: row !important;
  flex-direction: row !important;
}

/* Move the image to the left. This code is required for FireFox */
.sm-gallery-smugmug .sm-gallery-image-container {
  float: left !important;
}

/* Move the comments section left as well */
.sm-gallery-content .sm-gallery-footer .sm-gallery-comments-container {
  margin-left: 0% !important;
}

/* Move the thumbnails slightly to the right to give some space between image and thumbs */
.yui3-u .sm-gallery-tiles-container .sm-gallery-tilesnav {
  margin-left: 5px !important;
}

/* Move the main image left so it lines up properly with the left side of the area */
.sm-gallery {
  margin-left: 0px !important;
}

/* Move the thumbnails to the right side of the page */
.sm-gallery-tiles-container .sm-gallery-tiles-bar,
.sm-gallery-tiles-container .sm-gallery-tilesnav {
  float: right;
}

/* Move the thumbnail pagination drop-down menu slightly up */
.sm-gallery-smugmug .sm-gallery-tiles-pagination {
  margin-top: -30px;
}

Comments

Powered by SmugMug Log In