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

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.

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

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 { -moz-image-region: rect(16px 80px 32px 64px); } toolbar[iconsize="small"] #home-button [disabled="true"] , #home-button.bookmark-item[disabled="true"] { -moz-image-region: rect(32px 80px 48px 64px); } toolbar[iconsize="small"] #home-button:not([disabled="true"]):hover:active, #home-button.bookmark-item:not([disabled="true"]):hover:active { -moz-image-region: rect(64px 80px 80px 64px); }

/* 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 {

-moz-image-region: rect(16px 80px 32px 64px);

}

toolbar[iconsize="small"] #home-button [disabled="true"] ,

#home-button.bookmark-item[disabled="true"] {

-moz-image-region: rect(32px 80px 48px 64px);

}

toolbar[iconsize="small"] #home-button:not([disabled="true"]):hover:active,

#home-button.bookmark-item:not([disabled="true"]):hover:active {

-moz-image-region: rect(64px 80px 80px 64px);

}

DOM Inspector is your friend.

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

-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.

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…

(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…