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%\Mozilla\Firefox\Profiles\ .default\
    NOTE: Browse C:\Documents and Settings\[User Name]\Application Data\Mozilla\Firefox\Profiles\ on Windows XP/2000 or C:\users\[User Name]\AppData\Roaming\Mozilla\Firefox\Profiles\ on Windows Vista.
  • Windows 95/98/ME – C:\WINDOWS\Application Data\Mozilla\Firefox\Profiles\ .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.

Related Posts