Accueil du site > Blog > Afficher les favicon dans la barre personnelle de Firefox sous Mac (...)

Afficher les favicon dans la barre personnelle de Firefox sous Mac OS

mardi 22 janvier 2008, par Nicolas Hoizey

Dans sa version Mac OS, Mozilla Firefox est configuré pour ne pas afficher l’icône personnalisée d’un site à côté d’un favori placé dans la barre personnelle.

Ce choix est incompréhensible, l’apport ergonomique de ces favicon [1] étant considérable pour identifier visuellement rapidement un favori.

Des favicon dans la barre personnelle de Firefox, même sous Mac

Heureusement, une solution technique mais relativement simple existe. La technologie XUL employée par Mozilla fait qu’il suffit d’éditer une feuille de styles CSS personnalisée pour changer la présentation de l’interface. Car l’icône est en fait bien présente, elle est juste masquée.

Voici donc le bout de code à ajouter à votre feuille de style personnalisée userChrome.css [2] qui se trouve dans ~/Library/Application Support/Firefox/Profiles/xxxxxxxx.default/chrome/ :

.bookmark-item > .toolbarbutton-icon {
  margin: 0px !important;
  padding : 0px 2px 0px 0px !important;
  width: 18px !important;
  height: 16px !important;
  display: inline !important;
}
.bookmark-item:hover > .toolbarbutton-icon {
  background: url("chrome://browser/skin/bookmark-hover-mid.png") repeat-x !important;
}
.bookmark-item:hover:active > .toolbarbutton-icon {
  background: url("chrome://browser/skin/bookmark-open-mid.png") repeat-x !important;
}

J’ai testé avec succès cette technique tant sur Firefox 2 que sur la toute dernière Firefox 3 beta 2.

Notes

[1Leur nom technique, le fichier s’appelant par défaut favicon.ico

[2A créer s’il n’existe pas déjà

Vos commentaires

Répondre à cet article

Qui êtes-vous ?

Pour afficher votre trombine avec votre message, enregistrez-la d'abord sur gravatar.com (gratuit et indolore) et n'oubliez pas d'indiquer votre adresse e-mail ici.

Ajoutez votre commentaire ici
  • Ce formulaire accepte les raccourcis SPIP [->url] {{gras}} {italique} <quote> <code> et le code HTML <q> <del> <ins>. Pour créer des paragraphes, laissez simplement des lignes vides.