An Example: global.css

An Example: global.css

There is no way to show all the modifications that went into generating my sample theme, wood. Instead I will concentrate on the global.css file, which was modified as needed.

In the global.css which I started with, was the following section:

 /* ::::: root elements ::::: */ window, page, dialog, wizard {   -moz-appearance: window;   background-color: -moz-Dialog;   color: -moz-DialogText;   font: message-box; } 

This piece of code defines the look of windows, pages, dialog boxes, and wizards. All four are defined with the same attributes (the attributes are enclosed in braces).

Originally the background color was defined as moz-Dialog (a predefined color constant that varies with the background color of the user's operating system dialog box).

The text color was defined as moz-DialogText. Again, this color will be the same as the operating system's dialog box text color.

The font for these four is message-box, a predefined font used as the default in message boxes. This is also based on the user's operating system dialog box font.

Now, let's split the four objects into two groups. The first group will have window, dialog, and wizard. The second group will be page:

 /* ::::: root elements ::::: */ window, dialog, wizard {   -moz-appearance: window;   background-color: -moz-Dialog;   color: -moz-DialogText;   font: message-box;   background-image: url(vertical_wood.gif); } 

For window, dialog, and wizard, you will use the image named vertical_wood.gif. This image is shown in Figure 15.3.

Figure 15.3. Vertical wood is a tall and not very wide (70 x 1020 image).

For page, a different image is used:

 page {    -moz-appearance: window; /*  background-color: -moz-Dialog; */   color: -moz-DialogText;   font: message-box;   background-image: url(Page_wood.gif); } 

page is set to the image page_wood.gif. This image is one of the largest images used in the theme (see Figure 15.4). It also has some graphics on it.

Figure 15.4. The page_wood.gif image has the theme name on it.

In global.css, I also added images to the following:

• Statusbarpanel Located at the bottom of the Firefox window.

• Sidebarheader Sidebars are along the left side of Firefox's window (by default, some extensions allow moving them).

After I made my changes, I saved the global.css file and moved to the next CSS file until I had checked, and possibly modified, every CSS in the theme.

Tip

I strongly recommend checking the effect of your work after a few modifications. That way, if something breaks, you might be able to track down what is causing the problem.