Bonjour à tous,
Aujourd'hui, je vais vous présenter une manière de personnaliser son interface de Firefox 12 afin de la rendre "light" mais très fonctionnelle ouce1-1a0b:
L'un des éléments qui m'embêtait le plus était la barre personnelle. J'aime avoir des dossiers dans ma barre personnelle, mais je n'aime pas cette barre. Aussi, j'ai trouvé un moyen de transférer ces menus... à droite des onglets, sous forme d'icônes uniques !
Prêts pour le tuto ? C'est parti !
Étape 1 - Réorganiser l'interface
Si ce n'est déjà fait, déplacez la barre des onglets au-dessous de la barre d'adresse. Ce n'est pas obligatoire, mais personnellement je préfère :sourire116-287e:
Pour cela, cliquez droit sur votre barre d'onglets, puis décochez la case "Barre des onglets au-dessus".
Ensuite, il faut placer le contenu de la barre personnelle à droite des onglets. Pour cela, cliquez droit sur la barre des onglets, puis sélectionnez "Personnaliser". Déplacez ensuite le contenu de la barre personnelle à droite des onglets, derrière le "+", comme indiqué sur la capture d'écran :
Ensuite, on masque la barre personnelle désormais vide en cliquant droit dans l'interface, puis en décochant la case associée.
Étape 2 - Déplacer le menu
Pour cela, j'utilise l'extension "Movable Firefox Button" que l'on peut trouver ici : https://addons.mozilla.org/fr/firefox/addon/movable-firefox-button/
De la même manière que précédemment, je déplace le nouveau bouton de menu à gauche des boutons de navigation.
Étape 3 - Paramétrer la barre personnelle
Bien ! Maintenant, on va aligner la barre personnelle à droite et n'afficher que les icônes. Pour cela, j'utilise l'extension "Smartest Bookmarks Bar" que je paramètre ainsi :
Étape 4 - Changer les icônes de la barre personnelle
Pour ce faire, il vous faut des icônes d'une taille de 16x16 ou 24x24, en PNG de préférence. Personnellement, j'ai utilisé ces trois là :
Placez-les dans un dossier où vous pourrez les retrouver. Personnellement, je les ai mis dans ~/.mozilla/firefox/icons/.
Ensuite il vous faut modifier le fichier userChrome.css. Il se trouve :
Sous Windows XP, dans C:\Documents and Settings\< Votre nom >\Application Data\Mozilla\Firefox\Profiles\xxxxx.yyyyy\chrome
Sous Windows Vista/Seven, dans C:\Users\< Votre nom >\AppData\Roaming\Mozilla\Firefox\Profiles\xxxxx.yyyyy\chrome
Sous GNU/Linux, dans ~/.mozilla/firefox/xxxxx.yyyyy/chrome
Sous MacOS, dans ~/Library/Application Support/Firefox/Profiles/xxxxx.yyyyy/chrome
Note : Si le dossier chrome et/ou le fichier userChrome.css n'existent pas, créez-les.
Dans le fichier userChrome.css, ajoutez ceci :
Créez autant de blocs de code de type "#personal-bookmarks .bookmark-item[container][label="Online"] {" que nécessaire, en changeant le "label" par le nom exact du dossier de la barre personnelle dont l'icône est à modifier. A l'intérieur de ces blocs, changez également "list-style-image:url('file:///home/paul/.mozilla/firefox/icons/shogi_icon.png') !important;" pour indiquer l'emplacement de l'image souhaitée (Ne pas oublier de faire commencer l'URL par "file:///", par exemple, "file:///C:\Users\...").
Sauvegardez le fichier, redémarrez Firefox et...
Étape 5 - C'est terminé !
« Ça mon gars, ça envoie du boudin ! »
Je sais je sais :icon17-36f7:
Si vous avez des questions, des commentaires, n'hésitez surtout pas ouce1-1a0b:
Aujourd'hui, je vais vous présenter une manière de personnaliser son interface de Firefox 12 afin de la rendre "light" mais très fonctionnelle ouce1-1a0b:
L'un des éléments qui m'embêtait le plus était la barre personnelle. J'aime avoir des dossiers dans ma barre personnelle, mais je n'aime pas cette barre. Aussi, j'ai trouvé un moyen de transférer ces menus... à droite des onglets, sous forme d'icônes uniques !
Avant :
Après :
Après :
Prêts pour le tuto ? C'est parti !
Étape 1 - Réorganiser l'interface
Si ce n'est déjà fait, déplacez la barre des onglets au-dessous de la barre d'adresse. Ce n'est pas obligatoire, mais personnellement je préfère :sourire116-287e:
Pour cela, cliquez droit sur votre barre d'onglets, puis décochez la case "Barre des onglets au-dessus".
Ensuite, il faut placer le contenu de la barre personnelle à droite des onglets. Pour cela, cliquez droit sur la barre des onglets, puis sélectionnez "Personnaliser". Déplacez ensuite le contenu de la barre personnelle à droite des onglets, derrière le "+", comme indiqué sur la capture d'écran :
Ensuite, on masque la barre personnelle désormais vide en cliquant droit dans l'interface, puis en décochant la case associée.
Étape 2 - Déplacer le menu
Pour cela, j'utilise l'extension "Movable Firefox Button" que l'on peut trouver ici : https://addons.mozilla.org/fr/firefox/addon/movable-firefox-button/
De la même manière que précédemment, je déplace le nouveau bouton de menu à gauche des boutons de navigation.
Étape 3 - Paramétrer la barre personnelle
Bien ! Maintenant, on va aligner la barre personnelle à droite et n'afficher que les icônes. Pour cela, j'utilise l'extension "Smartest Bookmarks Bar" que je paramètre ainsi :
Étape 4 - Changer les icônes de la barre personnelle
Pour ce faire, il vous faut des icônes d'une taille de 16x16 ou 24x24, en PNG de préférence. Personnellement, j'ai utilisé ces trois là :
Placez-les dans un dossier où vous pourrez les retrouver. Personnellement, je les ai mis dans ~/.mozilla/firefox/icons/.
Ensuite il vous faut modifier le fichier userChrome.css. Il se trouve :
Sous Windows XP, dans C:\Documents and Settings\< Votre nom >\Application Data\Mozilla\Firefox\Profiles\xxxxx.yyyyy\chrome
Sous Windows Vista/Seven, dans C:\Users\< Votre nom >\AppData\Roaming\Mozilla\Firefox\Profiles\xxxxx.yyyyy\chrome
Sous GNU/Linux, dans ~/.mozilla/firefox/xxxxx.yyyyy/chrome
Sous MacOS, dans ~/Library/Application Support/Firefox/Profiles/xxxxx.yyyyy/chrome
Note : Si le dossier chrome et/ou le fichier userChrome.css n'existent pas, créez-les.
Dans le fichier userChrome.css, ajoutez ceci :
Code:
/*
* Do not remove the @namespace line -- it's required for correct functioning
*/
@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); /* set default namespace to XUL */
#personal-bookmarks .bookmark-item[container][label="Online"] {
list-style-image:url('file:///home/paul/.mozilla/firefox/icons/online_icon.png') !important;
-moz-image-region:auto !important;
}
#personal-bookmarks .bookmark-item[container][label="Mangas"] {
list-style-image:url('file:///home/paul/.mozilla/firefox/icons/mangas_icon.png') !important;
-moz-image-region:auto !important;
}
#personal-bookmarks .bookmark-item[container][label="Shogi"] {
list-style-image:url('file:///home/paul/.mozilla/firefox/icons/shogi_icon.png') !important;
-moz-image-region:auto !important;
}
#personal-bookmarks toolbarbutton.bookmark-item[container] > .toolbarbutton-text {
display:none !important;
}
Créez autant de blocs de code de type "#personal-bookmarks .bookmark-item[container][label="Online"] {" que nécessaire, en changeant le "label" par le nom exact du dossier de la barre personnelle dont l'icône est à modifier. A l'intérieur de ces blocs, changez également "list-style-image:url('file:///home/paul/.mozilla/firefox/icons/shogi_icon.png') !important;" pour indiquer l'emplacement de l'image souhaitée (Ne pas oublier de faire commencer l'URL par "file:///", par exemple, "file:///C:\Users\...").
Sauvegardez le fichier, redémarrez Firefox et...
Étape 5 - C'est terminé !
« Ça mon gars, ça envoie du boudin ! »
Je sais je sais :icon17-36f7:
Si vous avez des questions, des commentaires, n'hésitez surtout pas ouce1-1a0b:
Dernière édition: