ObjectClarity.com

I've recently upgraded my EeePC 701 to a 904HA and thought I'd try out the eeeBuntu base installation.  It installed smoothly and after a few hours of tweaking and adding my programs the clouds parted and the sun came out.  Everything was as it should be.  The Firefox style was a little different than I have on Windows XP and instead of using Littlefox, which I used on my 701 (but always hated), I thought I'd just tweak the default style instead.

Firefox uses a file named UserChrome.css for user defined styles.  These styles can affect pretty much anythhing on the user interface.  the trick is finding the CSS class name of the UI element that you want to modify.

On windows XP you can find the userChrome.css file in the following location.  Substitute your own username and the profile folder will have some random looking folder name as well. 

"C:\Documents and Settings\yourusername\Application Data\Mozilla\Firefox\Profiles\kw3t1e5u.default\chrome\userChrome.css"

On my Ubuntu machine, the file is in the following location.

~/.mozilla/firefox/kw3t1e5u.default/chrome/userChrome.css

If the file doesn't exist yet, just rename the example found in the same folder as a starting point.

I've tweaked my userChrome.css file to minimize the toolbar height and font size as well as hiding the bookmark and webdeveloper toolbars until I hover my mouse over the menu or the remaining toolbar.

See below:

.places-toolbar-items
{
 height: 28px !important;
 font-size: 7.5pt;
}

/* Auto-hide bookmarks toolbar */
#PersonalToolbar {
 visibility: collapse !important;
 height: 26px !important;
 font-size: 7.5pt;
}
#navigator-toolbox:hover > #PersonalToolbar {
 visibility: visible !important;
}

/* Auto-hide the webdeveloper toolbar */
#webdeveloper-toolbar {
 visibility: collapse !important;
 height: 26px !important;
 font-size: 7.5pt;
}
#navigator-toolbox:hover > #webdeveloper-toolbar {
 visibility: visible !important;
}

/* Set the tab height */
.tabbrowser-tabs {
   height: 26px !important;
}