Unlock Firefox Sidebar Width

README.md

🦊 Unlock Firefox Sidebar Max Width

Instructions in Spanish can be found here. Instrucciones en Español disponible aquí.

Step-by-Step Instructions

1. In a new tab, navigate to about:support.
2. Under Application Basics, find Profile Folder.
3. Locate and click the Open Folder button next to it. It will be next to an address similar to: %appdata%\Mozilla\Firefox\Profiles\{profile-id}.default ¹
4. Inside your Firefox Profile Folder, create a new folder named: chrome.
5. Inside the newly created chrome folder, create a new file named: userChrome.css.
6. Copy the following code, paste as content and save: ²

#sidebar-box {
  max-width: 40% !important;
  min-width: 300px !important;
}

7. Finally, in a new tab, navigate to about:config and search for:

toolkit.legacyUserProfileCustomizations.stylesheets

...and change it to true.

8. Restart Firefox and test it out!

Footnotes

1. %appdata% is equivalent to C:\Users\{username}\AppData\Roaming. ↩

2. After Firefox 107, #sidebar was deprecated, and #sidebar-box was introduced. ↩

instrucciones.md

Instrucciones - Paso a Paso

1. Abre una nueva pagina y navega a about:support.
2. Dentro del menu Configuración básica de la aplicación, encuentra Carpeta de perfil.
3. Encuentra el boton Abrir carpeta a su lado.
4. Dentro del folder que abrio, cree un nuevo folder llamado chrome.
5. Dentro de este nuevo folder, cree un archivo llamado userChrome.css. (Debe ser precisamente este nombre y extension.)
6. Copie el siguiente codigo dentro del nuevo archivo creado y salvelo.

#sidebar-box {
  max-width: 40% !important;
  min-width: 300px !important;
}

7. Finalmente, abra la pagina about:config y busca lo siguiente:

toolkit.legacyUserProfileCustomizations.stylesheets

...y cambie false a true.

8. Reinicie Firefox y listo!

Nota: %appdata% es equivalente a C:\Users\{username}\AppData\Roaming.

create a new file named: userChrome.css.

What kind of file should be created?

@EricJMa the file needs to be a CSS file, with the extension .css.
You can create a text file with extension .txt and then rename it and change the extension to .css.

Here's a screenshot: