![Firefox logo](https://assets-prod.sumo.prod.webservices.mozgcp.net/media/uploads/products/2020-04-14-08-36-13-8dda6f.png)
Firefox Custom Sidebar Width using CSS [Solved]
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
cVcFireFox modificouno o
All Replies (6)
See:
Override the existing rules by adding the !important flag.
#sidebar-box { min-width: 14em; max-width: 36em; width: 18em; }
much appreciated!
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)
cVcFireFox modificouno o
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
- https://www.userchrome.org/how-create-userchrome-css.html
- https://www.userchrome.org/firefox-changes-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.
- about:config => toolkit.legacyUserProfileCustomizations.stylesheets = true
- https://support.mozilla.org/en-US/kb/about-config-editor-firefox
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
cVcFireFox modificouno o
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 */
- sidebar-box {
min-width: 1em !important; max-width: 36em !important; }
/* hides the native tabs */
- TabsToolbar {
visibility: collapse;
} /* leaves space for the window buttons */
- 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
cVcFireFox modificouno o