Firefox: Foobar Controls for a dark theme #
i love the Foobar Controls add-on for Firefox by Ben Basson. As you can see from the above pic i like the dark themes. Although it's a cool add-on the buttons are a bit flat, this post will tell you how i got the dark theme 3D buttons for this add-on.
i did a Google search for dark foobar buttons and i found this: Foobar2000 Buttons by sawb (site), a nice set of dark theme buttons for foobar.
After installing the Foobar Controls add-on i had to change the buttons to go with my dark theme. As i had a set of cool dark buttons i looked in the add-on folder (C:\Documents and Settings\your user-name\Application Data\Mozilla\Firefox\Profiles\extensions\{weird number}\chrome\content\) and found foobar.png. It's a single pic with all the buttons on, cool all i had to do is change this pic... right?... no. The "Foobar2000 Buttons" were bigger than the ones in the foobar.png so this would need a bit of work.
Looking in foobar.css in the add-on folder i saw that it points too foobar.png and i realized i could use Stylish (or you could use your userChrome.css) to override this, cool. i fired up Photoshop and put the Foobar2000 Buttons on foobar.png all equally spaced out and saved it as foobar2.png:
(use this one if you want as i've done all the work (:, right-click/Save Link As...)Put foobar2.png in the add-on folder, this is cool as you don't even have too change the original foobar.png, CSS is cool. An important note is when the Foobar Controls add-on updates you will need to put the foobar2.png back in the add-on folder as updating deletes it, as we are using Stylish to use this png the update doesn't effect the code. This is the code i put in a new style in Stylish:
@namespace url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul);
/* foobar controls - modz */
.foobarcontrol{list-style-image:url("chrome://foobar/content/foobar2.png")!important;}
#foobar_prev,#foobar_next,#foobar_play,#foobar_stop,#foobar_paus,#foobar_rand,#toolbar-menubar image{padding:0!important;margin:0!important;border:0!important;}
#foobar_prev:hover,#foobar_next:hover,#foobar_play:hover,#foobar_stop:hover,#foobar_paus:hover,#foobar_rand:hover{background-color:#aaa!important;}
#foobar_stop,#foobar_stop_item{-moz-image-region:rect(1px 19px 17px 3px)!important;}
#foobar_stop:hover,#foobar_stop[checked="true"]{-moz-image-region:rect(1px 19px 17px 3px)!important;}
#foobar_paus{-moz-image-region:rect(1px 41px 17px 25px)!important;}
#foobar_paus:hover,#foobar_paus[checked="true"]{-moz-image-region:rect(1px 41px 17px 25px)!important;}
#foobar_play{-moz-image-region:rect(1px 64px 17px 46px)!important;}
#foobar_play:hover,#foobar_play[checked="true"]{-moz-image-region:rect(1px 64px 17px 46px)!important;}
#foobar_prev{-moz-image-region:rect(1px 86px 17px 69px)!important;}
#foobar_prev:hover,#foobar_prev[checked="true"]{-moz-image-region:rect(1px 86px 17px 69px)!important;}
#foobar_next{-moz-image-region:rect(1px 108px 17px 91px)!important;}
#foobar_next:hover,#foobar_next[checked="true"]{-moz-image-region:rect(1px 108px 17px 91px)!important;}
#foobar_rand{-moz-image-region:rect(1px 130px 17px 114px)!important;}
#foobar_rand:hover,#foobar_rand[checked="true"]{-moz-image-region:rect(1px 130px 17px 114px)!important;}
/* foobar controls - modz */
.foobarcontrol{list-style-image:url("chrome://foobar/content/foobar2.png")!important;}
#foobar_prev,#foobar_next,#foobar_play,#foobar_stop,#foobar_paus,#foobar_rand,#toolbar-menubar image{padding:0!important;margin:0!important;border:0!important;}
#foobar_prev:hover,#foobar_next:hover,#foobar_play:hover,#foobar_stop:hover,#foobar_paus:hover,#foobar_rand:hover{background-color:#aaa!important;}
#foobar_stop,#foobar_stop_item{-moz-image-region:rect(1px 19px 17px 3px)!important;}
#foobar_stop:hover,#foobar_stop[checked="true"]{-moz-image-region:rect(1px 19px 17px 3px)!important;}
#foobar_paus{-moz-image-region:rect(1px 41px 17px 25px)!important;}
#foobar_paus:hover,#foobar_paus[checked="true"]{-moz-image-region:rect(1px 41px 17px 25px)!important;}
#foobar_play{-moz-image-region:rect(1px 64px 17px 46px)!important;}
#foobar_play:hover,#foobar_play[checked="true"]{-moz-image-region:rect(1px 64px 17px 46px)!important;}
#foobar_prev{-moz-image-region:rect(1px 86px 17px 69px)!important;}
#foobar_prev:hover,#foobar_prev[checked="true"]{-moz-image-region:rect(1px 86px 17px 69px)!important;}
#foobar_next{-moz-image-region:rect(1px 108px 17px 91px)!important;}
#foobar_next:hover,#foobar_next[checked="true"]{-moz-image-region:rect(1px 108px 17px 91px)!important;}
#foobar_rand{-moz-image-region:rect(1px 130px 17px 114px)!important;}
#foobar_rand:hover,#foobar_rand[checked="true"]{-moz-image-region:rect(1px 130px 17px 114px)!important;}
Through trial & error i discovered i just had too add 4 to a few pixel values to accommodate the larger buttons, you can use this code, if it works cool, if not just play with numbers until it looks good, it's not hard.
recap:
download foobar2.png
put in add-on folder
put code in Stylish
have cool looking dark foobar controls
(:
Labels: CSS, dark theme, foobar controls, stylish
