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”.
1st step
Understand the UI.
XUL rules!
Web
• HTML • CSS •JavaScript
Firefox
• XUL • CSS • JavaScript
Confused?
2nd step
Get the files and start right away!
A quick guide here.
1. Download a theme JAR file or extract /chrome/classic.jar 2. Customize the files in the theme. 3. Package your theme. 4. Install your theme. 5. Test your theme. 6. Upload to Mozilla Firefox Addons 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 { -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"] #homebutton: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…
Default. Hovered. Disabled. Checked. Pressed.
The wonders of Firefox themes
3rd step
Maintain it.
And feel proud of your masterpiece.
easy to create a theme, but it’s hard to maintain one.
It’s
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…