Personalizar la barra de Marcadores de FireFox con Stylish

En este Tip mostrare como manejar algunos aspectos de Firefox para ajustarlo a las necesidades de cada usuario (que en este caso, fueron mías; el numero máximo de BookMarks/Marcadores que hay visibles bajo la barra de Direcciones)...

La mano de la sabiduría :

Bagando por los foros de Stylish (addOn para FireFox), me encontré con un simple pero singular Estilo para lograr que los Tabs de Firefox estuviesen centrados a lo largo de la ventana, y aunque este detalle no tiene relevancia en este Tip, me intrigo el hecho de que Stylish no solo es capaz de modificar las cascadas de estilos en un sitio web normal, sino también la apariencia del navegador propiamente dicho. Pero ¿por que?

• NOTA: Si llegaste aquí por indexación buscando el script que acabo de mencionar, PTJ esta aquí:

  Código :

  @-moz-document url(chrome://browser/content/browser.xul){.tabbrowser-tabs .scrollbox-innerbox{-moz-box-pack:center !important;}}

Luego, volviendo al tema, investigando en los foros de soporte de FireFox, descubrí que el diseño esta nutrido por simple Javascript y un poco de CSS. Yay ! Así es como esto comenzó !

Básicamente habran dos maneras de hacerlo:

1.- Old School: Edición manual

Normalmente podrás encontrar artículos donde describen como personalizar los mismos aspectos de FireFox a través de la localización del archivo userChrome.css. Recopile su ubicación dentro de cada SO:

Código :

//- Windows UE
C:\Documents and Settings\usuario\Datos de programa\Mozilla\Firefox\Profiles\xs1sadub.default\chrome
//- Windows XP/2000
C:\Documents and Settings\usuario\Application Data\Mozilla\Firefox\Profiles\ .default\
//- Windows Vista
C:\users\usuario\AppData\Roaming\Mozilla\Firefox\Profiles\ .default\
//- Linux
~/.mozilla/firefox/ .default/
//- Mac OS X
~/Library/Application Support/Firefox/Profiles/ .default/

• NOTA: En Windows debes poner en lugar de usuario, el nombre de la cuenta de usuario donde has instalado FireFox

Después solamente es cuestión de editarlo un poco lo cual podrás lograr de una manera sencilla bajando Chrome Edit 0.1.1.1, pero, aun así existen mejores métodos sin tener que entrañarse en los archivos fuente que provee FireFox. Finalmente reiniciar FireFox y ver si todo quedo bien. Si no, comenzar de nuevo y buscar el error.

2.- Stylish: Adaptándolo a nuestro uso

1. Primero deberás bajar e instalar Stylish. Recuerda que es un addOn como cualquier otro, así es que su instalación no tiene mayor complicación.
   
2. Luego, una vez terminado el paso anterior, nos dirigimos al fondo de nuestra barra de estado, y daremos click sobre el nuevo icono de Stylish, para luego entrar en "administrar estilos".
   
   
   
   
   
   
3. Luego, debes vamos sobre el icono que dice Escribir y aparecerá una ventana donde colocaremos los Estilos de CSS a emplear:
   
   
   
   
   
   
4. Ahora solo es cuestión de manejarnos como si fuese cualquier otro Estilo, conociendo claro esta, algunos de los valores que maneja FireFox, y para que estos tengan efecto debes iniciar con la llamada del objetivo al que apuntaremos Stylish. En este caso el mismo FireFox:
   

   Código :

   @-moz-document url(chrome://browser/content/browser.xul){/* ... */}

   • NOTA: Si tratas de abrir la dirección chrome://browser/content/browser.xul podrás ver como es nada menos que la barra de direcciones, de menú y demás de FireFox.
   
   
5. Finalmente añadir lo que necesitas tal y como si se tratara de una pagina normal, teniendo en cuenta claro esta como ya mencione, los elementos a manejar. He aquí algunos de la lista que se encuentra en la pagina de Mozilla.
   
   
   Por ejemplo, como insinué al principio, tengo muchos BookMarks a pesar de que hago limpieza constantemente. Y cuando busco alguno en especifico odio tener que llegar hasta el menú desplegable a la derecha de la pantalla. Asi es que solo fue cuestion de tomar un script para FF2:

   Código :

   #bookmarks-ptf {display: block !important;}
   #bookmarks-ptf toolbarseparator {display: inline !important;}
   #PersonalToolbar {display: none;}
   #navigator-toolbox:hover > #PersonalToolbar {display: -moz-box;}

   
   Y adaptarlo basándome en las referencias de FireFox, y lograrlo en FF3:

   Código :

   /* Mostrar todos los elementos del los BookMarks dentro de un scroll horizontal */
   #bookmarksBarContent {display:block !important;}
   #bookmarksBarContent toolbarseparator {display:none !important;}
   #bookmarksBarContent .bookmark-item {visibility: visible !important;}
   .places-toolbar-items {overflow-y:auto !important; height: 40px !important;}
   /* Aparecer y desaparecer los BookMarks con el mouse. Estado :hover */
   #PersonalToolbar {display: none;}
   #navigator-toolbox:hover > #PersonalToolbar {display: -moz-box;}

   
   Da click sobre la imagen, para ver el resultado completo
   
   Listo ! Ahora veras como tu barra de Marcadores ha desaparecido, pero al pasar el cursor sobre su antiguo espacio esta aparecerá con un scroll horizontal para llegar a todos los elementos sin tener que desplegar el antiguo menú. Enjoy !

Old School Vs Stylish

• Buscar, Abrir y Editar nuestros trabajos:

  • Aunque tengo en mente que acceder hasta la carpeta de FireFox se vera mucho mas Cool enfrente de tus amigos, y te hará sentir como todo un programador de Mozilla Labs. Hay que tener en cuenta que puedes mandar todo al c@rajo por un error.
    
  • En cambio al usar a Stylish solo debes dar click en el icono en la barra de estado, ademas de que como intermediario si fracasas en algo, el mismo complemento te lo alertara. O bien, si el resultado no te agrada, solo desactivas el script y el cambio sera al instante.

• Probar y Revisar todos nuestros experimentos:

  • Para ver los resultados de cada camio que hagas, de la manera manual debes guardar el nuevo archivo CSS, cerrar/reiniciar FireFox, e intentar abrirlo. Esto se vuelve engorroso.
    
  • Pero con Stylish basta con seleccionar vista previa y veras tu resultado.

• Restablecer a la normalidad la apariencia FireFox:

  • Si estas trabajando directamente con los archivos fuente y quieres restablecerlos como al principio, deberás buscar y eliminar todos los cambios. O bien haber creado un respaldo del archivo original.
    
  • Si utilizaste Stylish, bastara con desactivar el Estilo que creaste.

 

Tweet