This site will have limited functionality while we undergo maintenance to improve your experience. If an article doesn't solve your issue and you want to ask a question, we have our support community waiting to help you at @FirefoxSupport on Twitter and/r/firefox on Reddit.

Search Support

Avoid support scams. We will never ask you to call or text a phone number or share personal information. Please report suspicious activity using the “Report Abuse” option.

Learn More

Firefox Custom Sidebar Width using CSS [Solved]

  • 6 replies
  • 0 have this problem
  • 1 view
  • Last reply by cVcFireFox

more options

tried searching for this but unfortunately i didn't find any relevant posts

trying to set the sidebar width using the 'userChrome.css' file

the css file path is;

C:\Users\username\AppData\Roaming\Mozilla\Firefox\Profiles\bjf0cg2g.default-release\chrome\

userChrome.css

the css is;

  1. sidebar { min-width:34px !important; max-width:34x !important; }


appreciate any feedback because there seems to be an issue with the above

tried searching for this but unfortunately i didn't find any relevant posts trying to set the sidebar width using the 'userChrome.css' file the css file path is; C:\Users\username\AppData\Roaming\Mozilla\Firefox\Profiles\bjf0cg2g.default-release\chrome\ userChrome.css the css is; #sidebar { min-width:34px !important; max-width:34x !important; } appreciate any feedback because there seems to be an issue with the above

Modified by cVcFireFox

All Replies (6)

more options

See:

Override the existing rules by adding the !important flag.

#sidebar-box {
	min-width: 14em;
	max-width: 36em;
	width: 18em;
}

more options

much appreciated!

more options

this doesn't appear to be working either which suggests that the issue is this end

ff 113.0.2 (x64) win 10

the search box might be forcing the re-size css to fail?

(the image is an example of the many combinations attempted)

Modified by cVcFireFox

more options

I'm not sure what width you want as 3em is rather small and you won't see much. The code works for me.

In Windows saving the file is usually the only time things get more complicated because Windows can silently add a .txt file extension and you end up with a file named userChrome.css.txt. To avoid this you need to make sure to select "All files" in the dialog to save the file in the text editor using "Save File as".

You need to close (Quit/Exit) and restart Firefox when you create or modify the userChrome.css file.

More info about userChrome.css/userContent.css in case you are not familiar: *https://www.userchrome.org/what-is-userchrome-css.html

In Firefox 69 and later you need to set this pref to true on the about:config page to enable userChrome.css and userContent.css in the chrome folder.

more options

ah ok, didn't know about the config being set to true so that's for that : )

the resizing has however, caused a new search for another setting in the userChrome file

in the image below, resizing the sidebar causes the 'tab's close icon' to hover over the tab, making it impossible to navigate through the sidebar tabs

removing the text from the tab(s) in the sidebar

removing the close tab function/icon from the sidebar [edit] solved

Modified by cVcFireFox

more options

update: just in-case this is useful for anyone else, i've managed to complete the task at hand

I installed a few add-ons sidebery => https://addons.mozilla.org/en-US/firefox/addon/sidebery/ new tab button => https://addons.mozilla.org/en-US/firefox/addon/new-tab-button-we/ close tab button => https://addons.mozilla.org/en-US/firefox/addon/close-the-tab-button/

i set the about:config to be able to read the userChrome.css file about:config => toolkit.legacyUserProfileCustomizations.stylesheets = true

i used the sidebar settings to remove the 'close tab' function

sidebar settings => tab => show close button on mouse over 'off'

this is the css from the image

/* makes sidebar adjustable */

  1. sidebar-box {

min-width: 1em !important; max-width: 36em !important; }

/* hides the native tabs */

  1. TabsToolbar {
 visibility: collapse;

} /* leaves space for the window buttons */

  1. nav-bar {
   margin-top: -8px;
   margin-right: 74px;
   margin-bottom: -4px;

}



Thanks to the support from cor-el!



the image show the browser using the sidebar to navigate open tabs, removes the default tabs from the top of the page and creates 3 separate panels to house each open tab

Modified by cVcFireFox