To start, download the example theme I've produced on GitHub, and unpack the .zip to a directory of your choice. Then, in install.rdf, modify the following to suit your theme:
Code: Select all
<em:id>example@id</em:id> <em:version>1.0.0</em:version> <em:name>Example Name</em:name> <em:description>Example Description</em:description> <em:creator>Your Name Here</em:creator> <em:type>4</em:type> <em:internalName>example-name</em:internalName>
Now we get to the fun part: the icons! In the theme folder, you will find a file called Toolbar.png. Using an image editor of your choice (I use Paint.NET, personally), add images in the same locations as the ones already in there, replacing the images you want to change. Be sure to entirely remove the originals if you changed them; if they're shown underneath, you will be able to see them in the theme. Also be sure to remove the black lines separating the icons -- I purely added these so that you can see the maximum allowed size for the icons (it's 18x18, though the default icons themselves never tend to go above 16x14). From left to right, top to bottom, the icons are as follows:
WebRTC (NOTE: not used, but the icon is in the default anyway -- feel free to ignore this one)
Bookmark not starred
Back (used in the "unified back/forward", i.e. the standard layout. This is the one you will normally see, not the smaller one above)
Once the toolbar has been themed, now it's time to give your theme a nice icon to represent it! This can be anything, just as long as it's a reasonable size; for example, don't go over 64x64 for this, as it won't look too good if downscaled.
You will notice there is in fact CSS involved here - a file called linux.css within the theme folder, used to place the icons on Linux. However, you don't need to edit this at all! It should just work.
And...that's it, really. You've made your first theme! Congratulations! To package your theme, save it as a .zip file (this can be done on Windows by selecting the files and right clicking, using Send To - Compressed (zipped) folder; alternatively, the archiver program of your choice can do this), and rename the file to .xpi. This can then be sent to people if you so wish, or you could just use it yourself, in which case, simply drag into the browser to install.