Looking to trick out your page? Cascading Style Sheets (CSS) to the rescue. Some stylin' examples.

If you are a logged-in, Power or Professional subscriber, go to your Control Panel. Click the Customize tab and then the customize link.

The rule: You can customize to you heart's content as long as you don't completely hide SmugMug's footer. It can be pretty small, though!

For a fast-fix, our customization FAQ has code you can copy-and-paste to achieve the look you want. Want to go deeper? Read on.

What the heck are stylesheets?

Simple. SmugMug assigns a name to items on your pages you might want to personalize. You assign properties such as color to them.

At first you'll think it takes a geek to do it. But when you see how easy it is and how much power it places in your hands, your imagination may run wild with possibilities.

So... How do I know what names you assign?

For convenience, we group similar items into classes.

The green-on-black text used by default is part of the class title. One line in the css section can change all titles to any color you prefer.

Sometimes you'll want to change just one element on the page. You can do that when we've assigned an Id to it.

To easily and quickly see the Id and Class of any element on any SmugMug page, use the Firefox Web Developer tool. The tool is free. And here's a 5 min tutorial.

Okay, fine. I wanna change 'em now.

To change all the green-on-black text to red, just paste this into the css section:

.title { color: red; }

Confusing detail: If your pages are white, the title class is blue-on-white by default. The line above will change it to red-on-white.

The dot in front of title specifies that you mean to change a class.

If you want to change an Id, you place a pound sign (#) in front of it.

Example: This line will change the green-on-black to red for just the word keywords:

#photoKeywords { color: red; }

Advanced examples:

SmugMug's community, Digital Grin, is full of helpful and creative people who love to strut their stuff.

Creating themes:

Now that you're a CSS wizard and have created a look, you can save it as a theme. Just go to the Customize tab of your control panel and you'll see a themes link.

What's "stretchy"?

On your customize page and your "create a theme" page, you'll see a toggle that allows you to opt-in or opt-out of stretchy. This is a neat feature that makes your gallery pages fill larger monitors. Just toggle "yes" and we'll put in the necessary code for you. More info.