Flip Photo and Thumbnails of Smugmug Theme

BeautifulWorld · June 7, 2017

Hi,
beautifulworld.photography/Collections/NatureMade-Landscapes/
In the above gallery, is there a way to flip the photo and the Thumbnails? The Thumbnails on the right and the photo on the left?

Thanks
Karthik

Lille Ulven · June 7, 2017

Hi Karthik,

In theory, there is a way. Add this CSS to a CSS-box valid for the particular gallery:

.sm-gallery-smugmug .sm-gallery-images.yui3-g {
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
}
.sm-gallery-smugmug .sm-gallery-image-container {
    float: left !important;
}
.sm-gallery-smugmug .sm-gallery-tiles-container {
    float: right !important;
}

It should do the trick for you.

Good luck

Lille Ulven

Hikin' Mike · June 7, 2017

@Lille Ulven

One of those rare occasions that the web tools doesn't work (Chrome). I created a test gallery and it works. You don't need the !important if you use this:

/**
* Flips Photo and Thumbnails for SM Galleries 
***************************************************/    
.sm-user-ui .sm-gallery-smugmug .sm-gallery-images.yui3-g {
    -webkit-flex-direction: row;
        -ms-flex-direction: row;
            flex-direction: row;
    }

.sm-user-ui .sm-gallery-smugmug .sm-gallery-image-container {
    float: left;
    }

.sm-user-ui .sm-gallery-smugmug .sm-gallery-tiles-container {
    float: right;
    }

BeautifulWorld · June 7, 2017

Worked! Thank you. Is there a full CSS list for smugmug? Like how do I find all the names for the containers and galleries etc? Like .sm-gallery-image-container ?

BeautifulWorld · June 7, 2017

Also, In the same gallery beautifulworld.photography/Collections/NatureMade-Landscapes/ can you see two comment boxes at the bottom? Not sure why it is showing up for me. I see that only in the Smugmug gallery theme. Also when I go to Content editor I see the comment box in the gallery box but can't seem to edit it.

Lille Ulven · June 7, 2017

Yes, I see them both too.
You can "disable" the lower one by adding this css to your gallery-css-block:
.sm-page-widget-body .sm-comment-add {
display: none;
}

And you can find those container names by using the web developer tools in for example Firefox (Extras -> Web-developer -> Show web-developer tools).

Good luck

Lille Ulven

BeautifulWorld · June 7, 2017

Thank you. I found the developer tools and found that the top comment section was in the footer section and turned it off. Seems to work. Thank you again.

.sm-gallery-footer .sm-gallery-comments-container {
display: none;
}

Flip Photo and Thumbnails of Smugmug Theme

Comments