Designing Firefox Themes

Designing Firefox Themes Lim Chee Aun Author of Phoenity theme(s)

Huh? What Firefox theme? Can I eat it?

Any web designers can be a Firefox theme designer. “ Themer”.

A little history. Why Firefox theme? “ Phoenix”.

1 st step Understand the UI. XUL rules!

Web Firefox
HTML
CSS
JavaScript
XUL
CSS
JavaScript

Confused?

2 nd step Get the files and start right away! A quick guide here.

Download a theme JAR file or extract /chrome/classic.jar
Customize the files in the theme.
Package your theme.
Install your theme.
Test your theme.
Upload to Mozilla Firefox Add-ons web site.

YourTheme-0.1-fx.jar
/chrome
chrome.jar
/browser/*
/communicator/*
/global/*
/help/*
/mozapps/*
chrome.manifest
install.rdf
icon.png
preview.png

chrome.jar/browser/browser.css
/* home button */
toolbar [iconsize="small"] #home-button.toolbarbutton-1 > .toolbarbutton-icon {
padding-left: 1px;
}
#home-button.bookmark-item {
list-style-image : url("chrome://browser/skin/Toolbar-small.png");
}
toolbar[iconsize="small"] #home-button,
#home-button.bookmark-item {
-moz-image-region: rect(0px 80px 16px 64px);
}
toolbar[iconsize="small"] #home-button :not([disabled="true"]):hover ,
#home-button.bookmark-item:not([disabled="true"]):hover {
}
toolbar[iconsize="small"] #home-button [disabled="true"] ,
#home-button.bookmark-item[disabled="true"] {
}
toolbar[iconsize="small"] #home-button:not([disabled="true"]):hover:active,
#home-button.bookmark-item:not([disabled="true"]):hover:active {
}

DOM Inspector is your friend.

Mozilla CSS Extensions
-moz-appearance
-moz-border-radius
-moz-border-top-colors
-moz-image-region
… and more…

Default. Hovered. Disabled. Checked. Pressed.

The wonders of Firefox themes

3 rd step Maintain it. And feel proud of your masterpiece.

It’s easy to create a theme, but it’s hard to maintain one. Be warned. It’s also addictive, somehow.

Have fun. It’s a great adventure.

Resources
http://developer.mozilla.org/
http://forums.mozillazine.org/
http://addons.mozilla.org/
http://icanhaz.com/mozimageregion
http://icanhaz.com/firefoxchrome
http://brownhen.com/DI/
… and Google, of course.

Feel free to Twitter me. http://twitter.com/cheeaun

Thanks to…
(in no particular order)
cdn, djst, lynchknot, ehume, arvid, Eyes-only, mcdavis941, RAF, CatThief, aaron, lucx, KLB, Sailfish, scratch, Kuden, Xavius, graciliano, DonGato, asa and many more…

http://barcamp.my	35
http://cheeaun.tumblr.com	5
http://www.linkedin.com	2
http://www.slideshare.net	1
http://coderwall.com	1

Designing Firefox Themes

by Chee Aun Lim

Accessibility

Categories

Upload Details

Usage Rights

5 Embeds 44

Statistics