Mozilla Firefox/Configuración/Personalización CSS

Para editar interfaz existen algunas formas de hacerlo. La hoja de estilo (CSS) permite modificar el diseño del navegador o de web a su gusto. En este apartado, podrás configurar mediante un archivo userChrome.css o por una extensión por ti mismo o por terceros.

Los archivos de estilo

Hay dos formas de editarlo mediante una carpeta del navegador o una extensión que te administra:

El directorio por defecto

Dependiendo de la versión y el idioma de tu sistema operativo, encontrarás un directorio donde se le conoce el perfil de usuario. La carpeta (siendo [profile-name] cualquier nombre) representa a toda la información almacenada abajo.

• Para Windows 95/98/ME (Phoenix): C:\windows\Application Data\Phoenix\Profiles\[profile-name]\[#s].slt\chrome\
• Windows NT (Phoenix): %UserProfile%\Application Data\Phoenix\Profiles\[profile-name]\[#s].slt\chrome\
• Windows 2000/XP: C:\Documents and Settings\[USARIO]\Application Data\Mozilla\Firefox\Profiles\default.tea\chrome\
• Windows Vista/7: %APPDATA%\Mozilla\Firefox\Profiles\[profile-name]\chrome\
• Unix Like: ~/.phoenix/[profile-name]/[#s].slt/chrome/
• Mac OS X: ~/Library/Application Support/Firefox/Profiles/[profile-name]/chrome/

Fuente: Ayuda de Firefox.

En dicha carpeta existe 2 tipos de diseño CSS que no vienen incluidas. Si usas por primera vez, aparecerá un arhivo ejemplo como se explica abajo:

• userChrome.css: es el archivo dedicado al diseño de Firefox. Esta centrado en la interfaz como sitios web.
• userContent.css: es otro archivo dedicado al funcionamiento de sitios web de Firefox. Se puede usar como recurso nativo para desaparecer páginas.

Fuente: shallowsky.com.

El nombre del perfil esta basado en un breve código terminado en .default. Si esta se elimina esa carpeta por cuestiones de mantenimiento, es preferible que copies la carpeta /chrome/ hasta tener un perfil nuevo.

Administrarlo por extensión

Es lo más recomendable tener un gestionador de archivos. Algunos casos, existen extensiones que reducen el riesgo de modificar el sistema del navegador. Si usas Stylish o su derivado User Style Manager, por ejemplo, puede facilitar la introducción de datos sin necesidad que accedas fuera del navegador, permitiéndote crear dentro del administrador de complementos.

El funcionamiento de este último es sencillo, desde el menú Firefox > Estilos de usuario podrás gestionar que estilos puedes usarlas o bien las que tienes instaladas.

¿Cómo se hace?

Aquí te explicamos el procedimiento, y si quieres los ejemplos para crear los tuyos:

Sintaxis

Para un correcto funcionamiento, el código debe tener tres instructores:

• El código @-moz-document para indicar que lo estás realizando dentro de Mozilla, o específicamente Firefox. Por ejemplo, el prefijo @-moz-document url("about:blank") indica que se edita en una página en blanco.
• El @namespace url(http://www.w3.org/1999/xhtml); como cabecera para indicar la base.
• El CSS. Dependiendo de cuántas características admiten el navegador, te aconsejamos dar una breve repasada sobre la sintaxis: el punto (.) es la operación, el numeral (#) es la identificación, los dos puntos (:) para una variante, un signo de admiración (!, como !important) para reconocerlo, etc.

El código más sencillo tiene a esta apareciencia: @namespace url(http://www.w3.org/1999/xhtml); @-moz-document url("about:blank") { *:empty:not([style]):not([text]):not([class]):not([onresize]) { background: #fff url(chrome://browser/skin/sync-bg.png) repeat-x center -80px; } }

Aquí se ve a un fondo de nube (o cualquier otra imagen) al abrir en una nueva pestaña. El mando inicia con una llave ({) y termina con otra cerrada Las características se inician con dos puntos como:empty:not([style]). Puedes ver el trabajo terminado, desarrollado por los usuarios de Userstyles.

Conseguir un estilo

Si deseas estar almodeando tu personalidad, dirigéte a userstyles.com

Crear el tuyo

Para empezar a modificar dirígete a la siguiente dirección chrome://browser/content/browser.xul (notas que estás en chrome:, carpeta local) y después a Firefox > Desarrollo web > Inspeccionar.

Referencias

•  Gina Trapani; «Customize Firefox with userChrome.css» Ed: Lifehacker. (en inglés) Consultado el 21 de agosto de 2011

•  «UserChrome.css» Ed: MozillaZine. (en inglés) Consultado el 21 de agosto de 2011

•  «Stylish, un Greasemonkey con estilo, estilo CSS» Ed: GenBeta. (en español) Consultado el 21 de agosto de 2011