Custom SmugMug Gallery Theming

Of the many photo storage and sharing sites out there, few offer built in theming options and even fewer offer options for users novice to expert. For those looking to do more with their photos, this is an important feature to have available.

SmugMug, one of the best sites for storing, sharing and selling your photos, offers not only pre-built themes but options to easily customize your galleries and even expert options for custom coding. This how-to will walk through the customization process for both novice and expert users. Also, enter for your chance to win a SmugMug Pro account, worth $150!

SmugMug

SmugMug

Getting Started

If you’re not familiar with SmugMug, you might consider reading our Flickr, Picasa and SmugMug Shootout. If you haven’t signed up yet, head over to SmugMug and get signed up. Don’t worry, you’ll have a free 14 day trial period and won’t be asked for any payment information to get started.

You’ll need a Power or Pro plan for full gallery customization.

SmugMug Free Trial

SmugMug Free Trial

Once you’ve signed up and logged in, head to your Control Panel by clicking Tools > Go to Control Panel. Once viewing your control panel, click the Customize tab.

Control Panel > Customize

Control Panel > Customize

You’ll see several customization options under the Customize section, including Easy Customizer, Advanced Customizer and My Themes. We’ll take a look at all three, beginning with the Easy Customizer.

Easy Customizer

Once you’ve clicked edit for the Easy Customizer, you’ll be presented with a preview of your theme on the left and customization options on the right. Options to cancel, restart, save for later and publish are presented in the upper right of the page.

Easy Customizer

Easy Customizer

Basic Appearance and Browser

Basic Appearance and Browser

Basic Appearance and Browser

The Basic Appearance option is basic, offering a light or dark version of the base theme. The next option, Browser, allows you to specify a custom page title and/or favicon. Straight forward and simple.

Header

Next, you can add a custom header. If you’d like to remove the default SmugMug header or position it above/below your custom header, you can do that too. Your custom header is called a Custom Banner and you can choose to use an image or simply text. If you use text, you can select the font face, size, color, alignment and set it to a specific URL.

Header

Header

If you’d like to add your own navigation to your custom banner, simply select the Add a Navigation Bar checkbox. Select whether you would like it positioned above or below your banner, then click the Navigation Bar Builder button.

Navigation Bar Builder

Navigation Bar Builder

I’m impressed with the Navigation Bar Builder and both its simplicity and capabilities. It’s great to be able to select font face, size, color and text decoration as well as link separation and alignment. This will make it a breeze for anyone to customize their themes.

Lastly, you can specify a custom width and height for your custom banner.

Theme Design Elements

The Background, Text, Boxes and Photos sections offer options to customize some of the main theme design elements. You’re able to use a custom background image or color, custom font faces and colors for body, title, navigation and link text. Box background and borders can be customized as far as color or transparency, but no background image options. Lastly, photo frames can be customized as far as border color and the right-click message displayed for protected galleries.

Theme Design Elements

Theme Design Elements

Footer and Homepage

The footer and homepage options are pretty basic, offering options such as a mini footer or removing it all-together, a custom footer image or text (similar to the header) and a custom footer size. The homepage option simply displays your username near the header, which I’ve deselected.

Footer and Homepage

Footer and Homepage

Advanced Editor

If you’re not able to customize your gallery with the Easy Editor to the extent that you’d like, you’ll want to jump into advanced editing — as long as you’re comfortable editing HTML/CSS. Some resources you’ll find for theming is SmugMug’s customization FAQ and the Customization Forum on Dgrin.

Initial Options

The first few options are pretty straight forward and don’t really need explaining.

Initial Options

Initial Options

CSS

If you know CSS and have some specific styles you want to apply, this is the section you’ll enter your styles. I’ve chosen to customize some font styles, reduce the spacing between thumbnails on gallery pages, remove and reposition a couple of the buttons near the top right and insert my own logo.

Custom CSS

Custom CSS

The possibilities here, really are endless. Given that you know CSS well enough, you’ll be able to customize your theme styling almost exactly as you want. This is only an example but given a little more time, I think I could really get my gallery to shine, all thanks to SmugMug allowing this level of customization.

Before

Theme Before

Theme Before

After

Theme After

Theme After

JavaScript

The ability to customize and fine tune your gallery’s CSS is great, but even better is the capability to add custom JavaScript. As we recently covered in 12 Templates and Themes with Kickass Javascript Effects, JavaScript can have a powerful impact on a site, its usability and its stunning effects.

I’ve chosen not to enter any custom JavaScript at the beginning of the page, which would be used in a situation where you need some JavaScript to run before the rest of the page loads. I’ll place my JavaScript at the bottom of the page, to run after the page styles and content has loaded.

Bottom JavaScript (jQuery)

Bottom JavaScript (jQuery)

If you’re familiar with JavaScript and jQuery, you might’ve noticed the JavaScript I entered is to be used with the jQuery library. In order to use the jQuery library, I’ve loaded a Google hosted version of it in the Head Tag section. This section is useful if you need to include any code directly before the </head> tag.

Head Tag

Head Tag

The JavaScript I entered was a basic example of using JavaScript (to change the logo URL) and showing that other JavaScript libraries can be used if necessary. For steps on using your own logo, visit SmugMug’s Customize FAQ #7, which doesn’t require loading the jQuery library.

Custom Header or Footer

In the event you want to entirely create your own customized HTML header or footer, you can do that too, as well as select whether or not to show the SmugMug header or just show yours above or below SmugMug’s.

Custom Header

Custom Header

You can also specify a body tag should you need one.

As you can see, I’ve decided to replace SmugMug’s footer with a customized one. I’ve essentially duplicated SmugMug’s footer and placed the separated items within a list. Then I specified some additional CSS for the custom footer HTML.

Custom Footer

Custom Footer

You can see it looks nearly identical but I prefer a more semantic approach for footer navigations. I’ll also be able to quickly edit footer information this way.

Custom Footer

Custom Footer

Advanced Editor Final Thoughts

Although the edits I made using the Advanced Editor were quite basic and only smaller details, there are limitless possibilities. I intend on creating a much more customized and advanced themed with more JavaScript effects.

My Themes

If you’d like to create multiple themes to be used on different galleries, you can! Once you create a new theme, simply add the code for the new theme in the My Themes section.

My Themes

My Themes

Final Thoughts

Customizing a photo gallery is great but when you’re able to customize a photo gallery that you don’t have to worry about hosting, programming or anything like that, now that’s just awesome. SmugMug has done a really fantastic job of creating a service to allow photographers, novice or expert, to customize and create to their hearts content and never have to worry about self-hosted issues.

With the integration of web applications, SmugMug’s Easy Customizer was surprisingly easy to use. I know, it sounds a little silly; but, many web apps say they’re easy and they’re not — SmugMug is.

If you have any questions, please feel free to leave a comment and I’ll help as much as I can. Also, check out SmugMug’s Customize FAQ if you get stuck, there’s lots of great information there.

Win a SmugMug Pro Account

Head over to SmugMug.com and sign up for a trial account if you haven’t already. Once you’re signed up, or if you’re already a user, leave a comment below for a chance to win a SmugMug Pro plan. Winners will be announced this Friday, May 7th.

Please Note: Envato staff or people who have written more than two articles or tutorials for Web.AppStorm.net are ineligible to enter.


  • Spreng

    SmugMug is a awesome, powerful, photo portfolio alternative to other apps such as Flickr and Picasa. I’m really enjoying my trial and I would love to have a Pro account, so enter my name in the contest! Thanks Appstorm. :)

  • Ed

    I was looking for a way to backup a few precious photo collections online a few weeks ago, and stumbled across SmugMug by chance.

    Since then I’ve grown to love the site, it’s very user friendly for non-tech visitors, but gives you tons of control over how you organise your stuff. I’ve now moved my entire iPhoto library onto it!!

  • http://muviad.com Florian Taltavull

    Saw it on appstorm a lot of times now and i’m finally going to check out the free trial. Sounds awesome what you’re able of!
    Thanks for the great ‘how-to’ and the contest!

  • Gordon S.

    As a intermediate/pro photographer I would love a Pro account to help me along the path to greatness! or something like that.

  • http://studiomagnolia.com Cesare

    Don’t need a pro account. Just stopping by to say smugmug is great.

  • Gustavo

    Another cool thing that you can do (and you can see some cool results here: http://www.modernstills.com) is add the jQuery library to your smugmug page.
    Here’s the article on how to do that:
    http://www.gmtaz.com/add-the-jquery-library-to-smugmug/

  • Gustavo

    Sorry, that modernstills link doesnt work because of the parenthesis…
    here it is again:
    http://www.modernstills.com

  • http://www.onforlife.com Lori

    Love SmugMug. Switched over a few years ago because my husband couldn’t figure out the flikr interface.

  • http://hector-lee.com Hector Lee

    Sounds like the big boy alternative to Flickr.

  • http://twitter.com/The_Swiftman Swiftman

    Looks like a great product. I’d love to win!

  • http://tehgeek.com tehgeek

    I’ve been going to check out SmugMug for a while, going to sign up for a free trial now. It would really be great to win the pro account though.

    <3 appstorm

  • Brian R

    Great site, thanks for the contest

  • http://twitter.com/kimroen Kim Røen

    Wow, sounds great! Would love this for my photographs :)

  • http://pablolarah.cl/ Pablo Lara H

    Woaw¡ Of course I want one¡

  • Dusse

    Oooh. Badly want’s to win, looks like an amazing service. :)

  • http://xenoabedesign.com Justin

    I would love to win a SmugMug Pro account so I can show off all of my pictures from my wife and I’s current travels around the USA.

  • Makoto

    Love SmugMug. :-)

  • Rolando

    I already use SmugMug and am more than satisfied with the service they provide. Very few photo-sharing sites come even close, really. They’re that good. I have a standard account but would love to experiment for a year with the Pro version and see if I stay there afterwards.

  • Pingback: SmugMug Pro Plan Winner | Web.AppStorm

  • http://www.wrenphoto.biz Lori Buda

    I have a love/hate relationship with Smugmug. I had a hard time getting my site to look personal and professional. I have been learning a lot about how to make changes from a digital download e-book that I purchased. It’s not free, but the time It saved me and the results I got were well worth it. In case anyone else might find it useful… here is the link:
    http://f3a0evv7xbql3f35umky8w2zc7.hop.clickbank.net/?tid=SMUGMUG

  • http://amandamariephotography-pdx.com Amanda Webber

    Are you kidding me! I have a Smugmug Pro account and it is not easy if you don’t know HTML which I don’t. I got as far as the customized header and from there what else can I do without hiring someone to design it. After using Showit’s free trail I am ready to switch but Smugmug is definitely easier on the pocketbook. I am not happy with my site so I guess I gotta do what I gotta do. Smugmug needs to allow customization like Showit and only then can they boat about being user friendly.

  • http://www.pradeepsanyal.com Pradeep

    agree with amanda. CSS and all – if u don’t know – it can be very frustrating to get it right…

  • http://www.csrashag.com Carolyn Cloe

    How do I get the code to add to the Themes creation page? I used the Easy Customizer and created what I wanted, and then didn’t see a way to save it as a theme, so clicked Publish, and it messed up my home page!

    Reading the above tutotiral it says to enter the code in the Themes creation page – this is not clear at all. How do I do this????

    I just want to create my own custom theme for certain galleries, and be able to do this for individual galleries, not my home page.

  • lisa

    LOVE smugmug. I so want a pro account!

  • http://www.fgphotoaz.com Felicia Gerard

    I absolutely love love love smug-mug—-I am HOOKED. True story.

  • James

    I love smugmug.

  • Brian

    Customizing a SmugMug theme is like fixing a bridge that snapped in half, with duct tape. I feel like I’m customizing a MySpace profile (any one remember when that was the “COOL!” thing? , insert sarcasm here).

    This is easily the most mundane way to customize any web-based template I’ve ever seen. Never have I seen so many !importants in ANY other template “system”.

    For shame SmugMug.

  • Deborah

    Love smugmug !!

  • http://www.crystalvisualmedia.com Hemant

    I love Smugmug… Really nice!!

  • Joshua Trevino

    great help with this process. I feel that the images you provide help make things clearer

  • http://www.saneesh.com/ Saneesh Sukumaran

    Informative post on creating custom gallery on smugmug

theatre-aglow
theatre-aglow
theatre-aglow
theatre-aglow