Date post: | 09-May-2015 |
Category: |
Technology |
Upload: | chee-aun-lim |
View: | 4,757 times |
Download: | 0 times |
Designing
Firefox ThemesLim Chee Aun
Author of Phoenity theme(s)
1
Huh? What Firefox
theme?Can I eat it?
2
Any web designers can be a Firefox theme designer.
“Themer”.
3
A little history.
Why Firefox theme?
“Phoenix”.
4
5
1st step
Understand the UI.
XUL rules!
6
7
Web Firefox
• HTML• CSS
•JavaScript
• XUL• CSS
• JavaScript
8
Confused?9
2nd step
Get the files and start right away!
A quick guide here.
10
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
YourTheme-0.1-fx.jar• /chrome
• chrome.jar• /browser/*• /communicator/*• /global/*• /help/*• /mozapps/*
• chrome.manifest• install.rdf• icon.png• preview.png
12
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
DOM Inspector is your friend.
14
Mozilla CSS Extensions
• -moz-appearance• -moz-border-radius• -moz-border-top-colors• -moz-image-region• … and more…
15
Default. Hovered. Disabled. Checked.
Pressed. 16
The wonders of Firefox themes
17
3rd step
Maintain it.And feel proud of your masterpiece.
18
It’s easy to create a
theme, but it’s hard to maintain one.
Be warned.
It’s also addictive, somehow.
19
Have fun.It’s a great adventure.
20
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
Feel free to
Twitter me.http://twitter.com/cheeaun
22
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