Auteur Sujet:  Comment personnaliser Thunderbird  (Lu 270 fois)

0 Membres et 1 Invité sur ce sujet

Hors ligne Saturne42 AUTEUR

Comment personnaliser Thunderbird
« le: 06/03/22 à 13:49 »
Comment personnaliser (colorer) la barre d'outils courrier de Thunderbird avec userChrome.css en mode Fred ?

Merci par avance  C:-)
  
1 👍🏻
  
Cordialement

Hors ligne Coccinelle

  • Administrateur
  • *
  • Offre-moi un chocolat bien chaud
Re : Comment personnaliser Thunderbird
« Réponse #1 le: 06/03/22 à 14:45 »
Dernière modification : 02/04/22 à 14:29 par Coccinelle
Personnaliser les couleurs de Thunderbird



Personnaliser les couleurs de Thunderbird impose l'utilisation d'un simple fichier d'extension CSS (Feuille de Styles en Cascade), le même type de fichier utilisé pour formater une page web. Ce fichier CSS spécial et unique, au doux nom de userChrome.css, sera collé dans le dossier des données de Thunderbird, et son contenu viendra écraser les paramètres par défaut de Thunderbird ainsi que ceux utilisés par le thème en cours. Donc, prérequis : savoir manipuler le code CSS (mais je vais donner un fichier tout prêt).

Le « mode Fred »


Je pars du principe que vous savez comment paramétrer Thunderbird et naviguer dans ses menus.

✅ Activer le thème par défaut de Thunderbird :


✅ Pour connaître les identifiants des éléments dont on souhaite modifier formes et couleurs, le moyen le plus simple est de fouiller le web (par exemple sur ce site : Les visiteurs ne peuvent voir les liens. Enregistrez-vous ou connectez-vous ), mais ça reste très incomplet et rien ne vaut l'utilisation du mode développeur de Thunderbird (accès par SHIFT-CTRL-I) qui permet de trifouiller dans le code source HTML du programme. Mais là je déborde un peu du cadre de ce post. Par exemple pour connaître l'identifiant du bouton
Relever
, il faut se balader jusqu'au bloc HTML permettant d'afficher le bouton, et on note ainsi que l'identifiant du bouton est button-getmsg, identifiant que vous retrouverez dans le fichier CSS que je vous joins.


Mais comme je le disais, cette partie est plus complexe (bien qu'abordable si on veut y consacrer un peu de temps), je vous offre donc en pièce jointe un fichier CSS tout prêt et vous explique comment l'utiliser.

userChrome.css


Pour que Thunderbird prenne en compte les informations de formatage incluses dans ce fichier magique userChrome.css, voici la procédure :

1
Quitter Thunderbird.
2
Télécharger le fichier userChrome.css fourni en pièce jointe. C'est un simple fichier texte que vous pourrez modifier à volonté.
3
Demander à Thunderbird de prendre en compte ce fichier userChrome.css :

✅ Ouvrir l'éditeur de configuration (équivalent du about:config sur Firefox) en passant par les Préférences de Thunderbird / Onglet Général / Bouton tout en bas à droite de la page.
✅ Dans le champ de saisie, rechercher la clé toolkit.legacyUserProfileCustomizations.stylesheets et passer sa valeur à true en double cliquant sur le résultat de la recherche :


4
Sur votre ordinateur, copier le fichier userChrome.css préalablement téléchargé dans le dossier C:\Users\<nom utilisateur>\AppData\Roaming\Thunderbird\Profiles\<nom du profil Thunderbird>\chrome. Le nom du profil utilisateur ressemble à un nom de dossier genre wjin6l8l.default-release. Pour aller plus vite, vous pouvez directement taper depuis une console la commande suivante afin d'ouvrir le dossier des profiles Thunderbird :

Code: Les visiteurs ne peuvent voir les liens. Enregistrez-vous ou connectez-vous
explorer %appdata%\Thunderbird\Profiles
4
Relancer Thunderbird.

Voilà, c'est tout. Maintenant, si vous savez comment fonctionne le CSS, n'hésitez pas à fouiller.

Contenu du fichier userChrome.css

Code: Les visiteurs ne peuvent voir les liens. Enregistrez-vous ou connectez-vous
/*
PERSONNALISATION DE L'INTERFACE DE THUNDERBIRD
https://j2m-06.pagesperso-orange.fr/faq_tb_userchrome2.html

Copier userChrome.css dans C:\Users\<nom utilisateur>\AppData\Roaming\Thunderbird\Profiles\<nom du profile Thunderbird>\chrome\
Dans l'éditeur de configuration de Thunderbird, définir sur TRUE la clé : toolkit.legacyUserProfileCustomizations.stylesheets
 */
 
/* Onglet non sélectionné */
#tabs-toolbar .tabmail-tab:not([selected=true]) {
background:#1970F1 !important;
color:#96BEF9 !important;
margin:0 4px 0 4px !important;
min-width:256px !important;
}

/* Onglet sélectionné */
#tabs-toolbar .tabmail-tab:is([selected=true]) {
margin:0 4px 0 4px !important;
min-width:256px !important;
}

/* Marge autour de la liste des message */
#threadTree {
/* -moz-appearance:none !important; */
padding:12px !important;
}
 
/* Lignes impaires colorées */
#threadTree treechildren::-moz-tree-row(even) {
/* -moz-appearance:none !important; */
background: #F0F0F0 !important;
}

#threadTree treechildren::-moz-tree-row(hover) {
background:#CDE8FF !important;
}

#threadTree treechildren::-moz-tree-row(selected) {
background: #CDE8FF !important;
border-bottom:1px solid #1970F1 !important;
border-top:1px solid #1970F1 !important;
}

/* Police du panneau de navigation */
#folderTree treechildren::-moz-tree-cell-text {
font-family:Segoe UI !important;
font-size:16px !important;
}

/* Espacement du panneau de navigation */
#folderTree > treechildren::-moz-tree-row {
height:24px !important;
min-height:0px !important;
}

/* Couleur de fond du panneau de navigation */
#folderTree   {
background-color:#EFF8FF !important;
}

/* Mettre en couleur la ligne des messages non lus dans la liste des messages */
#threadTree treechildren::-moz-tree-cell-text(unread) {
color:#FF5050  !important;
}

/* Couleur du nom des dossiers contenant des nouveaux messages */
#folderPaneBox treechildren::-moz-tree-cell-text(folderNameCol,newMessages-true) {
color: #FF5050 !important;
}

/* Couleur du nom des dossiers contenant des messages non lus (même couleur que nouveaux messages)*/
#folderPaneBox treechildren::-moz-tree-cell-text(hasUnreadMessages-true) {
color: #FF5050 !important;
}

/* Arrière-plan de l'entête des messages */
#msgHeaderView {
background-color:#CDE8FF !important;
}

/* Modifier la police et couleur Arrière-plan de Sujet (message reçu) */
#expandedsubjectBox {
font-size:5.0mm !important;
font-weight:bold !important;
color:white !important;
background-color:#1970F1 !important;
border-radius:6px !important;
padding:0 6px 0 6px!important;
}

/* Arrière-plan de la barre d'icône (sauf Écrire) */
#mail-bar3{
background-color:#CDE8FF !important;
}
/* [label="Écrire"] { */
/* color:yellow !important; */
/* background-color:red !important; */
/* }  */

/* Couleur du bouton Relever */
#button-getmsg {
color:black !important;
background-color:#C6E6AA !important;
border-radius:6px !important;
border:1px solid #888888 !important;
padding:6px !important;
 }

/* Couleur du bouton Écrire */
#button-newmsg {
/* color:yellow !important; */
background-color:#FFEA80 !important;
border-radius:6px !important;
border:1px solid #888888 !important;
padding:6px !important;
}

/* Couleur du bouton Répondre */
#button-reply {
color:black !important;
background-color:#9DCCFB !important;
border-radius:6px !important;
border:1px solid #888888 !important;
padding:6px !important;
 }

/* Couleur du bouton Transférer */
#button-forward {
color:black !important;
background-color:#F1C9FF !important;
border-radius:6px !important;
border:1px solid #888888 !important;
padding:6px !important;
}

/* Couleur du bouton Supprimer */
#button-delete {
color:black !important;
background-color:#FFC9C4 !important;
border-radius:6px !important;
border:1px solid #888888 !important;
/* Le bouton Supprimer est un peu plus gros que les autres, il faut réduire la marge supplémentaire : */
margin:3px !important;
 }

/* Couleur du bouton Imprimer */
#button-print {
color:black !important;
background-color:#E7E7E7 !important;
border-radius:6px !important;
border:1px solid #888888 !important;
padding:6px !important;
 }

/* Couleur du bouton Imprimer NG */
#ptng-button {
color:black !important;
background-color:#D3D3D3 !important;
border-radius:6px !important;
border:1px solid #888888 !important;
padding:6px !important;
 }

/* Couleur du bouton Filtre Rapide */
#qfb-show-filter-bar {
color:black !important;
background-color:white !important;
border-radius:6px !important;
border:1px solid #888888 !important;
padding:6px !important;
}
 
/* Couleur du bouton Messagerie instantanée */
#button-chat {
border-radius:6px !important;
border:1px solid #888888 !important;
padding:6px !important;
}

/* Couleur du bouton Adresses */
#button-address {
border-radius:6px !important;
border:1px solid #888888 !important;
padding:6px !important;
}

/* Couleur du bouton Menu (le sandwich) */
#button-appmenu {
color:white !important;
background-color:#1970F1 !important;
border-radius:6px !important;
border:1px solid #888888 !important;
padding:6px !important;
}

/* Largeur des splitters */
#folderpane_splitter, #threadpane-splitter {
width:12px !important;
height:12px !important;
background:#1970F1 !important;
}





  
1 👍🏻
  
Une communauté sympa sans réseau social, avec juste une :bulletminicoc: aux commandes ? Si, c'est possible ! :D

Hors ligne Saturne42 AUTEUR

Re : Comment personnaliser Thunderbird
« Réponse #2 le: 06/03/22 à 15:31 »
Merci Fred pour ce travail d'artiste ...

Dans mon profile j'ai une ribambelle de dossiers et ne sais dans lequel copier/coller le fichier userChrome.css que j'ai téléchargé
Faut-il également créer un dossier Chrome dans ce profil car et sauf erreur de a part il n'y est pas ?
Les visiteurs ne peuvent voir les liens. Enregistrez-vous ou connectez-vous
Merci pour ta bonté ... C:-)
  
  

Hors ligne Coccinelle

  • Administrateur
  • *
  • Offre-moi un chocolat bien chaud
Re : Comment personnaliser Thunderbird
« Réponse #3 le: 06/03/22 à 15:37 »
Les visiteurs ne peuvent voir les liens. Enregistrez-vous ou connectez-vous
Dans mon profile j'ai une ribambelle de dossiers

Tu connaîtras le bon dossier en suivant cette procédure :

  
1 👍🏻
  

Hors ligne Saturne42 AUTEUR

Re : Comment personnaliser Thunderbird
« Réponse #4 le: 06/03/22 à 15:54 »
Dernière modification : 06/03/22 à 16:18 par Saturne42
Merci beaucoup Fred..... je ne collais pas le fichier au bon endroit

Les visiteurs ne peuvent voir les liens. Enregistrez-vous ou connectez-vous

tout est illuminé ► Noel avant l'heure... C:-)
  
1 👍🏻
  

Hors ligne Coccinelle

  • Administrateur
  • *
  • Offre-moi un chocolat bien chaud
Re : Comment personnaliser Thunderbird
« Réponse #5 le: 06/03/22 à 17:30 »
Dernière modification : 06/03/22 à 17:32 par Coccinelle
Tu peux aussi rajouter ça dans le fichier CSS histoire d'adapter les onglets au look général :

Code: Les visiteurs ne peuvent voir les liens. Enregistrez-vous ou connectez-vous
/* Onglet non sélectionné */
#tabs-toolbar .tabmail-tab:not([selected=true]) {
background:#1970F1 !important;
color:#96BEF9 !important;
margin:0 4px 0 4px !important;
min-width:256px !important;
}

/* Onglet sélectionné */
#tabs-toolbar .tabmail-tab:is([selected=true]) {
margin:0 4px 0 4px !important;
min-width:256px !important;
}
  
1 👍🏻
  

Hors ligne Saturne42 AUTEUR

Re : Comment personnaliser Thunderbird
« Réponse #6 le: 06/03/22 à 18:58 »
C'est fait ► Merci Fred  C:-)
  
1 👍🏻
  

Hors ligne Coccinelle

  • Administrateur
  • *
  • Offre-moi un chocolat bien chaud
Re : Comment personnaliser Thunderbird
« Réponse #7 le: 07/03/22 à 19:47 »
Encore une petite modif pour aérer l'arborescence des dossiers :

Remplacer :
Code: Les visiteurs ne peuvent voir les liens. Enregistrez-vous ou connectez-vous
/* Police du panneau de navigation */
#folderTree treechildren::-moz-tree-cell-text {
font-size:16px !important;
}
par :

Code: Les visiteurs ne peuvent voir les liens. Enregistrez-vous ou connectez-vous
/* Police du panneau de navigation */
#folderTree treechildren::-moz-tree-cell-text {
font-family:Segoe UI !important;
font-size:16px !important;
}

En fait il y a juste la ligne font-family:Segoe UI !important; à rajouter dans le bloc.
  
1 👍🏻
  

Hors ligne Saturne42 AUTEUR

Re : Comment personnaliser Thunderbird
« Réponse #8 le: 02/04/22 à 14:19 »
@Fred....bonjour

J'ai une petite question concernant la personnalisation de Thunderbird.
Comment modifier la couleur du texte d'un message reçu ?
Le libellé est nickel mais l'entête est "invisible" car de couleur Blanche sur fond bleu
Il doit y avoir une petite modif à faire je suppose mais où ?
Les visiteurs ne peuvent voir les liens. Enregistrez-vous ou connectez-vous

Merci

  
  

Hors ligne Coccinelle

  • Administrateur
  • *
  • Offre-moi un chocolat bien chaud
Re : Comment personnaliser Thunderbird
« Réponse #9 le: 02/04/22 à 14:28 »
Les visiteurs ne peuvent voir les liens. Enregistrez-vous ou connectez-vous
Comment modifier la couleur du texte d'un message reçu ?
Le libellé est nickel mais l'entête est "invisible" car de couleur Blanche sur fond bleu
Il doit y avoir une petite modif à faire je suppose mais où ?
Si tu as choisi le Thème du système pour Thunderbird, et utilisé le petit fichier css sus-détaillé, dans ce cas tu n'as rien à faire : le texte de la ligne sélectionnée est noir, avec le fond bleu. Donc vérifie ton thème pour voir...
  
1 👍🏻
  

Hors ligne Saturne42 AUTEUR

Re : Comment personnaliser Thunderbird
« Réponse #10 le: 02/04/22 à 14:37 »
Merci Fred....

Si je mets le thème système; la partie gauche est totalement invisible...
J'ai le thème ANIMATED KITTY  CAT (le chat) et c'est parfait ...sauf l'entête du message reçu lorsqu'on clique dessus pour le lire ► il devient blanc ...
J'ai oublié de te dire qu'hier j'ai installé la version beta 99.0b2 .....je vais la désinstaller afin de vérifier si ok ou non car je ne me souviens plus comment c'était avant ..
A+
  
  

Hors ligne Coccinelle

  • Administrateur
  • *
  • Offre-moi un chocolat bien chaud
Re : Comment personnaliser Thunderbird
« Réponse #11 le: 02/04/22 à 14:44 »
Les visiteurs ne peuvent voir les liens. Enregistrez-vous ou connectez-vous
j'ai installé la version beta 99.0b2
J'utilise la version 91.7.0 64 bits, la dernière officielle en date.
  
  

Hors ligne Saturne42 AUTEUR

Re : Comment personnaliser Thunderbird
« Réponse #12 le: 02/04/22 à 15:15 »
C'était bien ça Fred ...tout est redevenu ok après la réinstallation de la dernière version en cours..
La beta 99.0b2 est pas mal car elle affiche une barre de menu à gauche (mail-Adresse-Agenda .....) et change la police des adresses mails et sous dossiers...par contre seul le petit défaut signalé plus haut vient perturber la fête ..
Je pense que c'est modifiable ...et je vais attendre que tout soit ok
Merci à toi
Slts
  
1 👍🏻
  

Hors ligne Coccinelle

  • Administrateur
  • *
  • Offre-moi un chocolat bien chaud
Re : Comment personnaliser Thunderbird
« Réponse #13 le: 02/04/22 à 15:20 »
Dernière modification : 02/04/22 à 15:25 par Coccinelle
Les visiteurs ne peuvent voir les liens. Enregistrez-vous ou connectez-vous
seul le petit défaut signalé plus haut vient perturber la fête ..
Je pense que c'est modifiable ...et je vais attendre que tout soit ok
Oui tout à fait, ensuite faudra repérer où se situe le changement. Mais je n'essaierai pas la version beta, pour les trucs sensibles comme les mails je préfère tourner avec la dernière version stable.
  
1 👍🏻
  

Hors ligne Saturne42 AUTEUR

Re : Comment personnaliser Thunderbird
« Réponse #14 le: 02/04/22 à 15:27 »
Tu n'as pas tort ...je voulais simplement essayer cette beta que j'ai vu Les visiteurs ne peuvent voir les liens. Enregistrez-vous ou connectez-vous
Re ..merci
  
  

Hors ligne Coccinelle

  • Administrateur
  • *
  • Offre-moi un chocolat bien chaud
Re : Comment personnaliser Thunderbird
« Réponse #15 le: 02/04/22 à 15:30 »
Les visiteurs ne peuvent voir les liens. Enregistrez-vous ou connectez-vous
Tu n'as pas tort ...je voulais simplement essayer cette beta que j'ai vu Les visiteurs ne peuvent voir les liens. Enregistrez-vous ou connectez-vous
Re ..merci
Ouaip les prochaines mises à jour semblent vraiment intéressantes.
  
2 👍🏻
  

 

Merci pour ton soutien
Le point de ralliement en cas de souci de connexion