Complete Smugmug Website Customization

In today's economy, businesses need to make cost-cuts where ever they can without jeopardizing their professionalism. How much are you spending on your website? More than $100? You might be wasting money.
Photographers have long ago found Smugmug's photo hosting services excellent, but perhaps not quite as aesthetically pleasing as would be required for a professional website. Sure, there are customization options: an easy, but limited built-in customizer and a blank field for your own CSS code. Let's face it, there's a good chance you don't know enough, or anything, about writing CSS - neither do I. Luckily, there are a lot enthusiastic Smugmug users who can do the code, plus are willing to share their information online.
Here I have made a step-by-step tutorial for getting a professional-looking website for less than $70 per year and about 12 hours of your time (or less, if you know your way around the puters). BrisbanePropertyPhotos.com.au was created to market real estate photography, but it will work with almost any branch of photography just as well.
If you couldn't be bothered, but like how it looks, I can do it for you for around $400 plus the cost of a custom domain and Smugmug account. Send me an email at info@brisbanepropertyphotos.com.au.

Preparations

On the right you can see Smugmug's default home page (click to make pictures larger). On the right could be your photography website, with your own banner and your own slideshow. If you follow this tutorial all the way, you will end up with a site just like the one you're on at the moment, but chances are you'll be wanting to make some tweaks of your own in the end.
Before we start, you need to purchase two things. First of all, you need a Smugmug account with at least Power User rights. That's the middle level and gives your plenty of power over your Smugmug site. On the highest level you can start selling your photos via the site and host HD-quality video, but in real estate photography, neither of those are usually necessary. If you're unsure, go with Power User - you can always upgrade it if need be.
Second of all, you need a custom domain. You don't want your visitors to type in company-name.smugmug.com - that is just not professional. Custom domains are about $10 per year, which you can surely afford. Smugmug has joined efforts with GoDaddy to make hooking up your custom domain to your Smugmug account a breeze. This is seriously the easiest configuration you can hope for. Just use this partnersite to register your domain, not GoDaddy's own website.
That's it! I'll later give you more intructions about hooking up your domain and make your URLs neater, but that's all you have to do now.
...
Okay, done? Good.

Create new categories

Now that you have your Smugmug account, we have to create some proper categories for your galleries to go into. Categories like 'Real Estate' will help your rank on Google, and search engine optimization (SEO) should always be one of your thoughts when building your website.
For this site, we created two new categories: Real Estate and Downloads. If you're in wedding photography, real estate probably isn't the best category name for your site.
You can create new categories by locating a 'Tools' tab on your home page. It should hover close to the top, on the left. From there, choose Go to control panel. That's what you see in the picture. From there, choose to create new categories. Again, if you want yours to be just like ours, create 'Real Estate' and 'Downloads'.

You're probably craving to get that big, fancy slideshow going, but before that we need to create a portfolio for you. Again, navigate your way to your home page, then click 'Add photos' -> 'Create new gallery'. Choose your custom-made 'Real Estate' as the category and create a gallery called 'Portfolio'.
Now, choose 20-40 of your very best pictures and upload them to this gallery. It will not look like the picture, yet, but we're getting there. Remember to caption (Tools -> Caption/Keyword) your photos for SEO.

Yes, it's time to do the first bit of coding and your first major change to the default look! This slideshow will automatically use the photos from your Portfolio gallery and stretches to fill your visitor's screen, although I have set a maximum width and height to enable transparent background and keep loading times reasonable. It replaces your Bio box. I also added a thin, white border around every image. If you want to make the border black, change borderColor: 'ffffff' to '000000'.
On your homepage you can see 'Your Bio'. Click 'edit'.
Below is the code for you to copy into the blank field. You will need to change the values marked in red. Album ID can be found in your gallery URL, right after your gallery name, in our case brisbanepropertyphotos.com.au/Real-Estate/Portfolio/6125989_gJgkf. Find that bit in your Portfolio gallery and insert it. Splash image is the image that appears quickly on screen when real slideshow images are loading up.
<html>
<center>
Here you can write a bit about your webpage. Try to include relevant keywords like where you are located and what you do.
<script>
var ssConfig = {
AlbumID: 'XXXXXX',
newWindow: 'false',
transparent: 'true',
splash: 'http://yourdomain.com.au/your-splash-image.jpg',
showLogo: 'false',
borderThickness: '4',
borderColor: 'ffffff',
clickToImage: 'true',
maxW: "1000",
maxH: "700",
showThumbs: 'false',
showButtons: 'false',
randomize: 'true',
randomStart: 'true',
setSpeed: 'fast',
crossFadeSpeed: '250'
};
InsertStretchySlideshow(ssConfig);
</script>
</center>
</html>
Remember to hit save. But wait! There's more...

You will now need to navigate yourself back to Tools > 'Go to Control Panel' and this time click on 'Advanced site-wide customization'.
There's lots of blank fields on that page, and from now on you must always find the correct field to put code in. Pay attention to this, okay? This time we use the box titled CSS.
Got the right one? Good. Put this in:
#bioBox .photo {
display: none;
#homepage {width: auto !important; margin-left: 15px !important; margin-right: 15px !important;}
#bioBox {width: auto !important;}

On the same page is a box titled Top Javascript. Go copy the stretchy slideshow code from this page and paste it in Top Javasript.
Hit submit at the bottom of the page and hope for the best. If gods don't hate you, you should now have a working slideshow! If they do, you still have hope.
Slideshow Wiki will help you understand what might have possibly went wrong and also gives you heaps of information about the customization possibilities of the slideshow.
DGrin's Stretchy Slideshow thread will help you customize the stretchy part and also gives you troubleshooting tips.

For your customized banner, it's easiest to use Smugmug's Easy Customizer. You can find it in your Control Panel. Open 'Header', which will give you a few options. First of all, deselect 'Show SmugMug Header'.
If you are totally incapable of operating graphic software like Photoshop or Draw, you're better off choosing 'Text' as your custom banner.
If you think you can handle creating a GIF image as your banner, or you have one already, you can use that and upload it from your computer. Why GIF? Because GIF can handle transparency, which means that your company names looks like it's a part of the design instead of a weird-colored square at the top. So, remember to leave your background transparent.
Try to keep the banner from taking too much space vertically. It leaves more room for your automatically stretching slideshow and your visitors don't have to scroll down to see your images.
Also, if you already have some other marketing material, like business cards or flyers, try to maintain the same design on your banner so people know they're dealing with the same company. Branding is important. They get confused if they can't find the same elements that were in the flyer you handed them. The banner is the easiest way to show that essential connection. Play around with this until you are truly happy with how it looks.
When you're finished, open 'Footer' and change your Smugmug footer to a tiny one.
The tiny picture that sits next to your URL is called a favicon and by default looks like Smugmug's smiley. Ours is a camera. To get your own, you can upload a new GIF or PNG in "Browser" tab - transparent background is important again! Remember to save your settings.

It's starting to look pretty good, eh? Let's create some more pages so we can build a navigation bar for you.
Add some more photos, again under category Real Estate and to a gallery called Pricing, or Services, or whatever floats your boat. You will need one image for each service you are providing, preferably demonstrating said service. Once they have uploaded, go to your Pricing gallery and choose 'Tools' > 'Customize Gallery'. Under 'Look & Feel' you can find 'Gallery Style'. Set that to 'Journal (old)'.
You can also roll down a bit more and disable buying photos - this is just a distraction that might make your visitors think that's how they're supposed to purchase your services! Save those settings.
Now that your gallery is in Journal mode, edit the caption of each photo. Here you can write down your prices, services and such. You can use html code to make text bold or align it to center. Google is your friend in finding those basic commands.
One problem of using journal style is that you'll end up writing really long captions on your picture, which then flash up in yellow when you hover your mouse over an image. To turn hover captions off, put this in your Top Javascript:
function delHover() {
imgTags = document.getElementsByTagName("img");
for (i=0; i<imgTags.length; i++) {
imgTags[i].title = "";
imgTags[i].alt = "";
}
}
And this in your Body Tag:
<body onload="delHover();">

Follow the instructions of creating the Pricing page, but this time name the gallery Contact Us or About Us. One picture is enough. Here you can write as much or as little about your company as you want, but make sure your contact details are the main focus on the page.
You're halfway now! Jump to page 2.

It's handy to have a category for your clients to download their photos from.
If you're really worried about someone stealing your photos, you might feel hesitant to do this. In real estate, you get paid for taking the photos, not for selling them, so for us it's more important to make the photos easily available. If you're up for the extra hassle, you can always lock down your galleries with passwords and give them only to your clients.
In short, keep adding galleries here when you shoot jobs for your clients.

The last big modification is building a navigation bar to help your visitors find their way around your site.
Go back to the Easy Customizer and open 'Header'. Select 'Add Navigation Bar' and use the builder. Add links in order of importance.
Do you still remember the custom domain I prompted you to purchase? To keep people on your custom domain, those URLs need to point to that domain. So, if your Smugmug gallery link is something like mynick.smugmug.com/Real-Estate/Portfolio/4483_45jkj, you need to change that to customdomain.com/Real-Estate/Portfolio/4483_454jkj. Look at the image, if this is unclear.
If you use your Smugmug URL in these links, your visitors will be surprised when they use the navigation bar and they jump to a completely different address!
These links will not work until we hook your custom domain to your Smugmug account. That's coming next, don't worry.

If you've been delaying purchasing your custom domain this far, it's time for you to click your way to GoDaddy and Smugmug's partnered domain service. I recommend purchasing a .com address, since .mob or .me or the likes just look a bit suspicious.
Specifically DO NOT buy any domain of which the .com of is already taken. I can promise you 90% of your visitors will repeatedly visit the .com site when they're trying to come back to you and will get frustrated and go somewhere else. If you want to play it safe, you can purchase a few of the biggest ones - .com, .net, .org - and forward all of them to your site.
After you've got your awesome custom domain purchased via the site in the picture (that is, not GoDaddy's official website), all you have to do is go to your Control Panel, select 'Settings' tab, locate 'Domain' and change that to your new custom domain. Hooking it up might take a while, so don't freak out if it's not working immediately.
After customdomain.com takes you to your Smugmug site, all your navigation bar links should be working too. If they're not, start scrutinizing for typos in the navbar builder.
If you did not follow my instructions and went with another domain provider or used GoDaddy's official website for this purchase, you can read the Smugmug wiki page about custom domains to get your domain working.

Hooray for you! All the heavy lifting is done! All that is left is polishing your website to look truly professional. Open the 'Advanced Site-wide customization' from Control Panel.
Let's start from the top and see what should be in your CSS box.
For your slideshow I asked you to put in this:
#bioBox .photo {
display: none;
#homepage {width: auto !important; margin-left: 15px !important; margin-right: 15px !important;}
#bioBox {width: auto !important;}
Now, let's add a few things.
This site is so simple to navigate, your visitors don't need breadcrumbs (the green text on the top left corner which says something like myphotos > Real Estate > Portfolio on your Portfolio page), plus it's ugly as. To make sure you still have your toolbar after you hide the breadcrumbs, we'll only hide them for visitors! You'll still see them when you're logged in. Copy this in there:
#breadcrumb {display: none;}
.loggedIn #breadcrumb {display: block;}
To hide your gallery titles while viewing the galleries (again, ugly and distracting) put this in:
#galleriesBox #galleryTitle {display: none;}
If you open your Pricing or Contact Us page, you can see that there's a fairly annoying text at the top announcing that there is only 1 page in this gallery. Who needs that? Let's hide it.
.gallery_XXXXXX .pageNav,
.gallery_XXXXXX .pageNav {
visibility:hidden;
}
Here, you need to replace the X's with an AlbumID (familiar from building your slideshow) for each gallery you want to hide that information in. Don't hide it if there's more than one page of photos, because it makes navigating between those pages difficult.
I have also hid the keywords that you can see under your photos. That way you can associate lots of appropriate keywords with your photos without making your portfolio look cluttered:
#photoKeywords {display:none}

We're going to make your URLs a bit neater now. If you need to give someone the address of your contact page, you'd rather it be customdomain.com/contactus, right? VanityURLs to the rescue! It will not actually change the domain of the page, but it will land your visitors on the right page using a nice and pretty address.
Here's the script:
var vanityTable =
{
"pricing" : "http://brisbanepropertyphotos.com.au/Real-Estate/Pricing/9960213_GPQix",
"contactus" : "http://brisbanepropertyphotos.com.au/Real-Estate/Contact-Us/9964121_mX5He"
};
function CheckRedirects()
{
if (YD.hasClass(document.body, 'homepage')) // only run this code on the home page
{
// get the path from the current URL,
// convert it to lowercase and remove the leading slash
var path = window.location.pathname.toLowerCase().substr(1);
var newURL = vanityTable[path]; // look it up in our table
// if we found it in the table && newURL is different than where we are
if (newURL && (newURL != window.location))
{
window.location.replace(newURL); // go to the new URL
}
}
}
You of course have change my URLs to your own. You can add more VanityURLs if you like, just make sure you follow that exact formatting. There is a catch, though - you can't have Smugmug categories with the same name as your VanityURLs. That is, you can't have customdomain.com/portfolio, because portfolio is a default category in Smugmug. Remember to add a comma after every URL (except the last).
You also need to locate "Custom Header" on the same page (NOT in the Easy Customizer) and add this piece of code:
<script type="text/javascript" language="javascript">
CheckRedirects();
</script>
For more information and troubleshooting, please visit DGrin's thread about VanityURLs.
There should also be a heap of code about your stretchy slideshow. Leave it.

Do you use Google Analytics? You want to know how many visitors you've had and how they got there, don't you? Google Analytics provides this information (and lots, lots more) for free. Sign up and create a new account for your Smugmug site. Analytics will ask you to put their tracking code in. Put it in the Custom Footer.

I promised it's going to look professional, and doesn't it? On the way you probably learned at least a little bit customizing your Smugmug site even further. For that there's is one link that is priceless: DGrin's Smugmug Customization Forum. The posters are so smart and helpful, just amazing people.
If you use these step-by-step instructions, please leave a comment below and show me how it worked out for you. Also, if you find any errors in my tutorial, please email info@brisbanepropertyphotos.com.au or leave a comment.
What now? Well, there is still heaps to do. Caption your photos, write down some descriptions, submit your site to Google or start a Facebook fan group. Have fun with your new website!