Cómo personalizar la interfaz de usuario de Firefox con userChrome.css

La interfaz de Firefox Quantum sigue siendo extremadamente personalizable gracias a su archivo userChrome.css. Puede editar este archivo para ocultar elementos de menú no deseados, mover la barra de pestañas debajo de la barra de herramientas de navegación, ver varias filas en la barra de herramientas de marcadores y hacer otras cosas que normalmente no serían posibles.

Cómo funciona esto

El archivo userChrome.css de Firefox es un archivo de hoja de estilo en cascada (CSS) que usa Firefox. Si bien las hojas de estilo se aplican normalmente a las páginas web, esta hoja de estilo en particular se aplica a la interfaz de usuario de Firefox. Le permite cambiar la apariencia y el diseño de todo lo que rodea a la página web. En realidad, no puede agregar ninguna función; solo puede modificar lo que ya está allí para cambiarlo, ocultarlo o moverlo.

Esto no tiene nada que ver con Google Chrome. «Chrome» se refiere a la interfaz de usuario del navegador web, que es el nombre de Google Chrome.

El archivo userChrome.css existe en Firefox durante mucho tiempo, pero ha adquirido una importancia renovada con Firefox Quantum. Muchos ajustes que antes se podían realizar con complementos del navegador ahora solo se pueden realizar editando el archivo userChrome.css.

Dónde encontrar ajustes

Si bien puede crear sus propios ajustes si comprende el código CSS y cómo se diseñó la interfaz de Firefox, también puede encontrar ajustes en línea. Si desea realizar un cambio determinado, es probable que alguien más ya haya descubierto cómo hacerlo y haya escrito el código.

A continuación, se incluyen algunos recursos para comenzar:

  • Ajustes de muestra de userChrome.org : una breve lista de ajustes interesantes que demuestran el poder de userChrome.css.
  • Ajustes clásicos de CSS : un repositorio de ajustes de userChrome.css del autor de la extensión Classic Theme Restorer, que ya no funciona en Firefox Quantum.
  • userChrome Tweaks : una colección de interesantes ajustes de Firefox.
  • FirefoxCSS en Reddit : este subreddit es una comunidad para discutir ajustes. Puede buscar en el subreddit para encontrar los ajustes de otras personas, ver lo que la gente está compartiendo e incluso pedir información si no puede encontrar un ajuste que realmente desea.
  • Guía para editar su menú contextual : instrucciones para eliminar elementos del menú contextual de Firefox y cambiar su orden en la lista, tomadas del subreddit FirefoxCSS.

Tenga en cuenta que las versiones anteriores de Firefox tenían una interfaz diferente. Es posible que los ajustes de userChrome.css que encuentres en línea no funcionen en Firefox 57 y versiones posteriores, también conocido como Firefox Quantum.

Si sabe lo que está haciendo con CSS, puede habilitar la caja de herramientas del navegador para inspeccionar el cromo del navegador Firefox. Esto le proporcionará la información que necesita para personalizar varios elementos de la interfaz del navegador con su propio código CSS.

Cómo crear su archivo userChrome.css

El archivo userChrome.css no existe de forma predeterminada, por lo que una vez que tenga uno o dos ajustes que desee probar, primero debe crear el archivo en la ubicación adecuada dentro de la carpeta de su perfil de Firefox .

Para iniciar la carpeta de su perfil de Firefox, haga clic en menú> Ayuda> Información de solución de problemas en Firefox.

Haga clic en el botón «Abrir carpeta» a la derecha de la carpeta de perfil para abrirla. (En macOS o Linux, verá un botón «Mostrar en Finder» o «Abrir directorio» en su lugar. Las siguientes instrucciones muestran el proceso en Windows, pero es básicamente el mismo en Mac y Linux; solo usará un diferente administrador de archivos y editor de texto.)

Si ve una carpeta llamada «chrome» en la carpeta de perfil que aparece, haga doble clic en ella. Sin embargo, probablemente no lo hará, ya que esta carpeta no es creada por versiones modernas de Firefox.

Para crear la carpeta, haga clic con el botón derecho en el panel derecho y seleccione Nuevo> Carpeta. Nómbrelo «chrome», presione Entrar y luego haga doble clic en él.

Deberá decirle a Windows que le muestre las extensiones de archivo , si aún no lo ha hecho. Windows oculta las extensiones de archivo de forma predeterminada para simplificar las cosas. Este paso no es necesario en macOS o Linux, que muestran esta información de forma predeterminada.

En Windows 8 o 10, simplemente puede hacer clic en la pestaña «Ver» en la cinta y marcar la casilla «Extensiones de nombre de archivo» para hacerlas visibles. En Windows 7, haga clic en Organizar> Carpeta y opciones de búsqueda, haga clic en la pestaña «Ver» y desmarque «Ocultar extensiones para tipos de archivo conocidos».

Ahora creará el archivo userChrome.css, que en realidad es solo un archivo de texto en blanco con la extensión .css en lugar de la extensión .txt.

Para hacerlo, haga clic con el botón derecho en el panel derecho aquí y seleccione Nuevo> Documento de texto. Nómbrelo «userChrome.css» asegurándose de eliminar la extensión de archivo .txt.

Windows le advertirá que está cambiando la extensión del archivo y esto puede ser un problema para ciertos tipos de archivos. Haga clic en «Sí» para confirmar su cambio.

En macOS o Linux, cree un archivo de texto vacío con el mismo nombre.

Cómo editar el archivo userChrome.css

Puede utilizar cualquier editor de texto para editar el archivo userChrome.css. El editor de texto del Bloc de notas incluido con Windows funciona bien. Si desea un editor de texto más potente con más funciones, nos gusta Notepad ++ .

Para editar el archivo en el Bloc de notas, haga clic derecho y seleccione «Editar».

Agregue los ajustes que desee al archivo copiándolos y pegándolos. Si agrega varios ajustes, asegúrese de agregarlos todos en sus propias líneas.

Una vez que haya terminado, guarde el archivo haciendo clic en Archivo> Guardar en el Bloc de notas.

Siempre que edite su archivo userChrome.css, tendrá que cerrar todas las ventanas abiertas de Firefox y reiniciar Firefox para que los cambios surtan efecto.

Si vuelve a la carpeta «chrome» con frecuencia para editar su archivo userChrome.css, es posible que desee crear un acceso directo a la carpeta en el escritorio o agregarlo a las carpetas de «acceso rápido» en el Explorador de archivos.

El archivo userContent.css

Firefox también tiene un archivo userContent.css que puede editar, y es posible que encuentre algunos ajustes que dicen que son para el archivo userContent.css.

Para usar este archivo, simplemente cree un archivo llamado «userContent.css» en la misma carpeta que su carpeta de Chrome. Los ajustes que coloques en este archivo afectarán las «páginas de contenido» internas de Firefox, como las páginas Nueva pestaña y Opciones.

 

¡Ayuda, rompí algo!

If you ever encounter a problem with a tweak, you can just remove it from your userChrome.css file and restart Firefox. If that doesn’t work, you can completely delete the userChrome.css file and restart the browser to erase all your changes and get a fresh Firefox interface.