Talk about add-ons and extension development.
5 posts • Page 1 of 1
I finished reading Mozilla’s guide to Australis toolbar buttons wondering if there was an example SVG file that could get me started making an Australis-style toolbar button icon. I didn’t find any, so I made an attempt at matching the built-in buttons.
This SVG file can be edited in Inkscape. It consists of some basic shapes that are filled with a gradient that more or less matches Mac Firefox’s toolbar sprites. A “letterpress” filter is then applied to the shapes; this filter may be of use to some of you.
I then hand-edited the file into a second, smaller SVG file. Australis icons use different fill gradients in each version of the Default theme, so you have to maintain multiple versions of this file. But since I didn’t want any additional overhead for the icon, I just used @media queries that were intended for theme developers, such as -moz-windows-theme: aero, to override the gradient for each platform. So the image below will look different depending on your OS:
My extension’s primary UI is a toolbar button whose icon is meant to resemble the built-in Character Encoding icon. Not every extension fits that profile, but the great thing about a vector image is that you can tweak it to your needs. (It also takes up little space and renders well on high-resolution monitors.) These two SVG files are available under a CC0 Public Domain Dedication, so have at them.
Last edited by smsmith on March 5th, 2014, 8:00 pm, edited 1 time in total.
Reason: made into a 30 day sticky starting 05 March - smsmith/moderator
Can we post in this topic? Super super thanks for this!
You’re welcome. A couple notes for anyone who wants to try this approach:
Thanks that helps, but I notice you're in Stanford, if I need more help I'm going to stop by Im in SJ lol
jk but I go to the PAMF around there sometimes.
Yeah, I really wouldn't recommend using any methods that make it difficult to do a review. File size overhead is not a big deal and Mozilla really recommends using their internal standardized formatting, which has a lot of white space to make everything human readable.
Tip of the day: If it has "toolbar" in the name, it's crap.
What my avatar is about: https://addons.mozilla.org/en-US/seamonkey/addon/sea-fox/
5 posts • Page 1 of 1
Who is online
Users browsing this forum: No registered users and 0 guests