Agregar color al botón del menú de Gnu IceCat 4.0 y derivados Firefox

abril 26, 2011 at 8:59 pm 2 comentarios


Mucha gente se queja del botón del menú de IceCat y/o derivados de Firefox 4.0, pero a diferencia de otros navegadores IceCat los puedes armar prácticamente a tu gusto y sus múltiples complementos lo hace muy versátil, IceCat puede ser tan saturado o minimalista como quieras; entonces, en general los desarolladores entregan un Interfaz estándar para ponerla a nuestro gusto.

Algun@s se quejan que en GnuLinux no aparece el botón en la parte superior con color como en Win, pero les cuento que en Mac esto tampoco aparece, esto se debe a que las liberias de win permiten eso y las de GnuLinux y Mac no.

Podemos ponerle color al botón, agregar un icono, solo dejar el icono etc, pragmáticamente cualquier modificación, gradiente o colo mediante css, pero yo traigo el azul mas acorde para IceCat y con varias opciones para diferentes gustos.

Aunque existe un extensión como Movable Firefox button que nos permite agregar icono y quitar el texto, este no nos permite agregar color y ponerlo mas agradable, por eso les traigo esta opción.

INSTALACIÓN >>

  • Baja el archivo Boton-menu-bonito-IceCat (Incluye Versión Azul y Gris)
  • Descomprimir
  • Copiar el archivo userChrome.css dentro de la carpeta chrome en home/USER/.gnuzilla/icecat/(numero).default/chrome
  • Reiniciar IceCat (o derivados de firefox)

PD: Si la carpeta chrome no existe sera necesario crearla

Sin mas carreta las opciones son:

1)

Simplemente activas (eliminas los /* del principio y final)

#appmenu-toolbar-button > .toolbarbutton-text {display:none !important;}

y eso eliminara el texto

2)

Activas (eliminas los /* del principio y final)

#appmenu-toolbar-button {
  list-style-image: url(“chrome://branding/content/icon16.png”);
  }

3)

Este es el que viene por defecto en el codigo

El codigo

/* Habilita Icono */
/*#appmenu-toolbar-button {
list-style-image: url("chrome://branding/content/icon16.png");
}*/

/* Elimina el Texto del boton */

/*#appmenu-toolbar-button > .toolbarbutton-text {display:none !important;}*/

/* Le da el color y las sombras */
#appmenu-toolbar-button,
#appmenu-button {
-moz-appearance: none !important;
background: -moz-linear-gradient(rgb(151, 195, 239), rgb(68, 141, 213) 95%) !important;
background-clip: padding-box !important;
border: 1px solid rgba(83,42,6,.5) !important;
border-bottom:none !important;
box-shadow: 0 1px 0 rgba(255,255,255,.25) inset,
0 0 0 1px rgba(255,255,255,.25) inset !important;
text-shadow: 0 1px 2px rgba(0,0,0,.8),
0 1px 2.5px rgba(0,0,0,.6) !important;
padding: 0 .35em !important;
margin: 0 2px 0px 2px !important;
border-radius: 3px 3px 0px 0px !important;
}

#appmenu-toolbar-button:hover:not(:active):not([open]),
#appmenu-button:hover:not(:active):not([open]) {
background-image: -moz-radial-gradient(center bottom, farthest-side, rgba(89,228,255,.5) 10%, rgba(89,228,255,0) 70%),
-moz-radial-gradient(center bottom, farthest-side, rgb(209,243,255), rgba(222,245,249,0)),
-moz-linear-gradient(rgb(151, 195, 239), rgb(68, 141, 213) 95%) !important;
border-color: rgba(83,42,6,.5) !important;
box-shadow: 0 1px 0 rgba(255,255,255,.1) inset,
0 0 1.5px 1px rgba(250,234,169,.7) inset,
0 -1px 0 rgba(250,234,169,.5) inset !important;
}

#appmenu-toolbar-button:hover:active,
#appmenu-toolbar-button[open],
#appmenu-button:hover:active,
#appmenu-button[open] {
background-image: -moz-linear-gradient(rgb(116, 175, 225), rgb(64, 131, 200) 95%) !important;
box-shadow: 0 2px 3px rgba(0,0,0,.4) inset,
0 1px 1px rgba(0,0,0,.2) inset !important;
}

#appmenu-toolbar-button > .toolbarbutton-menu-dropmarker,
#appmenu-button > .button-box > .button-menu-dropmarker {
list-style-image: url("chrome://browser/skin/appmenu-dropmarker.png") !important;
width: auto !important;
height: auto !important;
padding: 0 !important;
margin: 0 !important;
-moz-margin-start: .5em !important;
}
#appmenu-toolbar-button > .toolbarbutton-text,
#appmenu-button {
color:white !important;}

#appmenu-toolbar-button > .toolbarbutton-text,
#appmenu-toolbar-button > .toolbarbutton-menu-dropmarker {
margin-top: -2px !important;
margin-bottom: -2px !important;
}

/* MODO NAVEGACIÓN PRIVADA */

#main-window[privatebrowsingmode=temporary] #appmenu-toolbar-button,
#main-window[privatebrowsingmode=temporary] #appmenu-button {
background-image: -moz-linear-gradient(rgb(153,38,211), rgb(105,19,163) 95%) !important;
border-color: rgba(43,8,65,.5) !important;
}

#main-window[privatebrowsingmode=temporary] #appmenu-toolbar-button:hover:active,
#main-window[privatebrowsingmode=temporary] #appmenu-toolbar-button[open],
#main-window[privatebrowsingmode=temporary] #appmenu-button:hover:active,
#main-window[privatebrowsingmode=temporary] #appmenu-button[open] {
background-image: -moz-linear-gradient(rgb(144,20,207), rgb(95,0,158) 95%) !important;
}

#main-window[privatebrowsingmode=temporary] #appmenu-toolbar-button:hover:not(:active):not([open]),
#main-window[privatebrowsingmode=temporary] #appmenu-button:hover:not(:active):not([open]){
background-image: -moz-radial-gradient(center bottom, farthest-side, rgba(240,193,255,.5) 10%, rgba(240,193,255,0) 70%),
-moz-radial-gradient(center bottom, farthest-side, rgb(192,81,247), rgba(236,172,255,0)),
-moz-linear-gradient(rgb(144,20,207), rgb(95,0,158) 95%) !important;
border-color: rgba(43,8,65,.9) !important;
box-shadow: 0 1px 0 rgba(255,255,255,.1) inset,
0 0 2px 1px rgba(240,193,255,.7) inset,
0 -1px 0 rgba(240,193,255,.5) inset !important;
}

Anuncios

Entry filed under: Software Libre, Tips, trisquel, Uncategorized. Tags: , , , , .

Las vidas de los animales Script Nautilus: Descomprimir .RAR con Software Libre

2 comentarios Add your own

  • 1. Ares  |  julio 31, 2011 en 1:14 am

    Excelente trabajo, honestamente ambos estilos están increíbles y me costó trabajo elegir por cuál decidirme. Al final opté por el Azul pero si me aburro sé que tengo una buena opción con el Gris.

    Únicamente les hice unos pequeños cambios:
    1) A ambos les añadí:
    #appmenu-toolbar-button > .toolbarbutton-text {margin-left:5px !important;}

    Para que el nombre no quedara tan pegado del ícono

    2) Al azul le quité esta línea:
    border-bottom:none !important;

    porque sin borde abajo quedaba muy “vacio”.

    Pero esas son cosas de gustos de cada quién.

    Quise darle un poco más de margen al ícono pero no pude.

    Y si no lo dije antes lo vuelvo a decir: gracias por esos excelentes estilos.

    Responder
    • 2. Arder  |  julio 31, 2011 en 1:30 pm

      hooo si probare como se ve con esa opciones modificadas que comentas.. igual esta en gustos XD.. y gracias a ti por usarlo y leerme 🙂

      Responder

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

Trackback this post  |  Subscribe to the comments via RSS Feed


Escribe tu Email y recibe por correo las nuevas entradas en este blog.

Únete a otros 49 seguidores

Radios libres

radiolibrevigo.piesnegros.org

http://www.radiognu.org/

Redes Sociales Libres!!

Diaspora Identi.ca
Libre.fm Lorea - N-1.cc

Geek-Hack

PlayOgg
GNU
http://trisquel.info/es/

Todo empieza con un gran NO.

Boicot a la Explotación Capitalista http://269vida.com/ http://abolicion.tk

Copia y Comparte – Copyleft

Creative Commons License
Corazon en Llamas por CharlieVegan (arder) esta bajo licencia CopyLeft Creative Commons BY-SA 3.0.

A %d blogueros les gusta esto: