Resize and Move the Sidebar in Firefox

The sidebar in Firefox is an area on the left side of the screen that you can use to view items such as bookmarks or history. It is also useful for running web applications. However, there are some limitations of the sidebar. This post discusses two tweaks that allow you to resize and move the sidebar.
By default, you cannot change the width of the sidebar, widening it for items that do not fit in the default width. The sidebar also displays on the left side of the Firefox window, by default. You may want to move it to the right, making it more natural to view websites if you use a language that reads left to right.
Both of the tweaks to remove these limitations need to be applied to the userChrome.css file, which is located in the the chrome folder for each profile in the Profiles folder, as listed below. Open the userChrome.css file for the profile for which you want to remove the limitations of the sidebar in a text editor. As an example, we opened the userChrome.css file for the default profile.
Open Windows Explorer and navigate to one of the following folders, depending on which version of Windows you are using.
For Windows 7 and Vista:

C: \ Users \ [username] \ AppData \ Roaming \ Mozilla \ Firefox \ Profiles \ 9pjrzgo3.default \ chrome

For Windows XP:

C: \ Documents and Settings \ [username] \ Application Data \ Mozilla \ Firefox \ Profiles \ 5ufmvdw2.default \ chrome

NOTE: Replace “[username]” with your user name in the path name to access the userChrome.css file.
If you only have a userChrome-example.css, copy it and rename the copy to userChrome.css and continue with the steps in this post. We suggest you copy the example file so you can preserve the example.
Right-click on the userChrome.css file and select Open with | Notepad from the popup menu.

Add the following line to the end of the userChrome.css file to move the sidebar to the right side of the Firefox window.

#browser {-moz-box-direction: reverse;}

Add the following line to the end of the userChrome.css file to remove the maximum width limitation from the sidebar so you can resize it.

#sidebar {max-width: none !important;}

If you want no minimum width for the sidebar, you can use the following line, rather than the #sidebar line mentioned above:

#sidebar { max-width: none !important; min-width: 0px !important; }

To save your changes, select Save from the File menu.

To close Notepad, select Exit from the File menu.

You must restart Firefox for these changes to take effect. Once Firefox is open again, and you open something in the sidebar, you will see a double arrow when you put your mouse over the border between the sidebar and the viewable web page space. Click and hold on that arrow and drag it either way to resize the sidebar.

Now, when you open web pages, links, or images in the sidebar, you can widen it to allow for wider content. There is an extension for Firefox, called Open in Sidebar, that allows you to easily open a web page, a link, or an image in the sidebar using the context (right-click) menu.