In-Depth

System Colours

CSS2 defines colours which are the same as your operating systems theme. A list of the different operating system colours can be found on the W3C's web site.

Mozilla CSS Properties

Mozilla.org created their own CSS properties to allow them to use the technology for the UI of Mozilla. All of the properties follow the W3C's standards for vendor extensions, which is why they all begin with -moz. This is only a list of properties which may be useful to you; it is in no way all of the Mozilla specific properties available.

Other sites which list Mozilla specific CSS properties

• XulPlanet.com [dead link, 26.03.13]
• Mozilla-prefixed properties on the standard track 26.03.13
• also see Firefox 4 for developers 'New CSS properties' [27.03.13]

-moz-appearance

Makes a widget look like it's from your operating system. Possible are (This is probably an incomplete list):

none - (!important may be needed) Will override the operating system default. Use this when you want one or two controls to look different from the operating systems defaults.

button, checkbox-container, checkbox, dialog, dualbutton, dualbutton-dropdown, listbox, menu, menulist-textfield, menulist-button, menulist, menulist-text, progressbar, progresschunk, radio-container, radio, resizer, resizerpanel, separator, scrollbar, statusbar, statusbarpanel, toolbarbutton, toolbox, toolbar, treeheadercell, treeheadersortarrow, treeview, treeitem, treetwisty, treetwistyopen, tooltip, textfield, tabpanels, tab, tab-left-edge, tab-right-edge, scrollbartrack-horizontal, scrollbartrack-vertical, scrollbarthumb-vertical, scrollbarthumb-horizontal, scrollbarbutton-right, scrollbarbutton-down, scrollbarbutton-left, scrollbarbutton-up, scrollbargripper-vertical, scrollbargripper-horizontal

-moz-border-bottom-colors

Defines a series of colours. Each colour is one pixel in the border. If you want the border to be 3 pixels wide you define each colour separated by a space.

Example:

-moz-border-top-colors: ThreeDDarkShadow ThreeDShadow transparent;
-moz-border-right-colors: ThreeDDarkShadow ThreeDShadow transparent;
-moz-border-bottom-colors: ThreeDDarkShadow ThreeDShadow transparent;
-moz-border-left-colors: ThreeDDarkShadow ThreeDShadow transparent;

-moz-border-top-colors

See -moz-border-bottom-colors above.

-moz-border-left-colors

See -moz-border-bottom-colors above.

-moz-border-right-colors

See -moz-border-bottom-colors above.

-moz-border-radius

Rounds the corners of a box. If you specify one px/% value, it will apply it to all the corners, or you can specify 4 values (separated by a space) and have each corner different.

-moz-border-radius-topleft

The same as -moz-border-radius but only applies to the top left corner. An example of where this would be used is on tabs.

-moz-border-radius-topright

The same as -moz-border-radius but only applies to the top right corner. An example of where this would be used is on tabs.

-moz-border-radius-bottomleft

The same as -moz-border-radius but only applies to the bottom left corner. An example of where this would be used is on a footer.

-moz-border-radius-bottomright

The same as -moz-border-radius but only applies to the bottom right corner. An example of where this would be used is on a footer.

-moz-box-direction

Controls which way the items in this box are displayed. Normal in English web browsers items are displayed top to bottom and left to right. This will flip it around so items inside of this box will be displayed bottom to top and right to left. This is useful for, say, putting the navigation controls (back button) on the right hand side of the toolbar.

Values: Normal, Reverse

-moz-image-region

This is useful for dividing up an image into multiple smaller images. It uses a rect() object to determine the clipping region. Check out the section on Organizing Images for more information.

Example:

-moz-image-region: rect(168px 69px 189px 46px);

-moz-opacity

Makes boxes semi-transparent. It takes a decimal value, 0.00 is invisible and 1.00 is totally visible.

How do I know what to Modify?

Now that you've got everything extracted and you know how to modify items, you might be wondering, how do I know where everything is? Well there is an easy way to find out - Using the DOM Inspector. If you didn't install it when you first installed Mozilla you may have to run the installer again.

Load mozilla and one browser window. Then open the DOM Inspector (Tools->Web Development->DOM Inspector).

Click File->Inspect and select the browser window. What appears in a tree view below is the actual code for the interface. Using this, we can figure out what objects are where, what classes/id's they have applied to them, and most importantly, which file the style is located in.

Click on the Inspect icon and then click on the back button in the browser window. What this will do is find the code for the back button and display it in the DOM Inspector. Selected in the Tree view will be xul:toolbarbutton. This is the portion of the icon with only the image. But the back button is made up of two parts (The back portion and the history portion), so if we move one level up in the tree we'll see toolbarbutton. This is what we want.

On the right hand side of the DOM inspector, what will be listed is the DOM Node information. But what we're interested in is the CSS Style Rules. Click the icon located above the DOM information and choose CSS Style Rules.

The side bar will now be split into two parts. At the top, there is a list of all the groups of styles that are applied to this object. When you select an item in the list the bottom portion will display the actual styles that are applied. Go through this list one item at a time and find the one which applies the image to the button (.toolbarButton-1).

Look at the file column. It says that the file is located in chrome://navigator/skin/. This is a small problem with the display in Mozilla 1.2 what it means is \navigator\navigator.css (Most of the time it displays the file correctly, but sometimes, like in this case, it does not).

Go into \mySkin\navigator and load navigator.css. You'll notice that the .toolbar-1 class is located here. Now you can point the image to wherever you like.

The image that is listed there by default (chrome://navigator/skin/icons/btn1.gif) is actually a bunch of images grouped together in one file, so somewhere one of the CSS attributes is telling it what portion of the larger image to cut out and display. If you go back into the DOM inspector and look at the Rule column again, you'll see the #back-button id. Select that one and it lists a bunch of -x-image-region-left type styles in chrome://navigator/skin/. Open up navigator.css, again (if you closed it), and look for the #back-button section. It has a -moz-image-region style in there which you can change. If you look through the rest of this file, you'll also notice that there are regions for the different states of #back-button. Change those to match your new image as well.

Just continue this process for everything that you wish to change and you'll have a new skin in no time.

Organizing Images

To organize all of your icons you can store them all in one image and then tell Mozilla which portions to use. This is done using the -moz-image-region style. A bunch of 20px X 20px icons in a grid format

Above is the source image of some icons setup to use the -moz-image-region style. Each row is a different icon in one of its 4 different states (Normal, Hover, Mouse Down, and Disabled). To cut the pieces out you need to define rectangles in the css file like this:

#button-send {
  -moz-image-region: rect(294px 23px 315px 0px);
}

#button-send:hover {
  -moz-image-region: rect(294px 46px 315px 23px);
} 

#button-send:hover:active {
  -moz-image-region: rect(294px 69px 315px 46px);
} 

#button-send[disabled="true"] {
  -moz-image-region: rect(294px 92px 315px 69px) !important;
}

The properties for Rect are listed in a clockwise fashion - Top, Right, Bottom, Left.

Adding an image to the right of a toolbar

This tutorial is done with Mozilla 1.2 in mind. The layout of files can and probably will change over time, but the basics should remain the same.

By default, Mozilla 1.2 doesn't support images on the right hand side of the toolbars, but that can be changed with some XBL hacking. Place this xml file in \classic\skin\classic\communicator\toolbar\toolbarBindings.xml (You will need to create the sub directory). What this file does, is it takes the standard toolbar that is used in Mozilla and adds an image to the one side of it. If you look at the modern skin, you'll notice that it adds the image to the other side of the toolbar.

Now that we have the code that will change the toolbar, it needs to be accessed. Open up \classic\skin\classic\communicator\communicator.css and look for the .toolbar-primary section. There is a -moz-binding command there. Point the URL to the new location.

Change:

-moz-binding: url("chrome://global/content/bindings/toolbar.xml#toolbar-primary");

to

-moz-binding: url("chrome://communicator/skin/toolbar/toolbarBindings.xml#toolbar-primary");

Now every toolbar has a spot for an image on the right hand side and we can start adding images, but first we need to make sure we can see the images that we add. Also in the communicator.css add this code:

.toolbar-primary-icon {
  width: 100px;
  background-repeat: no-repeat;
  background-position: top;
}

Open up \classic\skin\classic\navigator\navigator.css and scroll down to the bottom. To style that image, we first need to get a handle to the toolbar, then the box inside of it, and then to the image that we added with the xml.

By hunting around with the DOM inspector and looking at the navigation toolbar you can find this information. The id is "navigation-toolbar". Then it contains a xul:hbox with the class .toolbar-holder. This .toolbar-holder class is also defined in the toolbarBindings.xml. This is where Mozilla takes the code out of our xml file and puts the two together. Inside of the xml file there is an image which has its class set to toolbar-primary-icon.

Put these 3 together and you get:

#navigation-toolbar > .toolbar-holder > .toolbar-primary-icon

Inside this section of the CSS is where you add an image. Set the background-image to a url of your choosing, such as url("chrome://navigator/skin/icons/dino.png");. When it's all done you should have something that looks like this:

#navigation-toolbar > .toolbar-holder > .toolbar-primary-icon {
  background-image: url("chrome://navigator/skin/icons/dino.png");
}

Put the image in that directory, fire up mozilla, and take a look at your creation. If the navigation toolbar dissapears or something, go back and double check everything. Especially the -moz-binding commands.