Looking to trick out your page? Cascading Style Sheets (CSS) to the rescue. Some stylin' 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 Professional subscriber, go to your Control Panel. Click the Customize tab and then the Advanced Site-wide Customization 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.

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 Custoimizer 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 Advancd 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 Customize tab of your control panel and you'll see a My 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.

Ask a real person about this topic.