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!
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
The first few options are pretty straight forward and don’t really need explaining.
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.
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.
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.
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.
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.
Advanced Editor Final Thoughts
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.
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.