Firefox 3 :: personalizar la barra de direcciones

Una de las novedades de Firefox 3 es la nueva barra de direcciones, con funcionalidades nuevas, como el integrar los resultados de búsqueda junto con el historial y marcadores, y la forma en que se presentan los resultados, entre otras cosas. Esto ha dado que hablar entre los usuarios ya que a algunos les encanta y a otros no les gusta para nada. Lo cierto es que esta versión de Firefox rompe con la manera tradicional en la forma en que se comporta la barra y en lo personal la experiencia me ha resultado genial. Sin embargo la capacidad de Firefox en cuanto a la personalización es una gran virtud de este navegador y a continuación veremos varios tips para personalizar la barra de direcciones de forma que más nos guste.

Número de sugerencias de la barra de direcciones

Por defecto Firefox 3 nos muestra 12 resultados en la barra de direcciones, ya sea cuando realiza el autocompletado o cuando simplemente abrimos el menú de la barra de direcciones. Para cambiar el número de sugerencias, se puede hacer lo siguiente:

  • Escribir about:config en la barra de direcciones y pulsar Enter
  • Aceptar el mensaje de advertencia.
  • Buscar la clave de nombre browser.urlbar.maxRichResults y cambiar su valor por el que queramos.
  • Reiniciar el navegador para aplicar los cambios.

Mostrar siempre el botón de IR

En Firefox 3, en la barra de direcciones ya no se incluye el botón de IR cuando en la pestaña hay cargada una página. En cambio sí se muestra cuando abrimos una nueva pestaña vacía o editamos la barra de direcciones. Si extrañas el botón y quieres que siempre aparezca visible, lo puedes hacer volver de la siguiente manera:

  • Dentro de la carpeta de perfil de Firefox, hay una carpeta llamada chrome y dentro un archivo userChrome.css. Si este no se encuentra, renombramos el archivo userChrome-example.css a userChrome.css y lo abrimos para editar.
  • Al final del archivo, agregamos el siguiente código:

/* Mostrar el botón IR */
#urlbar[pageproxystate="valid"] > #urlbar-icons > #go-button
{ visibility: visible !important; }

  • Guardamos el archivo y reiniciamos Firefox.

Al reiniciar el navegador tendremos el botón siempre visible. Alternativamente podemos pulsar Enter en la barra de direcciones, que se comporta de la misma manera.

Ocultar el ícono de la estrella

Ahora en la barra de direcciones podemos saber si tenemos marcada una página o no, cuando se activa el ícono de la estrella que aparece a la derecha de la barra. Además es práctico para marcar una página o editar el marcador directamente. Si no queremos tener el ícono visible y preferimos marcar las páginas de la forma tradicional (menú Marcadores o pulsar Ctrl + D), podemos quitarlo de la siguiente forma:

  • Dentro de la carpeta de perfil de Firefox, buscamos dentro de la carpeta chrome, el archivo userChrome.css. Si este no se encuentra, renombramos el archivo userChrome-example.css a userChrome.css y lo abrimos para editar.
  • Al final del archivo, agregamos lo siguiente:

/* Ocultar el ícono de marcadores */
#star-button { width: 0px !important; }

  • Guardamos el archivo y reiniciamos Firefox.

Dar menos opacidad a los íconos de marcadores y RSS

En lugar de ocultar por completo el ícono de marcadores, podemos hacer otro cambio estético que consiste en que resalten menos los íconos de marcadores y de paso hacemos lo mismo con el de RSS. Para aplicar este cambio, editamos el userChrome.css de la siguiente forma:

  • Dentro de la carpeta de perfil de Firefox, buscamos dentro de la carpeta chrome, el archivo userChrome.css. Si este no se encuentra, renombramos el archivo userChrome-example.css a userChrome.css y lo abrimos para editar.
  • Al final del archivo, agregamos lo siguiente:

/* Ícono RSS */
#feed-button {-moz-opacity: 0.2 !important;}
#feed-button:hover {-moz-opacity: 1.5 !important;}
/* Ícono de marcadores */
#star-button {-moz-opacity: 0.2 !important;}

#star-button:hover {-moz-opacity: 1.5 !important;}

  • Guardamos el archivo y reiniciamos Firefox.

Cambiar el color de fondo cuando estamos en un sitio seguro

Si bien la nueva barra de direcciones ahora nos indica con el ícono a la izquierda, cuando nos encontramos en un sitio considerado seguro, la barra de direcciones mantiene el mismo color de fondo. Para aplicar un color de fondo como en la imágen anterior, editamos nuevamente el userChrome.css agregando lo siguiente al final:

/*Color de fondo cuando estamos en un sitio seguro*/
#urlbar[level] .autocomplete-textbox-container
{ background-color: #FFFFB7 !important; }

Guardamos el archivo y reiniciamos Firefox. Claro que se puede aplicar cualquier otro color.

Personalizar las fuentes y colores

Podemos personalizar el CSS o estilo de las fuentes y colores de los resultados de la barra de direcciones, de forma que se muestren diferente como en la imágen anterior. Para esto volvemos a editar el userChrome.css de la siguiente manera:

Al final del archivo, agregamos lo siguiente:

/* Fuentes y colores de la barra de direcciones */
/* Titulos */
.ac-comment {font-size: 100%! important; color: #111111 ! important; }
.ac-comment[selected="true"] { color: #FFFFFF !important; }

/* Enlaces */
.ac-url-text {font-size: 100% ! important; color: #336699 ! important; }
.ac-url-text[selected="true"] { color: #FFFFFF !important; }

Guardamos el archivo y reiniciamos Firefox.

Los colores y valores empleados son solo un ejemplo pero se pueden utilizar los que se quiera, incluso animarse más con el CSS.

Hacer que la barra de direcciones luzca como Firefox 2

Si no nos gusta como lucen las sugerencias en la barra de direcciones de Firefox 3 y nos gusta más como era en la versión anterior, podemos instalar la extensión Oldbar, que hará que los resultados se muestren como en la imágen. De esta forma los resultados ocupan menos espacio y sin ser exacto, se asemeja al viejo estilo.

Instalar la extensión Oldbar

Es importante mencionar que en este caso los cambios son solo visuales y no en la forma como se comporta la barra de direcciones.

No mostrar marcadores e historial en las sugerencias

A diferencia de como era antes, ahora en las sugerencias de la barra de direcciones aparecen también las páginas que hayamos marcado o visitado desde los marcadores. Si queremos que en el autocompletado nos muestre solamente las direcciones escritas en la barra, podemos hacer lo siguiente:

  • Escribir about:config en la barra de direcciones y pulsar Enter
  • Aceptar el mensaje de advertencia
  • Buscar la clave de nombre browser.urlbar.matchOnlyTyped y cambiar su valor a True.
  • Reiniciar el navegador para aplicar los cambios.

Volver a la barra de direcciones de Firefox 2

Combinando los dos pasos anteriores, lograremos que la barra luzca y se comporte de forma similar a la versión 2. Algo que muchos seguramente habrán pedido al ver la nueva barra.

Resultados de búsqueda en la barra de direcciones

Searchery es una extensión para Firefox 3 que permite mostrar resultados de búsqueda en la propia barra de direcciones. La extensión se puede configurar para que muestre resultados de Google y Amazón, o de los motores de búsqueda que tengamos instalados. De esta forma, al buscar un término, Firefox hace su búsqueda de sugerencias a la vez que la extensión busca en Internet, y los resultados se muestran combinados.

La extensión aún está en fase experimental, por lo que tendrás que iniciar sesión en Mozilla Addons para poder instalarla.

Instalar Searchery (requiere registro en Mozilla addons)

Ir automáticamente a la primer sugerencia de la barra

Al mostrarse las sugerencias en la barra de direcciones, normalmente tenemos que mover la flecha hacia abajo con el teclado o seleccionar el resultado con el mouse. Con la extensión Enter Selects, al pulsar Enter luego de la búsqueda en la barra de direcciones, nos llevará directamente al primer resultado de las sugerencias.

La extensión aún se encuentra en el área de pruebas de Mozilla addons por lo que hay que iniciar sesión para poder instalarla.

Instalar Enter Selects (requiere registro en Mozilla addons)

Mostrar sugerencias mientras corregimos una búsqueda

Normalmente los resultados de sugerencias de la barra de direcciones no se muestran hasta que se completa una búsqueda. Pero si nos equivocamos al escribir la búsqueda y por ejemplo hemos puesto "Mozzila" en lugar de "Mozilla", al corregir la palabra, no se muestran resultados hasta completar la palabra. Con la extensión Edit Middle, los resultados comienzan a mostrarse inmediatamente hayamos corregido la búsqueda.

Instalar Edit Middle 2

Conoces otro tip para la barra de direcciones? Puedes comentarlo a continuación.

44 comentarios

  1. FreddyFreddy
    23 de junio 2008

    Me pongo de pie y me quito el sombrero ante este post. Realmente útil, muy bueno.
    Saludos.

  2. Fede777 | GeekspotFede777 | Geekspot
    23 de junio 2008

    Increíble, completisimo, me sirvió todo.

    Excelente post!!! Ya lo mando a meneame, de seguro sale en portada.

  3. Fede777 | GeekspotFede777 | Geekspot
    23 de junio 2008

    Me olvidaba, dejo algunos tips mas para FF2 y FF3 en general.

    /* Remover menues
    * Id's for all toplevel menus:
    * file-menu, edit-menu, view-menu, history-menu, bookmarks-menu, tools-menu, helpMenu*/
    #edit-menu, #view-menu, #history-menu, #helpMenu { display: none !important; }

    /* Cambiar la opacidad de las pestañas inactivas */
    #content tab:not([selected="true"]) {
    -moz-opacity: 0.5 !important; }

    /* Combinar Parar y Recargar en un solo boton */
    #stop-button[disabled="true"] { display:none; }
    #stop-button:not([disabled]) + #reload-button { display:none; }

  4. Firefox 3 | Personalizar la barra de direccionesFirefox 3 | Personalizar la barra de direcciones
    23 de junio 2008

    [...] Firefox 3 | Personalizar la barra de direccioneswww.zonafirefox.net/2008/06/firefox-3-personalizar-la-barra-... por fede777 hace pocos segundos [...]

  5. Mara InsMaría Inés
    23 de junio 2008

    Buenísimo tu post!

    Quedé impresionada, el manejo es increible, pero lo que más me gustó... ¡Entendí todo!!! Jajaaja Sólo soy una simple usuaria, pero la forma de escribir y explicar es simple, clara y amena.
    Se agradece muchísimo

    Saludos

  6. Fede777 | GeekspotFede777 | Geekspot
    23 de junio 2008

    Hay uno de los trucos que no me sale del todo "Personalizar las fuentes y colores" como se hace para que sea gris el hover???

  7. NicoNico
    23 de junio 2008

    Gracias de verdad por esos comentarios :)

    Fede777: Gracias por el aporte y a ver si sumamos como para juntar para otro post ^^

    Sobre lo del fondo gris, creo que se debe a que utilizo un theme para Windows XP que lo deja de esa forma, pero no he logrado darle fondo gris con CSS. Si a lo anterior le agrego por ejemplo, un background-color:#a0a0a0, el fondo se aplica sobre el texto y no sobre toda la selección. Buscaré a ver si encuentro la forma.

  8. Fede777 | GeekspotFede777 | Geekspot
    23 de junio 2008

    Si yo tambien probe eso, y me paso lo mismo, lo pregunto porque al hacer hover el link azul con el hover azul no se ve nada :p

    Voy a seguir investigando.

  9. NicoNico
    23 de junio 2008

    Prueba lo siguiente:


    .autocomplete-richlistitem:hover{
    background-color: #202020 !important;
    color:#b0b0b0 !important;
    }

    Los colores puedes cambiarlos a gusto, no son los mejores, pero te quería responder rápido ^^

  10. NicoNico
    23 de junio 2008

    Aquí dejo un artículo anterior sobre el tema desde cuando estaba la beta 5, donde se puede ver el ejemplo del color de fondo en la selección de la barra de direcciones:

    http://www.zonafirefox.net/2008/04/firefox-3-primeros-ajustes-en-el-userchromecss.html

    Y tiene algunas otras personalizaciones.

  11. Fede777 | GeekspotFede777 | Geekspot
    23 de junio 2008

    So ya lo habia leido, me pongo a jugar un poco con las configuraciones y posteo la imagen :)

  12. Fede777 | GeekspotFede777 | Geekspot
    23 de junio 2008

    Ahi termine, les dejo la imagen, de paso la arme para que se vea mi config completa

    http://img165.imageshack.us/img165/3483/configob5.png

    Y por ultimo un tip mas (eliminar la pequeña flecha para elegir el tab en la barra de marcadores)

    /* Remove the Tab dropdown */
    .tabbrowser-arrowscrollbox + stack {
    display: none !important;
    }

    Maniatico yo? Si, por supuesto.

  13. fonzifonzi
    23 de junio 2008

    Si te digo que lo que menos me gustó del ff3 fue justamente esto...me matan no ?
    Encontré por ahí un addon para volver la barra = la de ff2 y ahora estoy mas contento !
    Saludos

  14. NicoNico
    23 de junio 2008

    Fonzi: no sos el único, en el foro de Mozilla Hispano varios han preguntado como volver a la vieja barra : p

    Seguramente se trata de la extensión Oldbar la que mencionas, comentada en el post.

  15. jackjack
    23 de junio 2008

    Estaria bien que en las opciones de Firefox dejaran elegir entre la barra de ff3 y la antigua. A mi la barra nueva me encanta, pero a algun amigo mio le está costando acostumbrarse.

  16. Fede777 | GeekspotFede777 | Geekspot
    23 de junio 2008

    Bueno ya casi lo tengo como quiero, pero tengo un ultimo pedido. Si bien el hover esta, el focus no.

    Ejemplo: si pasas y dejas el mouse sobre un ítem de la lista se ve con los colores del userChrome, pero si te manejas en la lista con las flechas del teclado se sigue viendo por default, solo el background.

    Alguna solucion? yo probe con autocomplete-richlistitem:focus pero no existe :p

  17. recargadorecargado
    24 de junio 2008

    grasias por este exelente aporte buey, te pasaste de bueno

  18. VoodooVoodoo
    24 de junio 2008

    Muy buena ayuda, justo lo que estaba buscando.

    Un apunte, en la parte de cómo dar menos opacidad a los íconos de marcadores y RSS se os ha quedado la última línea de código fuera del marco.

    /* Ícono RSS */
    #feed-button {-moz-opacity: 0.2 !important;}
    #feed-button:hover {-moz-opacity: 1.5 !important;}
    /* Ícono de marcadores */
    #star-button {-moz-opacity: 0.2 !important;}

    #star-button:hover {-moz-opacity: 1.5 !important;}

  19. VoodooVoodoo
    24 de junio 2008

    ¿Por qué se ha eliminado mi comentario?

  20. NicoNico
    24 de junio 2008

    Voodoo: el comentario había ido al spam, pero ya está publicado :)

    Gracias por avisar. Ciertamente faltaba esa línea.

    Saludos

  21. KaaMoSKaaMoS
    24 de junio 2008

    A la modificación e los colores del AwesomeBar se le puede agregar el siguiente comando:

    .ac-comment[selected="true"] {color: white !important; }

    De este modo al seleccionar uno de los resultados, las letras del título del marcador se volverán de color blanco (por alguna razón con los valores FFFFFF que ya estaban no funciona y permanecían en negro aún seleccionandolos).

  22. KaaMoSKaaMoS
    24 de junio 2008

    Me gustaría saber si hay un comando para modificar la cantidad de resultados que se despliegan en la AwesomeBar.

    Sé que el número de resultados predefinidos es 12 y que se puede modificar, pero a lo que me refiero es a la cantidad de resultados que se despliegan en la lista (el número de items visibles, por así decirlo)

    Este valor nunca dejan de ser 6, me gustaría saber qué comando debo usar para cambiarlo, mi idea es dejar los tamaños de letra más pequeños y aumentar ese valor 6 a 8 o 10.

    Gracias!!!

  23. NicoNico
    24 de junio 2008

    KaaMoS: Creo que la solución sería la siguiente:


    /* Ajusta la altura de la lista de autocompletar (en la barra de direcciones) */
    #PopupAutoCompleteRichResult {
    max-height: 140px !important;
    }

    Algo que se había comentado en el artículo anterior sobre ajustes del chrome de Fx3, pero lo olvidé mencionar en este último.

    Saludos, y espero te sirva

  24. LanzLanz
    25 de junio 2008

    Hola Nico excelente post; muy útil.

    En HispaMP3 han publicado un ajuste que pretende usar la nueva funcionalidad del Firefox 3 respecto a mejorar los colores de las imagenes. Copio y pego:

    Nos situaremos sobre la variable gfx.color_management.enabled, y cambiaremos su valor a true.
    Por último reiniciamos Firefox y a disfrutar del nuevo colorido de nuestras imágenes.

    ¿Sabrías por qué al hacer dicho ajuste, tanto el tema de Firefox como el fondo de todas las páginas se ve en mi PC de un color amarillo ?

    Gracias

  25. NicoNico
    25 de junio 2008

    Lanz: Gracias por tu comentario.

    Respecto de lo que dices, esa variable viene como bien dices desactivada por defecto. Lo que leí al respecto es que si el monitor no está bien calibrado o no utiliza un perfil de colores adecuado, los colores se pueden ver mal. Dejo el enlace a continuación:

    http://kb.mozillazine.org/Gfx.color_management.enabled

    Seguramente por algo de eso venga desactivado por defecto, tal vez hubiese sido mas general el problema si estuviese activado.

    Un saludo

  26. GusGus
    05 de julio 2008

    Al parecer esas modificaciones funciona solo con el temo default Yo tengo el tema iFOX que imita el iSafari pero al modificar el color de paginas seguras de la barra de direcciones el cambio solo aparece atras y la barra sigue con el color que tenia, pero al intentarlo en el tema default si funciona, no se si se pueda variar un tema custom como se hace con el default.

    Aparte de esto Firefox esta buenisimo.

  27. NicoNico
    07 de julio 2008

    Gus: seguramente algunas cosas no funcionen ya que el theme también aplica personalizaciones. Pero igualmente iFox Smooth está bárbaro ^^

    Los themes en realidad se pueden personalizar todos, basta con descomprimir el archivo .jar del theme y mirar al código y animarse a modificar.

  28. unrealunreal
    09 de julio 2008

    En firefox 2 cuando escribía palabras en la barra de direcciones automáticamente éste buscaba el mejor resultado en google y me cargaba la página automáticamente. Ahora me da un error al intentar cargar por ejemplo: microsoft cmo http://microsoft/
    Alquien sabe como hacer para que busque a la manera antigua?

  29. foXtensorfoXtensor
    09 de julio 2008

    Hola unreal,

    escribe about:config en la barra de direcciones. En la página que se abrirá verás, en la parte superior, una caja "Filtro". Ahí debes escribir la palabra "keyword" y verás que entre las claves que se muestran está una llamada "keyword.URL".

    Esa clave debe contener el siguiente valor:

    http://www.google.com/search?ie=UTF-8&oe=UTF-8&sourceid=navclient&gfns=1&q=

    Si no lo tiene, simplemente haz click derecho sobre ella, luego sobre "Modificar" e inserta lo que acabo de poner aquí.

  30. AOWS » Awesome BarAOWS » Awesome Bar
    24 de julio 2008

    [...] si no fuera suficiente, es bastante tuneable. Qué gran [...]

  31. Aalan WilderAalan Wilder
    23 de septiembre 2008

    Hola que tal!

    Yo quisiera saber si alguien por aqui no tiene la opcion de quitar unicamente los marcadores de la barra de direcciones.

    Aclaro q no quiero quitar todas las paginas q visito, unicamente deseo q mis marcadores NOO se vean en la barra del historial cuando le doy click en la flechita de lado derecho para bsucar alguna informacion...

    Saludos!!

  32. JosJosé
    12 de noviembre 2008

    Me gustaría saber si hay algún complemento para que se pueda ocultar automáticamente el panel de marcadores cuando lo tengo activo a la izquierda de la pantalla, gracias por la atención saludos cordiales.

  33. martinmartin
    18 de diciembre 2008

    Excelente ayuda!! muchas gracias .

  34. NicoNico
    20 de diciembre 2008

    Gracias por pasar, Martin ^^

  35. SirkanSirkan
    23 de diciembre 2008

    xD!
    Muchas pero muchas Gracias!!
    Te felicito!! xD
    ase tiempo q estaba buscando como quitar la sugerencia de marcadores y alfin se la podre quitar! xD

    Me has solucionado la Vida!

  36. NicoNico
    26 de diciembre 2008

    Gracias por tu comentario Sirkan ^^

  37. Aoliva. Informtica y ms… » Archivo dAoliva. Informática y más… » Archivo d
    02 de enero 2009

    [...] http://www.zonafirefox.net/2008/06/firefox-3-personalizar-la-barra-de-direcciones.html [...]

  38. El Laboratorio del Dr. Yuri » Blog Archive &El Laboratorio del Dr. Yuri » Blog Archive &
    09 de enero 2009

    [...] gran cantidad de entradas, con su barra vertical de desplazamiento. He encontrado, a través de una página de personalización de la barra, cómo dejarla al estilo antiguo. La receta [...]

  39. martinmartin
    05 de febrero 2009

    EY!! la actulaizacion de firefox me malogro la configuracion "Número de sugerencias de la barra de direcciones" y cada ves que lo cierro tod y habro d enuevo me sale la lista de paginas que visite ..como es ahora? gracias

  40. NicoNico
    05 de febrero 2009

    Has verificado que no se haya cambiado el valor que se menciona en al artículo?

  41. EL kalifaEL kalifa
    08 de abril 2009

    Buenisima ayuda la que se brinda Sres. tal vez alguien me puede ayudar, tengo unos marcadores que tienen un URL como este: "http://www.aduanet.gob.pe/servlet/Cgcola1?cadu=118&tipmail=T&fechoy=08/04/2009&opera=1&codoper=" al que tengo que actualizar la fecha cada día, mi rpegunta es si hay la posibilidad de que esa actualización se haga automaticamente como por ejemplo poniendo una variable de fecha en el marcador.

    Gracias de antemano.

  42. RAISAIMRAISAIM
    09 de febrero 2010

    Buenas Noches, Recien hoy comencé a usar Firefox.
    Instalé la versión 3 y tengo una pregunta, ya que veo que la mayoría son unos expertos!
    Tengo algunos problemillas con la vista y quisiera saber ¿Cómo puedo aumentar el alto de la barra de direcciones?

  43. abelabel
    11 de febrero 2011

    hola alguien me puede ayudar? no me aparace la barra de direccciones en el firefox y nose cmo ponerlo. si alguien sabe xfavor ayudarme

  44. GaryGary
    20 de octubre 2011

    Demasiado útil, felicito este post ;)

Embolsate para comentar