Cómo personalizar la apariencia del botón de menú de Orange Firefox

¿Te cansas de mirar el botón naranja del menú 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 propio aspecto personalizado..

Para cambiar la apariencia del botón de menú de Firefox, estaremos editando 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á editarlo fácilmente y guardarlo en el formato correcto. Haga clic en el siguiente enlace para ir a la página web de ChromEdit Plus.

http://webdesigns.ms11.net/chromeditp.html

Haga clic en el botón Agregar a Firefox en la página.

El siguiente mensaje puede aparecer. Haga clic en Permitir para continuar con la instalación del complemento ChromEdit Plus..

NOTA: Tenga mucho cuidado con lo que permite cuando instale extensiones y otro software. Si no está seguro del producto o no confía en la empresa, no lo instale. Probamos ChromEdit Plus y lo encontramos seguro y confiable.

Aparecerá el cuadro de diálogo Instalación del software. Haga clic en Instalar ahora, que puede no estar disponible hasta que finalice una cuenta atrás.

NOTA: Puede cambiar la duración de la cuenta regresiva en el botón Instalar, pero no recomendamos desactivarlo.

Debe reiniciar Firefox para finalizar la instalación. Haga clic en Reiniciar ahora en el cuadro de diálogo emergente..

Una vez que se reinicia Firefox, el botón ChromEdit Plus se agrega a la derecha del cuadro Dirección. Haz clic para abrir la ventana de ChromEdit Plus..

Hay tres pestañas por defecto en la ventana de ChromEdit Plus. Estaremos editando 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: #orange! importante;

# appmenu-button dropmarker: antes de
contenido: "Firefox"! importante;
color: #FFFFFF! importante;

# appmenu-button .button-text
pantalla: ninguna! 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éguela 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 citas en userChrome.css NO sean citas inteligentes, incluidas las de la línea @namespace. Deben ser citas ordinarias, rectas. Si alguno de ellos son citas inteligentes, el archivo no afectará en absoluto la apariencia de Firefox.

Haga clic en Reiniciar para reiniciar Firefox usando 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 "#orange" en la línea "background" en la sección "# appmenu-button" a un color diferente, usando 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 para el color que desea, consulte nuestros artículos sobre cómo obtener códigos de color hexadecimales de colores RGB decimales, seleccionar colores desde cualquier lugar de la pantalla y obtener códigos de color en varios formatos.

Para cambiar el texto en el botón, cambie el texto "Firefox" en la línea de "contenido" en la sección "# appmenu-button dropmarker: before" a su texto deseado, como "Cómo hacer geek". Añadimos un espacio después del texto para tener más espacio entre el texto y la flecha desplegable en el botón.

También puede elegir cambiar el color del texto cambiando la línea de "color" en la misma sección "# appmenu-button dropmarker: before". Dejamos el color del texto como blanco (#FFFFFF), pero puede 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 "Cómo hacer 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 en las comillas a la ubicación de su imagen en su computadora. Deja el “archivo: ///” en la ruta.

background-image: url (“file: /// C: /Users/Lori/Pictures/htg_background.png”)! important;

Haga clic en Guardar y reiniciar de nuevo.

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 al máximo Firefox..