Firefox Quick Tip: More Customization with userChrome.css (Plus Moving the Tab Bar to the Bottom)

ChromEdit Plus

For the most time, I’ve been featuring what I deem are helpful Firefox add-ons. I’ve featured a few tweaks here and there but most of them are done through the about:config page. This page already gives you oodles of noodles but you can do a lot more by tweaking other stuff with Firefox.

For example, you can customize Firefox’s user interface by modifying the userChrome.css file.

This should be found in your Firefox’s profile folder which can be found in the following locations:

  • Windows Vista/XP/2000%AppData%MozillaFirefoxProfiles .default
    NOTE: Browse C:Documents and Settings[User Name]Application DataMozillaFirefoxProfiles on Windows XP/2000 or C:users[User Name]AppDataRoamingMozillaFirefoxProfiles on Windows Vista.
  • Windows 95/98/MEC:WINDOWSApplication DataMozillaFirefoxProfiles .default
  • Linux~/.mozilla/firefox/
    .default/
  • Mac OS X~/Library/Application Support/Firefox/Profiles/ .default/

The thing is, the file doesn’t exist by default. However, in the profile folder, there’s a file named userChrome-example.css. You can just rename it (by taking out -example) to get your userChrome.css.

If you don’t want the hassle of navigating through your folders and renaming files, then I suggest you use this add-on – ChromEdit Plus. It allows you to open and edit customizable files (userChrome.css included). Once installed you can access it from the Tools menu.

Download ChromEdit Plus here.

Moving the Tab Bar to the Bottom

Here’s one thing you can do while fiddling with your userChrome.css file. If you’re the type who’d want the Tab bar on the lower portion of your screen, then this little tweak will do it for you.

  • Open ChromEdit Plus
  • In userChrome.css, add the following code:
    /* Display the Tab bar at the bottom */ #content > tabbox { -moz-box-direction: reverse; }
  • Save and restart Firefox

Remember that anything enclosed in /* and */ are considered comments. Meaning these portions will not alter the code. For example, /* Display the Tab bar at the bottom */ just leaves a note on what the rest of the code will do.

Try this out. I’ll be featuring a lot more customizations using these tricks.

5 thoughts on “Firefox Quick Tip: More Customization with userChrome.css (Plus Moving the Tab Bar to the Bottom)”

  1. how would I use userChrome.css code to disable (or password?) the ability to delete individual history entries?
    Can I remove the delete from the menu you get when opposite clicking on an entry in the history?
    Control-h?
    other ways?
    This is for children who use a computer, a “trust but verify” situation.
    Thanks!

Comments are closed.