¿Te cansas de mirar el botón de menú naranja de Firefox? La interfaz de Firefox es completamente personalizable, por lo que puede cambiar el color, el texto y otras propiedades del botón de menú de Firefox para crear su propia apariencia personalizada.
Para cambiar la apariencia del botón de menú de Firefox, editaremos el archivo userChrome.css. Este archivo le permite cambiar la apariencia de cualquier parte de Firefox, así como su funcionalidad.
Antes de sumergirnos en la edición del archivo userChrome.css, instalaremos un complemento, llamado ChromEdit Plus, que nos permitirá editar fácilmente el archivo y guardarlo en el formato correcto. Haga clic en el siguiente enlace para ir a la página web de ChromEdit Plus.
Haga clic en el botón Agregar a Firefox en la página.
Puede aparecer el siguiente mensaje. Haga clic en Permitir para continuar instalando el complemento ChromEdit Plus.
NOTA: Tenga mucho cuidado con lo que permite al instalar extensiones y otro software. Si no está seguro del producto o no confía en la empresa, no lo instale. Probamos ChromEdit Plus y descubrimos que es seguro y confiable.
Aparece el cuadro de diálogo Instalación de software. Haga clic en Instalar ahora, que puede no estar disponible hasta que finalice una cuenta regresiva.
NOTA: puede cambiar la duración de la cuenta atrás en el botón Instalar , pero no recomendamos inhabilitarlo.
Debes reiniciar Firefox para finalizar la instalación. Haga clic en Reiniciar ahora en el cuadro de diálogo emergente.
Una vez que Firefox se reinicia, el botón ChromEdit Plus se agrega a la derecha del cuadro Dirección. Haz clic en él para abrir la ventana de ChromEdit Plus.
Hay tres pestañas por defecto en la ventana de ChromEdit Plus. Editaremos el archivo userChrome.css, que está en la primera pestaña. Si la pestaña está vacía, copie y pegue el siguiente texto en la pestaña userChrome.css y haga clic en Guardar. Esto le da un archivo userChrome.css predeterminado.
@namespace url (“http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul”);
# appmenu-button {
fondo: # naranja! importante;
}
# appmenu-button dropmarker: before {
contenido: "Firefox"! importante;
color: #FFFFFF! importante;
}
# appmenu-button .button-text {
pantalla: ninguno! importante;
}
Es posible que ya tenga un archivo userChrome.css, en cuyo caso ya habrá texto en la pestaña userChrome.css. Copie todo el texto de arriba excepto la primera línea, la línea @namespace, y péguelo en la pestaña en algún lugar después de la línea @namespace. Si desea conservar lo que ya tiene, puede pegar el texto anterior al final del archivo.
IMPORTANTE: Asegúrese de que todas las comillas en userChrome.css NO sean comillas tipográficas, incluidas las de la línea @namespace. Deben ser comillas simples y ordinarias. Si alguno de ellos son comillas tipográficas, el archivo no afectará en absoluto la apariencia de Firefox.
Haga clic en Reiniciar para reiniciar Firefox con el archivo userChrome.css nuevo o revisado.
En este ejemplo, vamos a cambiar el color de fondo a azul oscuro y cambiar el texto "Firefox" a "How-To Geek".
Para cambiar el color de fondo, cambie el texto "# naranja" en la línea "fondo" en la sección "# appmenu-button" a un color diferente, utilizando el código de color hexadecimal o el código de color HTML. Por ejemplo, elegimos un azul oscuro con el código de color hexadecimal de # 2C4362.
NOTA: Para averiguar el código de color hexadecimal de un color que desee, consulte nuestros artículos sobre obtener códigos de color hexadecimales a partir de colores RGB decimales , seleccionar colores desde cualquier lugar de la pantalla y obtener códigos de color en múltiples formatos .
Para cambiar el texto del botón, cambie el texto "Firefox" en la línea de "contenido" en la sección "# appmenu-button dropmarker: before" por el texto que desee, como "How-To Geek". Agregamos un espacio después del texto para tener más espacio entre el texto y la flecha desplegable del botón.
También puede elegir cambiar el color del texto cambiando la línea "color" en la misma sección "# appmenu-button dropmarker: before". Dejamos el color del texto como blanco (#FFFFFF), pero puedes cambiarlo a algo como un gris claro (# F2F2F2), o algo así.
Haga clic en Guardar y luego en Reiniciar para que los cambios surtan efecto.
El botón ahora es azul oscuro y dice "How-To Geek".
También puede agregar una imagen de fondo al botón, además de cambiar el color de fondo. Creamos una imagen que tiene el favicon How-To Geek a la izquierda y un fondo transparente para que se vea el color de fondo azul oscuro. Para agregar una imagen de fondo a su botón, agregue la siguiente línea a la sección "# appmenu-button", cambiando la ruta entre las comillas a la ubicación de su imagen en su computadora. Deje el "archivo: ///" en la ruta.
background-image: url (“archivo: /// C: /Users/Lori/Pictures/htg_background.png”)! important;
Haga clic en Guardar y reiniciar nuevamente.
Ahora nuestro botón está completo.
También puede personalizar el botón de menú de Firefox convirtiéndolo en un icono. También hemos publicado muchos otros consejos y ajustes para aprovechar Firefox al máximo .
