Simplifying SmugMug, some recent CSS tweaks

I’m on a kick to reduce clutter and cleanup my website. I made some changes to my blog several months ago and this time I’m tweaking SmugMug. My SmugMug galleries are my core repository. All my blog photos link to these images stored on Smugmug. And when you look at this gallery, that’s my customized SmugMug pages you are seeing. It is designed to blend into my blogging site.

Previously, I did everything to eliminate all the extra lines and borders, to have a simple, black look. But I wanted to simplify SmugMug even more. Take off the style and slide show buttons. Get rid of keywords. Eliminate all text clutter. So this past weekend, I cleaned up. What better way is there to spend a Sunday afternoon than to play with CSS (Cascading Style Sheets).

These customizations are available to SumgMug Power and Pro users. They change the underpinnings so be careful not to break up your SmugMug site. Only do this if you feel comfortable messing with CSS code and backup your site first. Don’t come to me if you mess something up. All of the advanced features are available through SmugMug’s Advanced Site-wide Customization page. Before you change anything, scroll to the bottom of the page and click the “Email it!” button. Smugmug should email you a compete listing of your site which will act like a backup. Don’t make any changes until you get this email addressed from the SmugMug Support Heros. Here is a link to a SmugMug article about the advance customizations that are available.

In the CSS field of the Advanced Site-wide Customization page I entered the following CSS values. They worked for me and they should work for you too. I have comments within the /* */ characters to remind me what they do. A good practice when messing with computer code.

/* remove breadcrumbs from all pages */
#breadCrumbTrail {display: none;}

/* remove Gallery Titles */
#galleryTitle {display: none;}

/* remove slideshow button  */
#slideshowButton { display: none; }

/* remove style button when not logged in */
.notLoggedIn .styleButton { display: none; }

/* remove Keywords when not logged in  */
.notLoggedIn #photoKeywords { display: none; }

Note: Take a look at one of my galleries to see the effect of these CSS changes.

I have 5 sets of commands that hides part of the SmugMug interface on my site. You don’t have to use all 5; you can apply each one individually. Also, notice the last two commands start with .notLoggedIn which says hide the button or keywords for visitors but display them for you. In this way, you can still use these 2 features but guests can’t. Want more customization info, visit Digital Grin, SmugMug’s official support forum.

2 thoughts on “Simplifying SmugMug, some recent CSS tweaks

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.