How to Change Your Look With Mozilla Skins

by Ian Oeschger

"Skin-ability" has been one the longest-awaited and least-well-understood features of the Mozilla project. By using technologies such as XML (extensible markup language) and CSS (cascading style sheets), Mozilla developers can now customize their application interfaces by creating skins (or, in Netscape 6, themes, which are based upon skins). In this article I'll show you how to create skins and explain the role they play within the Mozilla development platform.

What's a Skin?

Skin refers to the look or overall style of an application such as a web browser. In Gecko-based applications, the skin includes the images, colors, styles, positioning, and to some extent the behavior of elements in the UI. For the most part, the skin is created with CSS and images applied to the structural elements of the UI.

The skin of a Gecko-based application is separate from its structure and function because of the way in which the interface is defined. In broadest terms, XUL defines the structure of the application, JavaScript describes the behavior, and Cascading Style Sheets define the coherent look, or skin. By changing the CSS files or pointing to a different set of CSS files entirely, you can change the skin of the application without affecting the underlying structure or functionality.

Who Does What for Gecko



JavaScript / XPCOM


Cascading Style Sheets and Images


Related Articles:

Mozilla as an Application Virtual Machine

XUL Tools and What They Mean

Given the basic structure as defined in XUL and the linking or functionality as defined in JavaScript, the skin is free to express the look of the interface in almost any way it chooses. As you can see from the figures below -- which show two structurally identical browsers with different skins applied -- the skin can have a very powerful influence over the interface and thus over the experience of the user.

Alphanumerica's Sullivan Skin

Alphanumerica's Sullivan Skin.

FruityGum Skin, also from Alphanumerica.

FruityGum Skin, also from Alphanumerica.

Pages: 1, 2, 3, 4, 5

Next Pagearrow