Cambiar aspecto de Firefox usando CSS

Esta vez quisiera cambiar el aspecto de Firefox de una forma más personal y profesional. Para ello necesito ChromEdit Plus, un complemento para Firefox que me permite reescribir el archivo donde se encuentra los estilos predeterminados de Firefox o simplemente buscar el archivo userChrome.css y userContent.css y modificarlos.

Paso 1: Aprendiendo a usar este complemento.

Desde la página oficial tenemos la opción de añadirlo a Firefox directamente o descargarlo a nuestro disco. Si queremos usarlo ya, la opción más sencilla es añadirlo a Firefox.

Una vez instalado y activado, se encontrará en Herramientas de Firefox. Lo abrimos y veremos que nos sale una ventana con tres pestañas. La primera "userChrome.css", es la que me interesa para modificar el aspecto de Firefox.

Paso 2: Añadir estilos. 

Para añadir nuevos estilos tenemos que tener en cuenta la palabra !important. ¿Qué es?, pues es una palabra clave para ignorar las reglas de cascada. Cualquier definición que vaya acompañada de un !important tendrá mayor importancia que cualquier otra, y por tanto, todas las reglas predeterminadas serán ignoradas siempre y cuando se sustituyan con esta palabra. Un ejemplo sería este:

window {
  font-size: 3.5mm;
  font-family: "Arial", serif;
  font-weight: bold;
}

*Este código dice que el tamaño de los textos en las ventanas es 3.5mm, que la familia es Arial y está en negrita, pero yo no quiero este estilo, así que en el complemento añado esto:

window {
  font-size: 4.9mm !important;
  font-family: "Palatino", sans-serif !important;
  font-weight: normal !important;
}

Así sustituyo el tamaño del texto, la familia y le quito la negrita. El ejemplo gráfico sería así:

También podría cambiar el CSS del color de la barra así:

.autocomplete-richlistitem {
background: #333333 !important; /* Color de fondo */
color: #FFFFFF !important; /* color del texto */
}
.autocomplete-richlistitem:hover,
.autocomplete-richlistitem[selected="true"] {
background: #666666 !important; /* color del Fondo al pasar el cursor */
}

Es simple CSS con un !important, nada más, todo depende del interés y paciencia de uno. Algunas bases de esto se encuentran en un ejemplo de Mozilla.

¡Suerte y ánimo!, con un poco de perseverancia se puede conseguir crear un tema personal y único.