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:
- first, we get some icons of appropriate size and place them next to userChrome.css
- next, we create a css rule for each button to use an icon as non-repeating background, while making the text disappear by changing its colour to transparent
- using
:active
pseudo-class, we can use different icons for normal and pushed ('active') button states - for checkboxes, we can hide checkbox itself and use different icons as indicator of checked state
More detailed discussion with examples follows.
- Getting and setting icons
- Hiding text and using icons as background
- Hiding checkboxen and using
[checked="true"]
to show state - 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!