Customizing the Flagfox icon style

Previously, in Flagfox 4.2, we had two different flag icon sets. Neither was perfect; both had different issues. The primary one was stylized with a gloss effect. The secondary one was stylized to be brighter. Both were too small, and the secondary one was actually upscaled. Aspect ratios were a mess and the colors were not always just stylized; sometimes they were just wrong. Both had plenty of missing and out-dated flags, and neither flag set is maintained by their creators anymore.

With Flagfox 5.0, I set out to fix this by creating a new flag icon set based on the public domain works from Wikimedia Commons. Both old sets have been retired. The new set now has flags using the correct aspect ratios and exact colors that the flags are supposed to have. They’re also a little bigger, so you can now actually tell what they all are. 😉

For users who like extra customization or use special themes and would like to tweak the style, there are a couple of ways you can go about customizing the flag icon style in Flagfox 5+.

Flag icon size

Flagfox 5 will now properly set a flag icon size that fits inside the address bar depending on the theme in use. (this is actually improved a bit in 5.0.0 since the last beta) If you’re using a very compact theme this will shrink the icon a little bit vertically. For users who wish to manually set an icon size, you can do so via the “extensions.flagfox.maxflagwidth” preference via about:config. This preference is in pixels, not including the 1px border (2px total). The default is 26, maximum is 45, and a good small icons size is 22.

I was initially considering having this as a setting in the Flagfox options dialog, however upon further testing I found that this wasn’t particularly user-friendly. Not all sizes look good when scaled, and minor changes are not easily noticeable. Even the difference between the default and a “small” mode would be very minor. Instead of adding in a slider or number that only would cover a very small range, I decided to find the ideal size given the size available and the detail in the flag icons. The result of my tinkering was 26px. However, there was no particular reason to remove this option, so users who wish to tinker with it are free to do so via the advanced preference.

Flag icon style

The flag colors are exactly what the flags’ colors should be. I’m now building all flag icons from the SVG versions of the flags Wikipedia uses, which are exact reproductions. Applying any sort of style just made things harder to distinguish, given the small size and wide range of flags. Trying to add in an option for this would just make things really complicated and confusing for some users. However, there’s nothing saying that you can’t put in your own styling for anything in Firefox. Here’s how you can make the flag icon lighter, for example:

#flagfox-icon {
    opacity: 0.75;
}

Add the above snippet of code to a new text file named “userChrome.css” and put it inside a new folder named “chrome” inside of your Firefox profile folder. Restart Firefox and, voila, a lighter icon. Using the “opacity” CSS property even allows for your lightweight theme (Firefox skin) to show through, if you use one. More advanced CSS filters can be applied as well. (non-SVG-based filters are currently behind a pref as they’re still in development by Mozilla).