Designing Firefox Themes

5,879 views

Published on

A small introduction to designing Firefox themes, presented on Barcamp Malaysia event (26/27 July 2008)

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
5,879
On SlideShare
0
From Embeds
0
Number of Embeds
74
Actions
Shares
0
Downloads
52
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Designing Firefox Themes

  1. Designing Firefox Themes Lim Chee Aun Author of Phoenity theme(s)
  2. Huh? What Firefox theme? Can I eat it?
  3. Any web designers can be a Firefox theme designer. “ Themer”.
  4. A little history. Why Firefox theme? “ Phoenix”.
  5. 1 st step Understand the UI. XUL rules!
  6. Web Firefox <ul><li>HTML </li></ul><ul><li>CSS </li></ul><ul><li>JavaScript </li></ul><ul><li>XUL </li></ul><ul><li>CSS </li></ul><ul><li>JavaScript </li></ul>
  7. Confused?
  8. 2 nd step Get the files and start right away! A quick guide here.
  9. <ul><li>Download a theme JAR file or extract /chrome/classic.jar </li></ul><ul><li>Customize the files in the theme. </li></ul><ul><li>Package your theme. </li></ul><ul><li>Install your theme. </li></ul><ul><li>Test your theme. </li></ul><ul><li>Upload to Mozilla Firefox Add-ons web site. </li></ul>
  10. <ul><li>YourTheme-0.1-fx.jar </li></ul><ul><li>/chrome </li></ul><ul><ul><li>chrome.jar </li></ul></ul><ul><ul><ul><li>/browser/* </li></ul></ul></ul><ul><ul><ul><li>/communicator/* </li></ul></ul></ul><ul><ul><ul><li>/global/* </li></ul></ul></ul><ul><ul><ul><li>/help/* </li></ul></ul></ul><ul><ul><ul><li>/mozapps/* </li></ul></ul></ul><ul><li>chrome.manifest </li></ul><ul><li>install.rdf </li></ul><ul><li>icon.png </li></ul><ul><li>preview.png </li></ul>
  11. chrome.jar/browser/browser.css <ul><li>/* home button */ </li></ul><ul><li>toolbar [iconsize=&quot;small&quot;] #home-button.toolbarbutton-1 > .toolbarbutton-icon { </li></ul><ul><li>padding-left: 1px; </li></ul><ul><li>} </li></ul><ul><li>#home-button.bookmark-item { </li></ul><ul><li>list-style-image : url(&quot;chrome://browser/skin/Toolbar-small.png&quot;); </li></ul><ul><li>} </li></ul><ul><li>toolbar[iconsize=&quot;small&quot;] #home-button, </li></ul><ul><li>#home-button.bookmark-item { </li></ul><ul><li>-moz-image-region: rect(0px 80px 16px 64px); </li></ul><ul><li>} </li></ul><ul><li>toolbar[iconsize=&quot;small&quot;] #home-button :not([disabled=&quot;true&quot;]):hover , </li></ul><ul><li>#home-button.bookmark-item:not([disabled=&quot;true&quot;]):hover { </li></ul><ul><li>-moz-image-region: rect(16px 80px 32px 64px); </li></ul><ul><li>} </li></ul><ul><li>toolbar[iconsize=&quot;small&quot;] #home-button [disabled=&quot;true&quot;] , </li></ul><ul><li>#home-button.bookmark-item[disabled=&quot;true&quot;] { </li></ul><ul><li>-moz-image-region: rect(32px 80px 48px 64px); </li></ul><ul><li>} </li></ul><ul><li>toolbar[iconsize=&quot;small&quot;] #home-button:not([disabled=&quot;true&quot;]):hover:active, </li></ul><ul><li>#home-button.bookmark-item:not([disabled=&quot;true&quot;]):hover:active { </li></ul><ul><li>-moz-image-region: rect(64px 80px 80px 64px); </li></ul><ul><li>} </li></ul>
  12. DOM Inspector is your friend.
  13. Mozilla CSS Extensions <ul><li>-moz-appearance </li></ul><ul><li>-moz-border-radius </li></ul><ul><li>-moz-border-top-colors </li></ul><ul><li>-moz-image-region </li></ul><ul><li>… and more… </li></ul>
  14. Default. Hovered. Disabled. Checked. Pressed.
  15. The wonders of Firefox themes
  16. 3 rd step Maintain it. And feel proud of your masterpiece.
  17. It’s easy to create a theme, but it’s hard to maintain one. Be warned. It’s also addictive, somehow.
  18. Have fun. It’s a great adventure.
  19. Resources <ul><li>http://developer.mozilla.org/ </li></ul><ul><li>http://forums.mozillazine.org/ </li></ul><ul><li>http://addons.mozilla.org/ </li></ul><ul><li>http://icanhaz.com/mozimageregion </li></ul><ul><li>http://icanhaz.com/firefoxchrome </li></ul><ul><li>http://brownhen.com/DI/ </li></ul><ul><li>… and Google, of course. </li></ul>
  20. Feel free to Twitter me. http://twitter.com/cheeaun
  21. Thanks to… <ul><li>(in no particular order) </li></ul><ul><li>cdn, djst, lynchknot, ehume, arvid, Eyes-only, mcdavis941, RAF, CatThief, aaron, lucx, KLB, Sailfish, scratch, Kuden, Xavius, graciliano, DonGato, asa and many more… </li></ul>

×