How To – Customize Firefox userChrome on Ubuntu

After you’ve used Firefox for a while, you may have the desire to tinker around with the userChrome.css file and tweak it a bit for your likes or dislikes. Unfortunately, finding the userChrome.css is a bit confusing for people – particularly when the file doesn’t actually exist. This is something that was a bit confusing to me in the past, so I imagine that at least one other person out there has had a problem figuring out how to do this also.

For people who, like myself, are trying to get good at Linux by using Ubuntu, sorting through things at the command line is a tad intimidating, but I’m going to walk you through it and show you that it’s not so scary. In fact, I’m actually using my command line a lot more these days in Linux.

I’m going to give an example using one of the simple things you can do with the userChrome.css — we’ll change the sidebar from opening on the left to opening on the right. I’ll show you both ways in Ubuntu, the terminal way, and the file manager way.

The Terminal Way

1) Go to Applications -> Accessories -> Terminal
2) Type the following:
cd ~/.mozilla/firefox/
3) Then type:
dir
4) Look for the name of the directory that ends with .default as it’s name. It’s a randomly generated name, so you’ll have to look at see what it is for your computer. For example, on my computer I see the following when I type ‘dir’:
a8meqmbz.default pluginreg.dat profiles.ini
5) You want to change to the chrome directory that is inside that .default folder, so you type this (though change the name for your folder as it is on your computer)
cd a8meqmbz.default/chrome/
6) Type: ‘dir’ again and look at the directory. You should see:
userChrome-example.css userContent-example.css
7) Now, until userChrome-example.css is saved as plain old userChrome.css, it does nothing. It’s just an example file. Firefox won’t recognize the file till it’s renamed. So you need to open the file.
8) I like using gedit, so I’m going to type:
gedit userChrome-example.css
9)That should open the file in gedit, and you can add the following lines to the very bottom of that file:
/* Move sidebar to the right side */
hbox#browser { direction: rtl; }
hbox#browser > vbox { direction: ltr; }

10) Do File -> Save As in gedit, and save it as userChrome.css (instead of userChrome-example.css). Then close gedit.
11) Close Firefox if you have it open, and then reopen it. You should be able to see your sidebar on the right hand side instead of the left (In Firefox: View -> Sidebar).

The File Manager Way

1) Click on your home folder.
2) View -> Show Hidden Files
3) Search through the folder until you find the one named ‘.mozilla’
4) Go into the .mozilla folder and then open the subfolder named ‘firefox’
5) In the firefox folder, open the folder with the random digits and ‘.default’ in it’s name.
6) In that .default folder, now go into the ‘chrome’ folder.
7) Right click on userChrome-example.css and rename it, removing the ‘-example’ part from the name.
8) Open the file, userChrome.css, and add the following lines to the end of it:
/* Move sidebar to the right side */
hbox#browser { direction: rtl; }
hbox#browser > vbox { direction: ltr; }

9) Save your file and close your editor.
10) Close Firefox if you have it open, and then reopen it. You should be able to see your sidebar on the right hand side instead of the left (In Firefox: View -> Sidebar).

So there you have it. About the same number of steps, but typically a file/folder type person will see their way as faster, just like the terminal person will see theirs as faster. It doesn’t really matter in the long run, they both do the same thing.

~Nicole