Code it Pretty: Virtual Blog Makeovers with Firefox

Have you ever wanted to try a new look for your blog, but felt too nervous about "breaking" something to give it a shot?

Firefox has an awesome built-in tool for previewing CSS changes on your blog with no risk at all. It's called the Style Editor, and it's one of my very favorite web development tools.

The Style Editor lets you make completely virtual changes to your blog's CSS. When you use the Style Editor to preview a CSS change, nothing changes on your live site. No one else can see what you do in the Style Editor. And, you can't break anything!

Want to give it a try? Let's get started!

First: Get Firefox

If you already have an up-to-date version of Firefox on your computer, you already have the Style Editor. If your copy of Firefox is out of date, or you don't have Firefox yet, you can grab it at firefox.com.

You can find the Style Editor under "Web Developer" in your Firefox menu.

Select the Element You Want to Change

In this beginner's tutorial, I'm going to show you how to change the background color of a sidebar widget. I'm going use this Blogger blog as an example, but you can use the Style Editor on any blog or website. Literally ANY website; you don't have to own it. You can turn on the Style Editor on any website on the Internet and play around with their CSS.

Go to the page you'd like to edit, and right click (ctrl click on a Mac) on the section you want to edit. Select "Inspect Element" from the resulting menu, and you'll see two frames appear on the screen; one to the right and one at the bottom of the page.

A transparent black overlay will appear covering everything else on the page except the element you selected.

Sometimes you might not get the entire element you want in your first right click. If that happens, you can use the HTML menu at the bottom of the screen to move up through the document until you've highlighted the entire area you want to change.

Find the Element's CSS Class or ID

At the top of your selected element, you'll see a little tab that tells you what kind of element it is and its CSS ID and/or class. A CSS ID is indicated with a leading pound sign (#). A CSS class is indicated with a leading dot (.).

In this example, I can see that my sidebar widget is a div with the ID of "BlogArchive1" and the classes "widget" and "BlogArchive". I'm going to use the widget's ID to edit its CSS since an ID identifies a single element, while a class can be assigned to multiple elements in a page. I only want to edit this widget and not any of the others on the page, so ID it is!

Edit the Element's CSS

Now here's where it gets fun! Now that you know the element you want to change and its class or ID, you can go into the Style Editor and start editing.

When you open up the style editor, it's likely that you'll see several stylesheets for your blog. You can find the element you'd like to change within the stylesheets by using the search feature (CTRL-F), but this can take some time if you have several stylesheets since you'll need to search each one individually. If you're in a hurry, you can just create a new stylesheet by clicking the "New" button in the upper left corner. I'm going to use a new stylesheet for this example.

In this example, I've assigned a light pink background color to the BlogArchive1 class with the rule #BlogArchive1 {background-color: #F2D0DE;}.

Really though, why should I stop there? Nobody's going to see, I can get goofy! How about a little bit of padding, a border, and some cursive font?

Yikes! Ok, let's pretend that never happened. Good thing I just did it with the Style Editor ;) One tap on F5 and it's all back to normal.

Saving Your Changes for Later

If you fall in love with the changes you make with the Style Editor, you can save a copy of your updated stylesheet by clicking the "Save" link in the lower right corner of your stylesheet's entry in the stylesheet list in the left panel of the Style Editor.

You can add your new rules to an existing stylesheet or add a new external stylesheet to your blog. Exactly how to do that will vary depending on your blogging platform.