designing firefox themes
DESCRIPTION
A small introduction to designing Firefox themes, presented on Barcamp Malaysia event (26/27 July 2008)TRANSCRIPT
![Page 1: Designing Firefox Themes](https://reader035.vdocument.in/reader035/viewer/2022081602/554df063b4c905f6598b5015/html5/thumbnails/1.jpg)
Designing
Firefox ThemesLim Chee Aun
Author of Phoenity theme(s)
1
![Page 2: Designing Firefox Themes](https://reader035.vdocument.in/reader035/viewer/2022081602/554df063b4c905f6598b5015/html5/thumbnails/2.jpg)
Huh? What Firefox
theme?Can I eat it?
2
![Page 3: Designing Firefox Themes](https://reader035.vdocument.in/reader035/viewer/2022081602/554df063b4c905f6598b5015/html5/thumbnails/3.jpg)
Any web designers can be a Firefox theme designer.
“Themer”.
3
![Page 4: Designing Firefox Themes](https://reader035.vdocument.in/reader035/viewer/2022081602/554df063b4c905f6598b5015/html5/thumbnails/4.jpg)
A little history.
Why Firefox theme?
“Phoenix”.
4
![Page 5: Designing Firefox Themes](https://reader035.vdocument.in/reader035/viewer/2022081602/554df063b4c905f6598b5015/html5/thumbnails/5.jpg)
5
![Page 6: Designing Firefox Themes](https://reader035.vdocument.in/reader035/viewer/2022081602/554df063b4c905f6598b5015/html5/thumbnails/6.jpg)
1st step
Understand the UI.
XUL rules!
6
![Page 7: Designing Firefox Themes](https://reader035.vdocument.in/reader035/viewer/2022081602/554df063b4c905f6598b5015/html5/thumbnails/7.jpg)
7
![Page 8: Designing Firefox Themes](https://reader035.vdocument.in/reader035/viewer/2022081602/554df063b4c905f6598b5015/html5/thumbnails/8.jpg)
Web Firefox
• HTML• CSS
•JavaScript
• XUL• CSS
• JavaScript
8
![Page 9: Designing Firefox Themes](https://reader035.vdocument.in/reader035/viewer/2022081602/554df063b4c905f6598b5015/html5/thumbnails/9.jpg)
Confused?9
![Page 10: Designing Firefox Themes](https://reader035.vdocument.in/reader035/viewer/2022081602/554df063b4c905f6598b5015/html5/thumbnails/10.jpg)
2nd step
Get the files and start right away!
A quick guide here.
10
![Page 11: Designing Firefox Themes](https://reader035.vdocument.in/reader035/viewer/2022081602/554df063b4c905f6598b5015/html5/thumbnails/11.jpg)
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 Add-ons web site.
11
![Page 12: Designing Firefox Themes](https://reader035.vdocument.in/reader035/viewer/2022081602/554df063b4c905f6598b5015/html5/thumbnails/12.jpg)
YourTheme-0.1-fx.jar• /chrome
• chrome.jar• /browser/*• /communicator/*• /global/*• /help/*• /mozapps/*
• chrome.manifest• install.rdf• icon.png• preview.png
12
![Page 13: Designing Firefox Themes](https://reader035.vdocument.in/reader035/viewer/2022081602/554df063b4c905f6598b5015/html5/thumbnails/13.jpg)
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);}
13
![Page 14: Designing Firefox Themes](https://reader035.vdocument.in/reader035/viewer/2022081602/554df063b4c905f6598b5015/html5/thumbnails/14.jpg)
DOM Inspector is your friend.
14
![Page 15: Designing Firefox Themes](https://reader035.vdocument.in/reader035/viewer/2022081602/554df063b4c905f6598b5015/html5/thumbnails/15.jpg)
Mozilla CSS Extensions
• -moz-appearance• -moz-border-radius• -moz-border-top-colors• -moz-image-region• … and more…
15
![Page 16: Designing Firefox Themes](https://reader035.vdocument.in/reader035/viewer/2022081602/554df063b4c905f6598b5015/html5/thumbnails/16.jpg)
Default. Hovered. Disabled. Checked.
Pressed. 16
![Page 17: Designing Firefox Themes](https://reader035.vdocument.in/reader035/viewer/2022081602/554df063b4c905f6598b5015/html5/thumbnails/17.jpg)
The wonders of Firefox themes
17
![Page 18: Designing Firefox Themes](https://reader035.vdocument.in/reader035/viewer/2022081602/554df063b4c905f6598b5015/html5/thumbnails/18.jpg)
3rd step
Maintain it.And feel proud of your masterpiece.
18
![Page 19: Designing Firefox Themes](https://reader035.vdocument.in/reader035/viewer/2022081602/554df063b4c905f6598b5015/html5/thumbnails/19.jpg)
It’s easy to create a
theme, but it’s hard to maintain one.
Be warned.
It’s also addictive, somehow.
19
![Page 20: Designing Firefox Themes](https://reader035.vdocument.in/reader035/viewer/2022081602/554df063b4c905f6598b5015/html5/thumbnails/20.jpg)
Have fun.It’s a great adventure.
20
![Page 21: Designing Firefox Themes](https://reader035.vdocument.in/reader035/viewer/2022081602/554df063b4c905f6598b5015/html5/thumbnails/21.jpg)
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.
21
![Page 22: Designing Firefox Themes](https://reader035.vdocument.in/reader035/viewer/2022081602/554df063b4c905f6598b5015/html5/thumbnails/22.jpg)
Feel free to
Twitter me.http://twitter.com/cheeaun
22
![Page 23: Designing Firefox Themes](https://reader035.vdocument.in/reader035/viewer/2022081602/554df063b4c905f6598b5015/html5/thumbnails/23.jpg)
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…
23