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

The Easy Customizer is a great start, but if you need to go beyond that, you can put in your own CSS, HTML, and JavaScript to style your site.

If you are a logged-in Power or Pro Smugger, go to your Account Settings. Click the Style icon and then the Advanced Customizer link.

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!

Can I just pay someone to do this for me?

We're always willing to help if you're stuck, but if you just want designers for-hire, look at our list of Certified Customizers. They've got our stamp of approval and they'll be happy to help you out.

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 box 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 box:

.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; }

Using the Easy Customizer AND Advanced Customization:

If you use both the Easy Customizer and your own code, there are a few things to keep in mind.

• Any code generated by the Easy Customizer is kept separate and you won't see it displayed on your Advanced Site-wide Customization page at all. You can't go in and edit that code. You can only change or erase it using the tools in the Easy Customizer interface itself.

• The CSS generated with the Easy Customizer will be placed BEFORE your own custom CSS when we draw pages so it should cascade properly. However, Easy Customizer CSS still may override (in terms of how the browser displays your page) your own CSS if there is overlap and depending on how your CSS is written. You should always be able to override the Easy Customizer CSS by using the "!important" CSS declaration.

• Your Custom Header from the Advanced page will be displayed below your Easy Customizer custom header. Ditto for your Custom Footer.

• Background color, Show/Hide SmugMug Header and Footer, and Page Title are all settings that you'll find both in the Easy Customizer and in the Advanced customization. A change in either location will automatically make the change in the other location as well.

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 Style tab of your Account Settings and you'll see a My Themes area.

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.