FireFox - AquaFox - Customizing Mozilla Firefox

Have you checked out Firefox? It's one of the most customizable browsers I've found. I've taken may steps and experimented with many different parts of Firefox. When it all comes down to it, most things are editable in the userChrome.css file. That's right, for the most part, it's just CSS changes. With a few graphics thrown in of course.

First thing to note is that you need to back stuff up first. There is no guarantee that you won't screw something up if you going and start editing stuff. Also, these techniques have been used in the PR and RC versions of Firefox but are not transferable. That means that if you get it to look good on one computer you probably can't just copy the files over to a new computer. Also, I'm on a Mac and have only tried these techniques on a Mac. I'm unsure if they work on a PC but I'm pretty sure they should. One more, I don't know how well these changes will do with updgrades. Only time will tell.

So what have I done to Firefox?

• I have Safari Tabs installed in Firefox. Thanks to hicksdesign for coming up with these edits. Once installed and working, I opened up the graphic files and removed the pinstripes. Now I have solid white Safari style tabs in Firefox

• I have pretty widgets installed in Firefox also. It makes the checkboxes, input boxes and radio buttons a little more like MacOSX

• Sage is the RSS reader I have installed, that is what is showing on the screen shot. I then applied an aqua makeover to make it much nicer on the eyes. I also replaced the Sage leaf icon with the new RSS/Live Bookmark icon in Firefox RC1

• Address bar fix - In Firefox's address bar type about:config and you will see hundreds of options that you can customize! Change browser.urlbar.clickSelectsAll to false. This tells the browser, than when you click in the address bar, don't highlight everything. Just keep the courser where you clicked!

• No focus box around links when clicked on - In the about:config area change browser.display.focus_ring_width equal to 0. This should make it go away.

My userChrome.css edits - Now is where I really started playing with things. Go to your home folder -> application Support -> Firefox -> Profiles -> [random folder] -> Chrome Here is where you edit your CSS file and add any images.

• Toolbar - For the toolbar background I used the header.png file that was included with the Sage makeover files. I edited it to make it a little smaller and then added it to the Chrome folder. Then, inside userChrome.css I added.

menubar, toolbox, toolbar {
background-image: url("header.png") !important;
background-color: none !important;
}

• Bookmark Bar Background - Here the only change I made was to pinstripe.png inside the Chrome folder. Once changed it took effect.

• I've changed a few other things, like the blue folder text to make them easier to see and changed all bookmark text go a lighter gray. All can be edited in the userChrome.css

/* Make bookmark folders bold and blue */
.bookmark-item[type="menu"] > .toolbarbutton-text { font-weight: 900; color: #3d6bff; }
/* Make tab group bookmarks */
.bookmark-group > .toolbarbutton-text { font-weight: 900; color: #3d6bff; }
/* bookmark folders */
menu.bookmark-item { color: #3d6bff !important; font-weight: 900 !important; }
/* You could select normal bookmarks this way */
menuitem.bookmark-item { color: #464646 !important; }

Extensions Installed

SpellBound
Google Page Rank
Ad Block
WeatherFox
Download Manager Tweak
Sage
Web Developer
Copy Image

Would you like to create custom firefox themes?

Do you have some tips or tricks? How about questions? Join our Firefox discussion. Need more things to customize? Check out Mozilla's Tips.

Old Sites | Christmas/Holiday Desktops | Firefox Customization