About Me · Send mail to the author(s) E-mail · Twitter

At GROSSWEBER we practice what we preach. We offer trainings for modern software technologies like Behavior Driven Development, Clean Code and Git. Our staff is fluent in a variety of languages, including English.

Feed Icon


Open Source Projects


Blogs of friends

Now playing [?]

Error retrieving information from external service.

Customizing the Firefox UI

Posted in Browser at Tuesday, 04 April 2006 19:27 W. Europe Daylight Time

Firefox LogoThe last weeks I've been totally blown away by the Firefox user experience. Not only that it is a fast and standards-compliant browser, there is a vast list of extensions out there to tailor the browser to your needs. All plugins I've seen so far work and are updateable in non-admin environments. One may think I am an extension junkie, but see for yourself.

Some days ago Gunnar recommended the Yahoo! Widget Engine to me. I've decided to give it a try and I am pretty happy so far. The volume control widget even replaced the volume control that comes with my sound card. As I use the volume control fairy often, I like it to be visible on top of other applications. The widget engine allows just this by setting "on top" in the widget's properties. Add a little transparency and you're done. I've decided to place the widget in the lower right corner of the screen. However, Firefox has some controls placed there that aren't clickable because the widget sits on top of them.

Standard Firefox Status Bar

Firefox won't be Firefox if there were no means of moving the controls out of the way and thus giving access to both the Firefox buttons and volume control: There is the possibility of placing a userChrome.css file inside the Firefox user profile under C:\Documents and Settings\<User Name>\Application Data\Mozilla\Firefox\Profiles\<Random Number>.default\chrome\. Using this CSS stylesheet, it's possible to control any aspect of the browser appearance.

 * Do not remove the @namespace line -- it's required for correct functioning
/* set default namespace to XUL */
@namespace url("");

 * Pad the status bar from the right if Firefox is maximized to display Yahoo's
 * volume control widget without underlying Firefox controls.
#main-window[sizemode="maximized"] #status-bar {
  padding-right: 172px !important;

Once the above file sits in in the profile directory, each time Firefox is maximized the status bar is indented 172 pixels from the right.

Customized Firefox Status Bar

I was surprised to see that I was able to put the stylesheet together in about 5 minutes. There's plenty of documentation and samples on the web regarding XUL applications, and Firefox is one.

Now playing: Ethereal 77 - Landscapes - Baltica

All comments require the approval of the site owner before being displayed.
(will show your gravatar icon)
[Captcha]Enter the code shown (prevents robots):

Live Comment Preview