Tweaking the "smugmug" gallery style

zubenelgenubi

Hi all,

I have been tweaking my new-smugmug site at http://zubenelgenubi.smugmug.com and for the most part I'm very happy with the way it looks and works. But one last issue is now bugging me.

I do like the general concept of the "smugmug" gallery style, with a panel for thumbnails next to a large single photo. But I can't find a way to tweak this style (or build something similar from scratch that is closer to what I really want.)

Specifically, I would like to change the layout so that essentially ALL of the available screen real-estate is used by the thumbnails and highlighted image. Currently, the layout engine is reserving a substantial portion of the screen to display the (quite large) comments box, and there are large empty borders between the thumbnails and highlighted image. Since smugmug is supposed to be about the photos, I would prefer it if my photos are rendered as large as possible on my users' screens. I think it's fine for the style to include the comment box - but I would prefer it didn't occupy so much screen space during normal photo browsing. It would be better (IMHO) if the comment box is "off the bottom" of the default screen, so the users have to scroll down to use it. This would give more room for photos. (The navigation and social media buttons are small enough that they could - and probably should - remain visible without needing a scroll-down to see them.)

Similarly, despite having selected the "stretchy" and "fill height" layout options, I am still getting a lot of unused space between the thumbnails and the featured image. So I'm wondering if there is a way to reduce this margin?

I have used some CSS code that I found in support forums etc to achieve things like rounded corners, borders, and drop shadows on the thumbnails and highlighted image. Could that be affecting the layout?

Finally...I wish I knew how all the gurus out there KNOW what commands and properties are available to tweak with CSS? Clearly there's a whole galaxy of smugmug-specific style elements that can be tweaked - but is there a user guide to these elements somewhere, so I can see what other goodies might be possible? I don't even know what the names of these elements are...

Thanks in advance for any help and advice...

denisegoldberg

zubenelgenubi wrote: »

...I wish I knew how all the gurus out there KNOW what commands and properties are available to tweak with CSS? Clearly there's a whole galaxy of smugmug-specific style elements that can be tweaked - but is there a user guide to these elements somewhere, so I can see what other goodies might be possible? I don't even know what the names of these elements are...

There isn't a user guide to the smug screen elements.

Most people are using tools available on Firefox or Chrome to inspect the page elements and to experiment with code changes.

Chrome: https://developers.google.com/chrome-developer-tools/
Firefox: https://developer.mozilla.org/en-US/docs/Tools

--- Denise

zubenelgenubi

Thanks for the tip
Denise,

Thanks so much for clarifying how people learn about what's available to customize. I will certainly have a look at this. I sure how smugmug release a manual eventually, but for now it will be fun to do some exploring using the tools you've identified.

Thanks again!

- Mark

Hikin' Mike

zubenelgenubi wrote: »

Denise,

Thanks so much for clarifying how people learn about what's available to customize. I will certainly have a look at this. I sure how smugmug release a manual eventually, but for now it will be fun to do some exploring using the tools you've identified.

Thanks again!

- Mark

They didn't do that with the legacy, so I doubt they'll do that on the new one. But like Denise said, using one of the tools available from Chrome of Firefox is the way to go.