How to: Create an Icon Theme

Post your tutorials for using applications or performing related tasks here.
Note: Not for "how do I...?" Questions!
Forum rules
Tutorials and Howtos should only relate to developed software, and not to third party applications. e.g.: Don't post a generic Howto for configuring a firewall.
If you have a question how to do something, you should use one of the support boards, not this board. It is meant for people to document and post instructions.
User avatar
Lootyhoof
Themeist
Themeist
Posts: 1566
Joined: 2012-02-09, 23:35
Location: United Kingdom

How to: Create an Icon Theme

Unread post by Lootyhoof » 2015-07-29, 23:12

With the technology introduced in Pale Moon 25.6, it is possible to create what are known as "icon themes": themes which only change the toolbar icons of the default theme and nothing else. This is possible by overriding the toolbar image(s) used in the default theme. In this tutorial I will be showing you how to make your own, no CSS knowledge required! :)

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>
In chrome.manifest, you now need to change "example-name" to whatever you set the same in install.rdf.

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:

Back
Forward
Stop
Reload
Home
Downloads
Bookmarks
Print
New Tab
New Window
Cut
Copy
Paste
Full Screen
Zoom Out
Zoom In
Sync
Subscribe (RSS)
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)
Bookmark starred

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! :clap: 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. :)
Last edited by Lootyhoof on 2015-08-18, 13:47, edited 2 times in total.

User avatar
Antonius32
Add-ons Team
Add-ons Team
Posts: 695
Joined: 2014-05-25, 11:18
Location: Netherlands

Re: How to: Create an Icon Theme

Unread post by Antonius32 » 2015-07-30, 00:14

Thanks for the tutorial! Will this work on Linux as well?

Edit: It doesn't seem to work on Linux. I guess that's because Pale Moon for Linux uses system icons, and comes with a different "Toolbar.png" image.

User avatar
Lootyhoof
Themeist
Themeist
Posts: 1566
Joined: 2012-02-09, 23:35
Location: United Kingdom

Re: How to: Create an Icon Theme

Unread post by Lootyhoof » 2015-08-01, 22:00

That's unfortunate, but due to how the Linux theme pulls from the icons available in the system theme that is applied. I can certainly add some CSS to work around this, but, well...that would somewhat defeat the purpose of this, in a way (though, you wouldn't actually need to work on the CSS at all, it'd just sit there...). Unless anyone particularly objects to adding some tiny CSS specifically for Linux into the mix, I'll add some. :)

User avatar
Antonius32
Add-ons Team
Add-ons Team
Posts: 695
Joined: 2014-05-25, 11:18
Location: Netherlands

Re: How to: Create an Icon Theme

Unread post by Antonius32 » 2015-08-01, 22:07

Lootyhoof wrote:Unless anyone particularly objects to adding some tiny CSS specifically for Linux into the mix, I'll add some. :)
That would be great!

User avatar
Lootyhoof
Themeist
Themeist
Posts: 1566
Joined: 2012-02-09, 23:35
Location: United Kingdom

Re: How to: Create an Icon Theme

Unread post by Lootyhoof » 2015-08-17, 22:52

Updated the link in the OP, to an example that supports Linux. Sorry for the wait! It's also simplified things somewhat; I've edited the tutorial as such.

Locked