Chapter 15. Creating Your Own Theme

IN THIS CHAPTER

• Preparing Your Theme

• Creating Themes

• Multibutton Images

• Background Images

• An Example: global.css

• Final Results

• Theme Writing Secrets for Power Users

Firefox uses themes to change the look and feel of its interface with the user. You can either download themes or create your own themes. Themes and skins are both terms for changing the look and feel of a program. An example of using skins is the Windows Media Player.

In this chapter you will create a theme. Not a complete, ready-for-the-public version (to do that we'd have to dedicate most of the book to themes), but a theme that performs some formatting changes.

Theme creation is only a bit harder than modifying userChrome.css, allowing you to make Firefox's browser window look the way you want.

Note

All the files described in this chapter can be downloaded from the book's website at http://www.quepublishing.com/title/0789734583.

The Magic of Chrome

Some of the more technical readers might wonder what magic allows Firefox to use themes. After all, it is the Windows (or Linux or OS/X) interface, right?

Wrong. It is Firefox's interface. Most applications are made up of hundreds of windows, arranged in a tree structure of parents, children, and siblings.

A window might have a menu, toolbar, or other attached objects (such as scrollbars), but these smaller objects are actually windows, too. The application depends on Windows to manage these objects. So when you click a menu item, for example, Windows sends a message to the application's menu handler.

Firefox, however, has none of the detail windows other applications have. Instead, Firefox creates the menu, toolbar, or other item by drawing them itself rather than having Windows do the management. Instead, Firefox determines which menu item was clicked and calls the handler itself.

So, if Windows isn't providing the menus and toolbars, who is? Firefox is, using the Gecko rendering engine. This engine is the same engine that makes web pages appear in Firefox. It also creates the menus, toolbars, and other similar objects. Because Gecko understands Cascading Style Sheets (CSS), creating a theme is much easier.

Why do this? Well, you'd think that using themes might be the entire answer, but it is not. In fact, Firefox does this so that it can be as platform independent as possible (although there are a few platform-dependent features in the Mozilla products). After all, were Firefox to use Windows support for this, how would you (easily) make it work on Linux or OS/X?