Statut
La discussion n'est pas ouverte à d'autres réponses

NEO III

OCPC Membre Premium
GOLD Team Member - VIP
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 :pouce1-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 :
attachment.php



Après :
attachment.php


attachment.php




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".
attachment.php




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 :
attachment.php


attachment.php



Ensuite, on masque la barre personnelle désormais vide en cliquant droit dans l'interface, puis en décochant la case associée.
attachment.php

É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.
attachment.php

É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 :
attachment.php

É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à :

attachment.php
attachment.php
attachment.php



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 :
attachment.php
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é !

attachment.php


attachment.php

« Ç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 :pouce1-1a0b:
 
Dernière édition:
Merci pour le TUTO :hat-1194:

Je ferais un test dans la journée.
 
Salut Neo :)

Merci pour se jolie tuto à 9h03 du mat.
:pouce1-1a0b:

PS : Google Chrome c'est le mal :)

PS : Firefox c'est le bien :)
 
Dernière modification par un modérateur:
Petit complément :

Pour supprimer les croix de fermeture d'onglets, qui sont tout sauf utiles, il faut aller dans about:config, cliquer sur "Je ferai attention, promis !" et rechercher la clé browser.tabs.closeButtons et mettre sa valeur à 2.

Et là, plus de croix inutiles dans les onglets !
attachment.php

 
Statut
La discussion n'est pas ouverte à d'autres réponses
Retour
Haut