Designing Firefox Themes

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