How to use icons instead of text labels on PrefBar buttons.

Again, as in other HOWTOs, we use userChrome.css to change PrefBar items appearance.

Suppose we want PrefBar buttons to look as toolbar buttons with pictures on them, instead of text labels. This is how we do it:

More detailed discussion with examples follows.

  1. Getting and setting icons
  2. Hiding text and using icons as background
  3. Hiding checkboxen and using [checked="true"] to show state
  4. Hiding checkboxen just to save space, using label color as indicator, without any icons

Getting and setting icons

Of course, to show some pictures we need first to have these pictures. There are many free-to-use icons around the internet, including huge iconsets like Famfamfam, Fugue, and Fatcow, which all come in handy 16x16 PNG format. If we need to resize or somehow change an icon, there are also many tools and services available. We can just use ImageMagick command-line tools, say, to convert colored picture into grayed, the following command line would go:

convert picture.png -colorspace gray picture-gray.png

In fact, sometimes grayscale picture turns out too dark or too light, so it's useful also to change its gamma trying various values between 0.5 and 2.0, say:

convert picture.png -colorspace gray -gamma 1.5 picture-gray.png

So suppose we prepared our icons, 16x16 png files, now it's handy to put them either in the same directory where userChrome.css resides (i.e. <profile-dir>/chrome), or, to avoid mess, into a subdirectory of it, e.g. <profile-dir>/chrome/icons.

Hiding text and using icons as background

Ok now, suppose we want PrefBar button for saving files, Save, to be represented by diskette.png icon which we have put into icons subdirectory. Element name for PrefBar buttons is toolbarbutton, and to find its Id we Right-click->Edit the button and see the Id which appears in this case to be "savepage". So the full selector would be

#prefbar-buttons toolbarbutton[id$="savepage"]

Now, we redefine text colour for the element to be transparent, and define the background to use our icon, centered and non-repeating, so the whole rule is

#prefbar-buttons toolbarbutton[id$="savepage"] {
    color: rgba(0,0,0,0) !important;
    background: url('icons/diskette.png') center no-repeat;
}

(Note that for brevity we can omit '!important' for background, as it seems that it's not defined by default so no conflict expected; you can add it, nevertheless, just to be on safe side.)

You can restart Firefox now, and hopefully you will see diskette picture on Save button, instead of text.

Howerer, the button is still wide, as wide as to accomodate the label Save, which is still present, though invisible. The easiest way to deal with this is to change label to something shorter, yet still distinguishable , 2 or 3 letter long, say, Sav. For example, we can use xCa for ClearCache and xCo for ClearCookies.

Well, that's mostly all for it, but I'll describe a couple more of tweaks.

What if we want our button to use different icon while in pushed state? Easy, we add another rule with :active selector to use different icon, like this:

#prefbar-buttons toolbarbutton[id$="clearcookies"]:active {
    background: url('icons/cookies-x-gray.png') center no-repeat;
}

What if we want our button to have both icon and text label? We have to reserve some space for our picture, so we need some blank space characters, 5 or 6, to text label. It would look like "     ClearCache" (or "ClearCache     " if you want the icon to be on right side). Then use left (or right) instead of center in our rule:

#prefbar-buttons toolbarbutton[id$="clearallcache"] {
    background: url('icons/drawer-x.png') left no-repeat;
}

To use pictures with checkboxes (for switching elements like images, flash, javascript etc.), use checkbox instead of toolbarbutton.

Hiding checkboxen and using [checked="true"] to show state

To save space, we may want to hide the checkbox itself from checkbox element. Using DOM inspector, we can find out that the checkbox itself is represented by box with .checkbox-check class, so it's the selector for, say, images element is

#prefbar-buttons checkbox[id$="images"] .checkbox-check

Thus, hiding rule for several checkboxes would be

#prefbar-buttons checkbox[id$="images"] .checkbox-check,
#prefbar-buttons checkbox[id$="Flash"] .checkbox-check,
#prefbar-buttons checkbox[id$="javascript"] .checkbox-check {
  display:none;
}

As long as we have assosiated labels available, checkboxes, though invisible, still can be switched on/off.

Ok, now we need to define different icons for 'On' and 'Off' states. It goes like this:

#prefbar-buttons checkbox[id$="images"] {
    color: rgba(0,0,0,0);
    background: url('icons/photos-gray.png') center no-repeat;
}
#prefbar-buttons checkbox[id$="images"][checked="true"] {
    background: url('icons/photos.png') center no-repeat;
}

Same for other buttons. Done.

Hiding checkboxen just to save space and using label color as indicator, without any icons

As we learned from this HOWTO, we can change colour and background while in checked state. Thus, we don't need checkboxes, label colour will indicate on/off state. We can hide checkboxes and use some well-distinguishing colour and background, e.g. gray for Off state and yellow-on-red for On, this way:

#prefbar-buttons checkbox[id$="javascript"] .checkbox-check {
  display:none;
}

#prefbar-buttons checkbox[id$="javascript"] {
  color: gray; font-weight: bold;
}

#prefbar-buttons checkbox[id$="javascript"][checked="true"] {
  background-color: rgba(200,00,00,0.7);
  color: yellow;
}

Again, as was said above, while by default !important isn't needed, if you use some non-default theme, you may need to add it, or just add it anyway for safety.

I hope this should work on most Firefoxen when PrefBar works.

This howto has been written by Yan Li. Thanks for sharing!