By Ivar.

After you have downloaded and installed the web developer extension, an extra row with several menus will appear.

Don't be alarmed by the number of menus and options, in this tutorial I will only cover two functions which you can find in the 'CSS' menu and in the 'Information' menu.

Function one: 'Display Element Information'

CSS requires you to define two things:
1) WHICH ELEMENT do I want to change
2) what do I want to change about that element

In order to tell your CSS what element to change, you need to know the name of the element. This is where the 'Display Element Information' function comes in handy.

Find your 'Information' menu, and select 'Display Element Information'

A yellow floatie appears with alot of information. If the floatie is covering something you want to see, click and hold the top bar of it, and drag it anywhere you want.

Your cursor changes to a crosshair, and whatever element you put your cursor over gets a thin red border.

The ID ( that what is superseded by 'div #' ) and the class ( that what is superseded by a '.' ) of the element selected show on the top row of the yellow floatie.

the ID is the name of that specific element selected. You can adjust CSS for that ID and only that element will get affected by it.

More than one element can be part of a class. Adjust the CSS for a class, and all elements part of that class will be affected.

In this case the ID is 'breadcrumb' and the class is 'nav'

HELP, I don't see an ID or a class on the top row!!

Some elements are elements contained in an element with an ID and don't have an ID of their own.
Not to worry, the ID of the 'ancestor' is also show on the yellow floatie. Look under 'Ancestors' and find the last line which starts with a 'div#'

In this case, the ID is still 'breadcrumb' and the class is 'nav'

Function two: 'Edit CSS'

OKAY, I know the ID and/or class, what now?

The web developer has a function called 'Edit CSS' in the 'CSS' menu. It will allow you to change your CSS, and view the changes immediately. It doesn't actually apply it to your smugmug stylesheets yet, so you can
try and play around as much as possible, without anyone else seeing the changes untill you save them.

After selecting 'Edit CSS' a set of tabs and a notepad-area appear on the left side of your screen.

The amount and the names of the tabs can differ.

smugmugBlack-*****.css and smugmugWhite-*****.css are smugmug's own stylesheets. One or both show depending on choices you've made in your control panel.

user-Nickname-****.css contains the CSS you have put in your CSS window, in your customization screen.

theme_XXXX-*****.css is the theme you have selected. It can be a standard smugmug theme, or a self-made theme.

Don't worry about the 'Embedded Styles'

If you have one standard customization for your entire site, and you don't use themes, you most likely have done your customizing in your customization screen in the control panel.
click on the 'user-Nickname-*****.css' tab.

You can write your CSS in the notepad-area beneath the tabs, and instantly see changes!

In the example I changed the background-color of the #breadcrumb, of which we found the ID previously.

After you have made all the changes you want to make, the easiest thing to do is to select all of your CSS and copy it.

Go to your control panel > customize and look for your CSS box.

Simply paste it in that box, and save your new customization.

That's it, you're done!