28Jun

Cómo personalizar el aspecto del botón de menú naranja de Firefox

click fraud protection

¿Te cansas de mirar el botón naranja del menú de Firefox? La interfaz de Firefox es completamente personalizable, por lo que puedes cambiar el color, el texto y otras propiedades del botón de menú de Firefox para crear tu propia apariencia personalizada.

Para cambiar el aspecto del botón de menú de Firefox, vamos a editar el archivo userChrome.css. Este archivo le permite cambiar la apariencia de cualquier parte de Firefox, así como su funcionalidad.

Antes de lanzarnos a editar el 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.

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 instalando el complemento ChromEdit Plus.

NOTA: Tenga mucho cuidado con lo que permite al instalar extensiones y otro software. Si no está seguro acerca del producto o no confía en la compañía, no lo instale. Probamos ChromEdit Plus y descubrimos que es seguro y confiable.

instagram viewer

Se muestra el cuadro de diálogo Instalación del software. Haga clic en Instalar ahora, que puede no estar disponible hasta que finalice la cuenta regresiva.

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

Debe 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. Haga clic para abrir la ventana de ChromEdit Plus.

Hay tres pestañas por defecto en la ventana de ChromEdit Plus. Vamos a editar 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 proporciona un archivo userChrome.css predeterminado.

@namespace url( "http: //www.mozilla.org/keymaster/gatekeeper/ there.is.only.xul");
# appmenu-button{
background: #orange! Important;
}
# appmenu-button dropmarker: antes{ contenido de
: "Firefox"! Important;Color
: #FFFFFF! Importante;
}
# appmenu-button. button-text{
display: 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 anterior 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 inteligentes, incluidas las de la línea @namespace. Deben ser citas ordinarias y directas. Si alguno de ellos es una cita inteligente, el archivo no afectará la apariencia de Firefox en absoluto.

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 un azul oscuro y cambiar el texto de "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, utilizando el código de color hexadecimal o código de color HTML.Por ejemplo, elegimos un azul oscuro con el código de color hexadecimal de # 2C4362.

NOTA: Para descubrir el código de color hexadecimal para un color que desee, consulte nuestros artículos sobre cómo obtener códigos de color hexadecimal a partir de colores RGB decimales, seleccionar colores de cualquier parte 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 "contenido" en la sección "# appmenu-button dropmarker: before" al texto deseado, 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 texto de color como blanco( #FFFFFF), pero puedes cambiarlo a algo como un gris claro( # F2F2F2), o algo así.

Haga clic en Guardar y luego reinicie para que los cambios entren en vigencia.

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 de 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 ícono. También hemos publicado muchos otros consejos y ajustes para sacar el máximo provecho de Firefox.