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:
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.


9 thoughts

  1. Well I tried it both ways and to tell you the truth I actually like the file manager way better…not to mention that the sidebar is on the right side and out of my way.The left side is ok but in my case it was in the way and took up space on the left side and on the right it’s just there when I need it…Thanks.

  2. @Barbara

    To each their own 🙂 That’s why I showed both ways. Doesn’t matter how you get to the file you are trying to find, as long as you get to the same end result.

  3. Can anybody help? I cannot make the firefox read the userContent.css file to change the presentation for a particular user.

    I am actually trying to use a special barcode font for printing address labels.

    It works fine in IE but cannot figure out how to make it work in firefox 3.0 on Ubuntu 9.04?

    I have found 4 or 5 recommended directory locations for userContent.css and userChrome.css up to now.

    What should I try next?

  4. Hi Nicole Hernandez.

    Try these options to get back some screen realestate and feel free to experiment with the number values i.e. my values are set at toolbar 12px and tabbrowser 19px.

    Smaller toolbar

    toolbar {
    max-height:30px !important;

    Smaller tab browser

    .tabbrowser-tabs {
    max-height: 30px !important;
    margin: 0;

    Hope this helps?

    R.E. Burrows.

  5. @Mike

    You need to rename “usercontentexample.css” to “usercontent.css”
    Then save file, exit firefox and restart firefox.

    Hope this helps?

  6. @mike check file permission and ownership.
    I know it is ages ago but just in case somebody needs it.
    Open Nautilus and go to view to show ~additional columns~
    Check owner, octal permissions and group.
    Navigate to the directory and look at the the new columns.
    Mine are “username”(not root), 100644, username
    -owner, octal permission, username
    To change anything you have to open a terminal
    type sudo su
    to become root
    now you can change the owner with chown
    type chown “username” “filename”
    and the permissions with chmod
    type chmod 644 “filename”
    If it still does not work try IRC chat.

  7. Hey
    I have tried the terminal way, but I can’t find “chrome” in the [random code].default. There is also no file which ends on *.css. (I have also tried other folders in [random code].default, but also in them there wasn’t a css-file…

Leave a Reply