Personaliza Firefox 57 con CSS

CSS personalizado para Fx es una colección de estilos CSS para Firefox 57 y versiones posteriores del autor del popular complemento de Firefox Classic Theme Restorer.

Firefox 57 ya no admitirá Classic Theme Restorer ni ninguna otra interfaz que cambie extensiones o temas debido al cambio a un sistema exclusivo de WebExtensions. El nuevo sistema WebExtensions evita cambios en la interfaz de usuario del navegador al no proporcionar API a los desarrolladores de extensiones.



La única opción que les queda a los usuarios de Firefox para modificar la interfaz de usuario, además de lo que Mozilla proporciona de forma nativa en Firefox, es usar CSS.

Los usuarios de Firefox que conocen CSS pueden editar archivos CSS manualmente para modificar su versión del navegador web. La mayoría de los usuarios de Firefox, por otro lado, probablemente no lo hagan, y ahí es donde entra en juego el CSS personalizado para Fx.

Personaliza Firefox 57 con CSS

classic firefox 57

El proyecto está alojado en GitHub y es mantenido por Aris, conocido por los complementos populares de Firefox, como Classic Theme Restorer y NoiaButtons. Restaurador de temas clásicos fue creado como un respuesta a la interfaz Australis que Mozilla lanzó en Firefox 29. La extensión ya no funcionará en Firefox 57 o más reciente porque Mozilla eliminó el soporte para complementos heredados en esa versión de Firefox y no introdujo capacidades para modificar la interfaz de usuario como API de WebExtensions.



La página de inicio del proyecto ofrece información sobre cómo ubicar la carpeta de perfil del navegador web Firefox y cómo usar los estilos proporcionados para modificar Firefox.

La forma más fácil de ubicar la carpeta de perfil es cargando about: support en la barra de direcciones del navegador y haciendo clic en el botón 'abrir carpeta' en Conceptos básicos de la aplicación> Carpeta de perfil.

Necesita crear una carpeta llamada chrome si no existe en la raíz del directorio del perfil. Una vez hecho esto, copie el contenido del archivo en esa carpeta. Asegúrese de que userChrome.css y userContent.css estén ubicados en la raíz de la carpeta de Chrome.

Esto es todo lo que se necesita hacer para agregar estos estilos personalizados a Firefox. Sin embargo, hay otro paso que es posible que desee dar, y es personalizar los ajustes.

El conjunto predeterminado de ajustes puede resultar atractivo para algunos usuarios, pero los archivos CSS vienen con opciones para habilitar o deshabilitar diferentes ajustes para cambiar aún más la interfaz.

userchrome css firefox styles

Abra el archivo userChrome.css en un editor de texto sin formato. El archivo usa el comando @import para importar los estilos CSS reales de los archivos CSS. Esto se hace para mantener ordenado el userChrome.css principal y facilitar a los usuarios de Firefox modificarlo.



Las líneas que comienzan con / * se comentan y los archivos CSS a los que se vinculan no se importan debido a eso.

Lo que debe hacer es revisar la lista de una sección a la vez para determinar cuál de los ajustes disponibles le gustaría habilitar en Firefox.

Descarga ajustes agregando / * al frente de la línea y * / al final. De manera similar, eliminas / * al frente y * / atrás para habilitar un ajuste.

Aquí está la lista de ajustes que está disponible en este momento:

  • Modificar los botones de la barra de herramientas de navegación.
  • Habilitar botones cuadrados
  • Cambiar la apariencia del icono
  • Cambie la ventana emergente del botón de la aplicación.
  • Cambiar el menú de marcadores y la apariencia emergente.
  • Apariencia del botón de la barra de herramientas de marcadores antiguos
  • Otras configuraciones de botones (botón de avance oculto, botones de avance y retroceso separados por ventanas emergentes de historial, botones de zoom oculto reinicio).
  • Aspecto personalizado de los botones de avance y retroceso
  • Botón de aplicación / hamburguesa en la barra de herramientas de navegación
  • Botón de aplicación / hamburguesa en la barra de título de Firefox (solo Windows)
  • Apariencia de las pestañas (estilo, posición de la barra de herramientas, por ejemplo, debajo de las barras de herramientas (lea: pestañas no en la parte superior), títulos de pestañas, iconos y más.
  • Modifique la barra de búsqueda, los menús contextuales, los iconos y otras barras de herramientas.
  • Cambia el estilo de la barra de ubicación.

Algunos de estos se explican por sí mismos. Otros no lo son, pero tienes dos opciones cuando se trata de estos. Habilítelos y compruébelos directamente, o abra el archivo CSS que se carga para averiguar qué hacen. Sin embargo, esto último requiere algunos conocimientos de CSS.

El archivo userContent.css usa el mismo diseño. Importa archivos CSS, y depende de usted habilitarlos o deshabilitarlos.

El proyecto también proporciona una lista de ajustes sugeridos de la interfaz nativa y ajustes about: config para modificar aún más la apariencia de Firefox.

Palabras de cierre

CSS personalizado para Fx ofrece muchas modificaciones de interfaz para la interfaz de Firefox 57 que no se pueden hacer con extensiones o con funciones integradas. Los usuarios actuales de Firefox pueden encontrarlo útil, especialmente si han usado Classic Theme Restorer o un complemento similar hasta ahora.

Aris publica actualizaciones periódicamente; eso es bueno no solo para las nuevas funciones que pueden introducirse mediante ajustes, sino también para mantener los estilos compatibles con las nuevas versiones de Firefox.