EasyPC - Tag - fichier CSSBienvenue sur mon blog.
Je commencé l'informatique en 1986 avec le DOS 3.1 et le MS-DOS, bien que j'ai fait une longue pose, j'ai repris en 2001 et depuis je n'en suis plus sortie avec l'envie de constamment comprendre et en apprendre toujours plus.
En tan qu'autodidacte, je trouvais que beaucoup de sites qui proposaient des articles sur l’informatique, n’étaient pas suffisamment abordables pour les utilisateurs débutants, sans compter les nombreux articles qui n’existent qu’en Anglais, une complication supplémentaire pour les non Anglophone, même si il existe des traducteurs en ligne.
Vous y trouverez, des conseils, des astuces, des tutoriels, des recommandations, pour vous facilité l'utilisation de votre PC au quotidien.
Que ce soit pour le montage d'un ordinateur, l'installation d'un système d'exploitation, le paramétrage, la sécurisation, les réglages, l'optimisation, le diagnostic et le dépannage.
Et puis vous aurez aussi quelques points de vues personnels lié principalement à l'informatique
Je ne prétends pas tout connaître, loin delà, mais tout ce que vous pourrez trouver ici, sont les résultats de mes retours d'expériences, de mes tests et surtout d'une grande volonté d'apprendre et de comprendre l'informatique.
Les différents articles sont largement détaillés pour qu'ils soient accessibles aux novices.
Je vous souhaite une bonne lecture.
Cordialement - Wullfk2024-03-28T00:15:23+01:00Wullfkurn:md5:64860866e2038173c65f155027e4aee4DotclearAstuces de personnalisation de Firefox Quantum (hors extensions)urn:md5:591932ee8db6fa5957031f09e1ab14252017-11-19T05:30:00+01:00WullfkNavigateurabout configfichier CSS<p>Bon nombre d'utilisateurs de Firefox Quantum (57.0) regrettent fortement les extensions comme <strong><a href="https://addons.mozilla.org/fr/firefox/addon/tab-mix-plus/?src=ss" hreflang="fr">Tab Mix Plus</a></strong> (Gestion des onglets) et <a href="https://addons.mozilla.org/fr/firefox/addon/classicthemerestorer/?src=ss" hreflang="en"><strong>Classic Theme Restorer</strong></a> (multi paramétrages de Firefox)</p>
<p>Malheureusement le développeur de <strong>Classic Theme Restorer</strong> ne prévoit aucun passage en <strong>WebExtension</strong>, du principalement à l'impossibilité de concilier toutes les fonctionnalités avec ce nouveau
format plus restrictif, d'autres développeurs refusent tout simplement
de ce plier à ce nouveau format.</p> <p>Pour <strong>Tab Mix Plus</strong> il y a un espoir de voir arriver ce module en <strong>WebExtension</strong>.</p>
<p>Traduction de l'<a href="http://tabmixplus.org/support/troubleshooting/data/legacy-tabmix.html"><span style="color:#0000ff;">information communiquée par le développeur</span></a>:</p>
<blockquote><p>"<em>Je travaille actuellement sur la conversion de la base de code Tab Mix Plus au nouveau format webExtension.<br />La base de code de tabulation contient plus de 35 000 lignes de code dans 139 fichiers.<br /><br />Il
est actuellement difficile de savoir quand Tab Mix Plus en tant que
WebExtension sera prêt, il ne sera pas prêt avant la sortie officielle
de Firefox 57. Je ne suis pas sûr non plus qu'il sera possible
d'implémenter toutes les fonctions de mixage d'onglets dans le nouveau
format.<br /><br />Toute personne qui souhaite contribuer au code ou aider
d'une autre manière peut me contacter directement via
tabmix.onemen@gmail.com.</em>"</p>
</blockquote><p>Force est de constater, qu'à défaut d'extensions équivalentes, il faut sans remettre à des astuces peu orthodoxes.</p>
<p>Il faut pour ainsi dire <ins>mettre les mains dans le moteur</ins>, et <ins>insérer du code CSS</ins> dans le profil de Firefox.</p>
<p>Certes ça ne vaut pas ce que faisaient les extensions précédemment cités, mais c'est toujours mieux que rien.</p>
<p><ins>Voici quelques astuces que j'ai adaptées puis appliquées ou simplement testées</ins> <span style="color:#ff0000;">(<em>je notifie les codes que je n'ai pas testé). </em></span></p>
<p><strong><span style="background-color:#ffff00;">Pour
éviter tout ambiguïté, je n'ai pas créé les codes CSS fournis, c'est le
résultat de multiples recherches et recoupements sur la toile.</span></strong></p>
<ins><strong>Index:</strong></ins><ol><li>Résoudre certains problèmes de lenteur de Firefox 57 (<em>about:config</em>)</li>
<li>Mettre les onglets sous la barre d'adresse avec barre personnelle au dessus des onglets</li>
<li>Modifier l'emplacement de la barre personnelle</li>
<li>Modifier Couleur de fond de la barre personnelle et de la barre d'onglets</li>
<li>Ouvrir les marques-page dans un nouvel onglet (<em>about:config</em>)</li>
<li>Prévisualisation/Aperçu des onglets (<em>about:config</em>)</li>
<li>Ouvrir les onglets à la suite de l'onglet actif ou en dernier (<em>about:config</em>)</li>
<li>Ouvrir un lien de la barre de recherche dans un nouvel onglet (<em>about:config</em>)</li>
<li>Ne pas fermer Firefox à la fermeture du dernier onglet (<em>about:config</em>)</li>
<li>Personnalisation des onglets actifs et inactifs</li>
<li>Modifier couleur et style police de l'onglet actif en utilisant le code Hexadécimale</li>
<li>Modifier couleur, style et police des onglets lus et non lus</li>
<li>Les coins des onglets arrondi comme sur Firefox 56.0.2</li>
<li>Supprimer l'onglet lorsqu'une seule page est ouverte</li>
<li>Modifier la taille de la police des onglets</li>
<li>Modifier la taille des onglets</li>
<li>Passer le trait de l'onglet actif en dessous de l'onglet</li>
<li>Supprimer la barre sur l'onglet actif</li>
<li>Ajouter un bouton à l'extrémité droite de la barre d'onglets pour permettre de voir la liste des onglets ouverts</li>
<li>La barre d'onglets sur plusieurs lignes avec onglets à largeur fixe</li>
<li>Masquer le texte des favicon de la barre personnelle</li>
<li>Afficher le texte des favicon de la Barre Personnelle au survol de la souris</li>
<li>Réduire ou supprimer les marges de la barre personnelle</li>
<li>Modifier la taille de la police de la barre personnelle</li>
<li>Changer la couleur des dossiers de la barre personnelle</li>
<li>Icônes différentes pour chaque dossier dans la barre personnelle</li>
<li>Modifier taille des favicon de la barre personnelle</li>
<li>Modifier l'espace entre les favicon de la barre personnelle</li>
<li>Mettre la Barre Personnelle sur plusieurs lignes</li>
<li>Modifier la couleur de fond ou la croix du bouton nouvel onglet</li>
<li>Modifier la largeur et la couleur de la barre d'adresses</li>
<li>Modifier la largeur de la barre de recherche</li>
<li>Changer la couleur du texte et du fond de la sélection dans la barre URL</li>
</ol>
<p><em>Liste non exhaustive, elle sera compléter au fur et à mesure des astuces trouvées et si possible testées.</em></p>
<p><a href="http://easy.pc.blog.free.fr/index.php?post/Visualiser-en-direct-les-changements-effectu%C3%A9s-dans-le-fichier-userChrome.css-de-Firefox-57">Visualiser en direct les changements effectués dans le fichier <em>userChrome.css</em> de Firefox 57</a></p>
<p>*************************************************************************************</p>
<h4><ins><strong>1 - Résoudre certains problèmes de lenteur de Firefox 57</strong></ins></h4>
<p>Certains
utilisateurs se plaignent d'une lenteur excessive de Firefox dans
l'affichage et/ou le rechargement des onglets, voir même un blocage du
navigateur, phénomène amplifié quand plusieurs onglets sont ouverts. On
peut en partie y remédier en appliquant ce qui suit:<br /> <br />Bouton menu >> "<em>Options</em>" >> "<em>Vie privée et sécurité</em>". Dans la section "<em>Permissions</em>", cocher "<em>Empêcher les services d’accessibilité d’avoir accès à votre navigateur</em>" et relancer Firefox.<br /> <br />Ou en passant par <strong>about:config</strong><br /><br />Modifier<span style="color:#0000ff;"><strong> accessibility.force_disabled</strong></span> >> mettre la valeur à <span style="color:#0000ff;"><strong>false</strong></span> (<strong>true</strong> par défaut)</p>
<p>Voila ce que dit <a class="bbc_url" title="Lien externe" rel="nofollow external" href="https://support.mozilla.org/fr/kb/services-accessibilite"><span style="color:#0000ff;">le support Mozilla sur les "<em>services d’accessibilité" </em></span></a></p>
<blockquote><p><em>"<span style="color:#ff0000;">Ces
outils causent souvent aussi des problèmes pendant les mises à jour de
Firefox, déclenchant des sérieux plantages de démarrage et d’autres
anomalies.<br /><br />Le service d’accessibilité de Firefox peut être
utilisé frauduleusement par des Malware, s’il est présent, pour
surveiller le comportement des utilisateurs ou accéder aux informations
utilisateur sur le Web.</span><br /><br /><ins>Quel est l’impact des services d’accessibilité quand ils sont utilisés ?</ins><br /><br /><span style="color:#ff0000;">Le service d’accessibilité de Firefox peut avoir un impact négatif sur les performances de Firefox.<br />Des applications tierces peuvent surveiller votre navigation sur le Web<br />la stabilité de Firefox peut être affectée négativement</span>"</em></p>
</blockquote>
<p>Ce qui est aberrant par rapport à ce que dit le support, c'est que cette fonctionnalité soit activé par défaut.</p>
<h4><ins><strong>2 - Mettre les onglets sous la barre d'adresse avec barre personnelle au dessus des onglets</strong></ins></h4>
<p>J'ai pu constater que ce réglage est fortement réclamé par de nombreux utilisateurs.</p>
<p>Ligne de code à mettre dans le fichier "<em><strong>userChrome.css</strong></em>" lui même dans le dossier "<em><strong>chrome</strong></em>".<br /><strong><span style="background-color:#ffff00;">Le fichier et le dossier n'existant pas par défaut ils faut les créer dans le profile Firefox (<em>dossier caché</em>). </span></strong></p>
<p>Sur Windows = <strong>C:\Users\<name>\AppData\Roaming\Mozilla\Firefox\Profiles\xxxxxxx.default </strong><br />Sur Linux Ubuntu = <strong>/home/<name>/.mozilla/firefox/xxxxxxx.default</strong></p>
<p><strong><ins>Note:</ins> </strong><em>Si Firefox est ouvert lorsque vous
insérer un code dans le fichier CSS (penser à l'enregistrer), il faut
fermer le navigateur et le relancer <em>ou utiliser l'astuce suivante : <a href="http://easy.pc.blog.free.fr/index.php?post/Visualiser-en-direct-les-changements-effectu%C3%A9s-dans-le-fichier-userChrome.css-de-Firefox-57">Visualiser en direct les changements effectués dans le fichier <em>userChrome.css</em> de Firefox 57</a></em></em></p>
<p><strong>/* Onglets sous la barre d'adresse et barre personnelle au-dessus des onglets */<br /><span style="color:#008000;">#TabsToolbar {-moz-box-ordinal-group: 2}<br />#navigator-toolbox toolbar:not(#nav-bar):not(#toolbar-menubar) {-moz-box-ordinal-group:10}<br />#TabsToolbar {-moz-box-ordinal-group:1000 !important; }</span></strong></p>
<p>Simplement testé, car j'ai toujours utilisé le réglage par défaut de Firefox.</p>
<h4><ins><strong>3 - Modifier l'emplacement de la barre personnelle</strong></ins></h4>
<p><strong>/* Afficher barre personnelle à gauche */<br /><span style="color:#008000;">#content > tabbox {<br /> -moz-box-orient: horizontal; }<br /><br />.tabbrowser-strip {<br /> -moz-box-orient: vertical;</span><br /><span style="color:#ff0000;">/*
Note: On peut définir sur -moz-scrollbars-vertical à la place, mais la
barre de défilement sera "toujours" visible. De cette façon, il n'y a
jamais de barre de défilement, donc elle se comporte comme le fait
normalement la barre personnelle */</span><br /><span style="color:#008000;"> overflow: -moz-scrollbars-none; }<br /><br />.tabbrowser-tabs {<br /> -moz-box-orient: horizontal;<br /> min-width: </span><span style="color:#ff0000;">10ex</span><span style="color:#008000;">; </span><span style="color:#ff0000;">/* On peut augmenter cette valeur */</span><br /><span style="color:#008000;"> -moz-box-align: start; }<br /><br />.tabbrowser-tabs > hbox {<br /> -moz-box-orient: vertical;<br /> -moz-box-align: stretch; }<br /><br />.tabbrowser-tabs > hbox > tab {<br /> -moz-box-align: start;<br /> -moz-box-orient: horizontal; }</span><br /><br />/* <span id="s3gt_translate_tooltip_variant_to_id_0" class="s3gt_translate_tooltip_variant">Supprimer le bouton de fermeture</span> */<br /><span style="color:#008000;">.tabbrowser-tabs > stack {<br /> display: none; }</span></strong></p>
<p><span style="color:#ff0000;">Non testé</span></p>
<p>Si on souhaite la barre personnelle à droite, ajoutez le code suivant à celui précèdent<br /><br /><strong>/* Affichez barre personnelle à droite */<br /><span style="color:#008000;">#content > tabbox { -moz-box-direction: reverse; }</span></strong></p>
<p><span style="color:#ff0000;">Non testé</span></p>
<h4><ins><strong>4 - Modifier Couleur de fond de la barre personnelle et de la barre d'onglets</strong></ins></h4>
<strong><br />/* Couleur de fond de la barre personnelle */<br /><span style="color:#008000;">#personal-bookmarks {background-color:</span><span style="color:#ff0000;"> #FF9</span><span style="color:#008000;"> !important}</span><br /><br />/* Couleur de fond de la barre d'onglets */<br /><span style="color:#008000;">#TabsToolbar {background-color: </span><span style="color:#ff0000;">#CFC</span><span style="color:#008000;"> !important}</span></strong><br /><br />Dans le code fournis la couleur de fond de la barre personnelle est <strong>jaune pâle</strong> et pour la barre d'onglet c'est <strong>vert pâle</strong>.<br /><br />Modifier les couleurs en fonction du thème utiliser et de ses préférences.<h4><ins><strong>5 - Ouvrir les marques-page dans un nouvel onglet</strong></ins></h4>
<p>Il faut ajouter les lignes de code dans le fichiers "<em><strong>prefs.js"</strong></em> qui se trouve dans le dossier profile de Firefox.<br /> <br /><span style="color:#008000;"><strong>user_pref("</strong></span><span style="color:#008000;"><strong><span style="color:#0000ff;"><strong><span class="skimlinks-unlinked">browser.tabs.loadBookmarksInTabs</span></strong></span>", </strong></span><span style="color:#008000;"><strong><span style="color:#0000ff;"><strong>true</strong></span>); </strong></span><br /> <br />Et si ce n'est pas déjà le cas, ajouter cette ligne si on veux que la recherche s'ouvre aussi dans un nouvel onglet :<br /> <br /><span style="color:#008000;"><strong>user_pref("</strong></span><span style="color:#008000;"><strong><span style="color:#0000ff;"><strong>browser.search.openintab</strong></span>", </strong></span><span style="color:#008000;"><strong><span style="color:#0000ff;"><strong>true</strong></span>); </strong></span><br /> <br />Plus simplement on peut aussi passer par <strong>about:config</strong> : <strong>Clic droit ----> <em>Nouveau</em> ---> <em>valeur booléen</em>. </strong><br />Certaines valeurs existent déjà. Il suffit juste de les modifier.</p>
<h4><ins><strong>6 - Prévisualisation/Aperçu des onglets</strong></ins></h4>
<p>Pratique pour retrouver un onglet plus facilement lorsque l'on a beaucoup d'onglets ouvert.</p>
<p>Dans <strong>about:config</strong></p>
<p>Modifier <span style="color:#0000ff;"><strong>browser.ctrlTab.previews</strong></span> >> mettre la valeur à <span style="color:#0000ff;"><strong>true</strong></span> (<strong>false</strong> par défaut)</p>
<p><span style="color:#ff0000;">Sur ma config Linux cette modification n'a aucun effet, à voir sur Windows....</span></p>
<ins>Autre réglage. </ins><br /><p>Modifier <span style="color:#0000ff;"><strong>browser.allTabs.previews</strong></span> >> mettre la valeur à <span style="color:#0000ff;"><strong>true</strong></span> (<strong>false</strong> par défaut)<br /> <br />Quand vous cliquez sur la petite flèche à coté des onglets, vous aurez la prévisualisation de tous les onglets ouvert !</p>
<p><span style="color:#ff0000;">Option absente sur Firefox 57 (Valeur Booléenne) - ne fonctionne pas</span> </p>
<h4><ins><strong>7 - Ouvrir les onglets à la suite de l'onglet actif ou en dernier </strong></ins></h4>
<p>dans <strong>about:config</strong> -> crée une <em><strong>nouvelle valeur booléen </strong></em><br /> <br /><span style="color:#0000ff;"><strong><span class="skimlinks-unlinked">browser.tabs.insertRelatedAfterCurrent</span></strong></span> = <span style="color:#0000ff;"><strong>true</strong></span> (par défaut)<br /> <br />Pour que <ins>les nouveaux onglets s'ouvrent en dernière position</ins> et non à côté de l'onglet actif il suffit de mettre la valeur à <span style="color:#0000ff;"><strong>false</strong></span>.<strong> <br /></strong></p>
<h4><ins><strong>8 - Ouvrir un lien de la barre de recherche dans un nouvel onglet</strong></ins></h4>
<p>L'onglet s'ouvre en dernière position quelque soit l'onglet actif.</p>
<p>Dans <strong>about:config</strong></p>
<p>Modifier<span style="color:#0000ff;"><strong> browser.link.open_newwindow.restriction</strong></span> >> mettre la valeur à <span style="color:#0000ff;"><strong>0</strong></span> (<em>nouvel onglet dans la fenêtre courante</em>)</p>
<h4><ins><strong>9 - Ne pas fermer Firefox à la fermeture du dernier onglet</strong></ins></h4>
<p>Dans <strong>about:config</strong><br /><br />Modifier<span style="color:#0000ff;"><strong> <span class="skimlinks-unlinked">browser.tabs.closeWindowWithLastTab</span></strong></span> >> mettre la valeur à <span style="color:#0000ff;"><strong>false</strong></span> (<strong>true</strong> par défaut)</p>
<h4><ins><strong>10 - Personnalisation des onglets actifs et inactifs </strong></ins></h4>
<p>Ligne de code à mettre dans le fichier "<em><strong>userChrome.css</strong></em>" (dossier "<em><strong>chrome</strong></em>").<br /> <br /><strong>/* Onglet Actif Bleu ciel */<br /><span style="color:#008000;">.tab-background[selected="true"] {<br />background-attachment: none!important;<br />background-color: </span><span style="color:#008000;"><strong><span style="color:#ff0000;">lightblue </span></strong>!important;<br />background-image: none!important; } </span><br /> <br />/* Croix Rouge sur onglet actif */<br /><span style="color:#008000;">.tab-close-button {<br />color: </span><span style="color:#008000;"><strong><span style="color:#ff0000;">red</span></strong> !important; } </span><br /> <br />/* Croix de fermeture sur les onglets inactifs */<br /><span style="color:#008000;">.tab-close-button:not([selected]) {<br />color: </span><span style="color:#008000;"><strong><span style="color:#ff0000;">white</span></strong> !important; } </span></strong><br /> <br />Modifier la/les couleurs en fonction du thème utilisé et de ses préférences<br /> <br /><ins>Exemple pour la croix de fermeture:</ins></p>
<p><ins><strong>/* Croix de fermeture onglet */</strong></ins> <br /><span style="color:#008000;"><strong>.tab-close-button {<br />color: </strong></span><span style="color:#008000;"><strong><span style="color:#ff0000;"><strong>red</strong></span> !important;<br />background-color: </strong></span><span style="color:#008000;"><strong><span style="color:#ff0000;"><strong>yellow </strong></span>!important; } </strong></span><br /> <br />Ce qui donne un <span style="color:#ff0000;"><strong>X rouge</strong></span> dans un <strong>onglet jaune</strong>.</p>
<h4><ins><strong>11 - Modifier couleur et style police de l'onglet actif en utilisant le code Hexadécimale</strong></ins></h4>
<p><strong>/* Couleurs police de l'onglet actif (bleu) */<br /><span style="color:#008000;">#TabsToolbar #tabbrowser-tabs .tabbrowser-tab[selected] .tab-content {<br />background: linear-gradient(to bottom,#D6D6D6,#D6D6D6) !important;<br />color: </span><span style="color:#ff0000;">#0080FF</span><span style="color:#008000;"> !important;<br />font-weight: bold !important;<br />font-style: </span><span style="color:#ff0000;">normal</span><span style="color:#008000;"> !important;<br />font-size: 12px !important; }</span></strong><br /><br />Modifier le code couleur HEXA et le style de police celons ces préférences et le thème utilisé.<br /><br /><a href="https://forum.pcastuces.com/sujet.asp?page=-1&f=6&s=73048&REP_ID=5770873"><span style="color:#0000ff;">Code fournis par Daneel Olivaw sur PC Astuces</span></a></p>
<h4><ins><strong>12 - Modifier couleur, style et police des onglets lus et non lus</strong></ins></h4>
<p><strong>/* Apparence des onglets lus */<br /><span style="color:#008000;">.tabbrowser-tab[selected] .tab-label{<br />color: </span><span style="color:#ff0000;">black</span><span style="color:#008000;"> !important;<br />font-weight: normal !important;<br />font-size: 12px !important;<br />background-color: </span><span style="color:#ff0000;">transparent</span><span style="color:#008000;"> !important; }</span></strong><br /><br /><strong>/* Apparence des onglets non lus */<br /><span style="color:#008000;">.tabbrowser-tab[unread] .tab-label{<br />color: </span><span style="color:#ff0000;">green</span><span style="color:#008000;"> !important;<br />font-weight: bold; !important;<br />font-style: italic !important;<br />font-size: 12px !important;<br />background-color: </span><span style="color:#ff0000;">lightyellow</span><span style="color:#008000;"> !important; }</span></strong><br /><br />Modifier la/les couleurs, le style et la police en fonction de ces préférences et du thème utilisé.</p>
<p><ins>Autre code qui modifie uniquement le style de police utilisée pour un onglet non lu.</ins> <span style="color:#ff0000;">(non testé)</span></p>
<p><strong>/* Police italique sur onglet non lu */<br /><span style="color:#008000;">#content tab:not([selected]) {<br /> font-style: </span><span style="color:#ff0000;">italic</span><span style="color:#008000;"> !important; }</span></strong></p>
<ins><strong>13 - Les coins des onglets arrondi comme sur Firefox 56.0.2</strong></ins>
<p><strong>/* Coins arrondi des onglets */<br /><span style="color:#008000;">#TabsToolbar .tabs-newtab-button,<br />#TabsToolbar .tabbrowser-tab,<br />#TabsToolbar .tabbrowser-tab .tab-stack,<br />#TabsToolbar .tabbrowser-tab .tab-background,<br />#TabsToolbar .tabbrowser-tab .tab-content {<br />border-top-left-radius: </span><span style="color:#008000;"><strong><span style="color:#ff0000;">8px</span></strong> !important;<br />border-top-right-radius: </span><span style="color:#008000;"><strong><span style="color:#ff0000;">8px</span></strong> !important; } </span></strong><br /> <br />Si vous voulez des coins plus ou moins arrondis, changez le nombre de pixels = <strong>8px</strong> par <strong>6px</strong> (<ins>arrondi très léger</ins>) ou <strong>10</strong>, <strong>12px</strong> (<ins>arrondi plus marqué</ins>).</p>
<p><ins>Autre possibilité:</ins><br /><br /><strong>/* Arrondir uniquement les coins de l'onglet actif */<br /><span style="color:#008000;">.tab-background {<br />border-radius: </span><span style="color:#ff0000;">6px6px</span><span style="color:#008000;"> 0px 0px !important;<br />border-image: none !important; }<br />.tab-line {<br />display: none; }</span></strong></p>
<p>Modifier uniquement les 2 premières valeurs de "<em>border-radius</em>" pour accentuer ou diminuer l'effet de l'arrondi.</p>
<p><em>J'ai seulement testé ces deux types de réglages, car à titre personnel, les nouveaux onglets carrés me convienne parfaitement.</em></p>
<h4><ins><strong>14 - Supprimer l'onglet lorsqu'une seule page est ouverte</strong></ins></h4>
<p><strong>/* Supprimer onglet lorsqu'une seule page est ouverte */<br /><span style="color:#008000;">#tabbrowser-tabs, #tabbrowser-tabs arrowscrollbox { min-height: 0 !important; }<br />#tabbrowser-tabs tab { height: var(--tab-min-height); }<br />#tabbrowser-tabs tab:first-child:last-child { display: none !important; }</span></strong><br /><br /><span style="color:#ff0000;">Non testé</span><br /><br /><a href="https://forum.pcastuces.com/sujet.asp?page=-1&f=6&s=73133&REP_ID=5770360"><span style="color:#0000ff;">Code fournis par Daneel Olivaw sur PC Astuces.</span></a></p>
<h4><ins><strong>15 - Modifier la taille de la police des onglets</strong></ins></h4>
<p><strong>/* Taille Police Onglets */<br /><span style="color:#008000;">.tab-text {<br />font-size: </span><span style="color:#ff0000;">13px</span><span style="color:#008000;"> !important; }</span></strong><br /><br />Modifier la valeur "<em>font-size</em>" celons ses préférences.</p>
<h4><ins><strong>16 - Modifier la taille des onglets</strong></ins></h4>
<p><strong>/* Largeur des onglets */<br /><span style="color:#008000;">.tabbrowser-tab:not([pinned]) {<br />max-width: </span><span style="color:#ff0000;">200px</span><span style="color:#008000;"> !important; min-width: 30px !important; }<br />.tabbrowser-tab:not([fadein]) {<br />max-width: 1px !important; min-width: 1px !important; } </span></strong><br /><br />Modifier la première valeur "<em>max-width</em>" celons ses préférences ( 100, 150, 250, 300, etc...).</p>
<h4><ins><strong>17 - Passer le trait de l'onglet actif en dessous de l'onglet</strong></ins></h4>
<p><strong>/* Ligne sous onglet actif */<br /><span style="color:#008000;">.tabbrowser-tab[usercontextid] .tab-line{<br />background-color:var(--identity-tab-color)!important; }<br />.tabbrowser-tab .tab-line{<br />margin-top: 27px !important; }</span></strong></p>
<h4><ins><strong>18 - Supprimer la barre sur l'onglet actif</strong></ins></h4>
<strong><br />/* Supprimer la barre haute de l'onglet actif */<br /><span style="color:#008000;">#TabsToolbar .tabbrowser-tab .tab-line {visibility: hidden}</span></strong><br /><h4><ins><strong>19 - Ajouter un bouton à l'extrémité droite de la barre d'onglets pour permettre de voir la liste des onglets ouverts</strong></ins></h4>
<p><strong>/* Bouton liste des onglets à droite de la barre d'onglet */<br /><span style="color:#008000;">#alltabs-button{<br />visibility: visible !important; }</span></strong></p>
<h4><ins><strong>20 - La barre d'onglets sur plusieurs lignes avec onglets à largeur fixe</strong></ins></h4>
<p>Pour visualiser plus d'onglet sur une seule page<br /><br /><strong>/* Barre onglets sur plusieurs lignes et onglets à largeur fixe */<br /><span style="color:#008000;">.tabbrowser-tabs > hbox<br />{<br />display: block;<br />}<br />tabbrowser tab<br />{<br />display: -moz-box !important;<br />min-width: </span><span style="color:#ff0000;">150px</span><span style="color:#008000;">;<br />max-width: </span><span style="color:#ff0000;">200px</span><span style="color:#008000;">;<br />padding: 4px !important;<br />margin-bottom: 0px !important; }</span></strong><br /><br />Adapter les valeurs <strong>min/max</strong> celons ses préférences.<br /><br /><span style="color:#ff0000;">Non testé</span></p>
<ins><strong>21 - Masquer le texte des favicon de la barre personnelle </strong></ins>
<p><strong>/* Masquer texte favicon de la barre personnelle */ </strong><br /><span style="color:#008000;"><strong>#personal-bookmarks .toolbarbutton-text {<br />display: none !important; }</strong></span><br /> <br /><span style="color:#ff0000;">Malheureusement si vous avez comme moi créé
de nombreux dossiers dans votre barre personnelle, le nom de ces
dossiers n’apparaissent pas même au survol de la souris.</span></p>
<p>À contrario si vous n'avez que des adresses de sites, ce réglage est parfait.<br /> <br /><ins>Solution avec ce code qui conserve les noms des dossiers apparents (fixe) </ins><br /> <br /><strong>/* Masquer texte favicon uniquement pour les sites */<br /><span style="color:#008000;">#bookmarks-ptf toolbarbutton.bookmark-item[image]:not([image=""]):not([container="true"]) .toolbarbutton-text,<br />#personal-bookmarks toolbarbutton.bookmark-item[image]:not([image=""]):not([container="true"]) .toolbarbutton-text,<br />#personal-bookmarks toolbarbutton.bookmark-item[image]:not([image=""]):not([container="true"]) .toolbarbutton-text-shadow {<br />display: none !important; }</span></strong></p>
<h4><ins><strong>22 - Afficher le texte des favicon de la Barre Personnelle au survol de la souris</strong></ins></h4>
<p>Avec
le code ci-dessous, les noms des sites et des dossiers s'affichent au
survol, ce qui permet un gain de place dans la Barre Personnelle.</p>
<p><strong>/* Affichage texte des favicon de la barre personnelle au survol */<br /><span style="color:#008000;">#bookmarks-ptf toolbarbutton.bookmark-item:hover .toolbarbutton-text,<br />#bookmarks-ptf toolbarbutton.bookmark-item[image]:not([image=""]):not([container="true"]):hover .toolbarbutton-text,<br />#bookmarks-ptf toolbarbutton.bookmark-item[container="true"]:hover .toolbarbutton-text,<br />#bookmarks-ptf toolbarbutton.bookmark-item[image=""]:not([container="true"]):hover .toolbarbutton-text,<br />#personal-bookmarks toolbarbutton.bookmark-item:hover .toolbarbutton-text,<br />#personal-bookmarks toolbarbutton.bookmark-item[image]:not([image=""]):not([container="true"]):hover .toolbarbutton-text,<br />#personal-bookmarks toolbarbutton.bookmark-item[container="true"]:hover .toolbarbutton-text,<br />#personal-bookmarks toolbarbutton.bookmark-item:not([image]):not([container="true"]):hover .toolbarbutton-text,<br />#personal-bookmarks toolbarbutton.bookmark-item:hover .toolbarbutton-text-shadow,<br />#personal-bookmarks toolbarbutton.bookmark-item[image]:not([image=""]):not([container="true"]):hover .toolbarbutton-text-shadow,<br />#personal-bookmarks toolbarbutton.bookmark-item[container="true"]:hover .toolbarbutton-text-shadow,<br />#personal-bookmarks toolbarbutton.bookmark-item:not([image]):not([container="true"]):hover .toolbarbutton-text-shadow {<br />display: block !important; }</span></strong></p>
<p><ins><strong>23 - Réduire ou supprimer les marges de la barre personnelle</strong></ins></p>
<p>Permet d'optimiser le nombre de marque-pages sur une seule ligne de la barre personnelle.<br /><br /><strong>/* Réduction ou suppression marges barre personnelle */<br /><span style="color:#008000;">#bookmarks-ptf toolbarbutton.bookmark-item,<br />#personal-bookmarks toolbarbutton.bookmark-item {<br />margin-left: </span><span style="color:#ff0000;">2px</span><span style="color:#008000;"> !important;<br />margin-right: </span><span style="color:#ff0000;">2px</span><span style="color:#008000;"> !important; }</span></strong></p>
<p>Vous pouvez ajuster les deux valeurs "<em>margin-left</em>" et "<em>margin-right</em>" (<strong>0</strong> supprime toutes marges)</p>
<h4><ins><strong>24 - Modifier la taille de la police de la barre personnelle</strong></ins></h4>
<p><strong>/* Taille Police Barre Personnelle */<br /><span style="color:#008000;">#PersonalToolbar .bookmark-item {<br />font-size:</span><span style="color:#ff0000;">13px</span><span style="color:#008000;"> !important; }</span></strong><br /><br />Modifier la valeur "<em>font-size</em>" celons ses préférences.</p>
<h4><ins><strong>25 - Changer la couleur des dossiers de la barre personnelle</strong></ins></h4>
<p><strong>/* Changer couleur dossiers Barre Personnelle */<br /><span style="color:#008000;">.bookmark-item[container], treechildren::-moz-tree-image(container) { fill: </span><span style="color:#ff0000;">blue</span><span style="color:#008000;"> !important; }</span></strong><br /><br />Remplacer la couleur celons sa préférence (<em>red, yellow, green, black, etc...</em>).</p>
<p><ins><strong>26 - Icônes différentes pour chaque dossier dans la barre personnelle </strong></ins></p>
<p>En premier lieu créer un dossier "<em><strong>favicon</strong></em>" dans le dossier "<em><strong>chrome</strong></em>" du profile Firefox et y mettre les icônes que l'on souhaite associer aux dossiers.<br /><br /><strong>/* Attribuer un "label" aux dossiers de la barre personnelle */<br /><span style="color:#008000;">.bookmark-item[container="true"][</span><span style="color:#ff0000;">label="News"</span><span style="color:#008000;">]<br />{<br />list-style-image: url("file:</span><span style="color:#ff0000;">/home/<name>]/.mozilla/firefox/xxxxxx.default/chrome/favicon/<name>.png"</span><span style="color:#008000;">) !important;<br />-moz-image-region: rect(0px 16px 16px 0px) !important; }</span></strong><br /><br />Modifier le "<em>label</em>" = le nom du dossier (dans l'exemple c'est "<em>News</em>")<br />Indiquer
le chemin ou se trouve le favicon à attribuer au premier dossier,
copier/coller l'intégralité du code CSS à la suite du premier et répéter
la procédure (label et icône) pour tous les autres dossiers.</p>
<p><strong><ins>Note:</ins></strong>
dans mon exemple, le chemin d'accès au profile est celui existant sur
Linux, pour Windows il suffit de copier/coller le chemin suivant :</p>
<p><span style="color:#ff0000;"><strong>//C:/Users/</strong></span><span style="color:#0000ff;"><strong><name></strong></span><span style="color:#ff0000;"><strong>/AppData/Roaming/Mozilla/Firefox/Profiles/xxxxxxx.default/chrome/favicon/</strong></span><span style="color:#0000ff;"><strong><name></strong></span><span style="color:#ff0000;"><strong>.png</strong></span></p>
<p>Remplacer le premier <strong><name></strong> par votre nom d'utlisateur, et le second par le nom de du favicon que vous voulez attribuer au dossier.</p>
<figure class="image-align-left" style="margin:10px 10px 10px 0"><img src="https://img.over-blog-kiwi.com/1/20/89/97/20180131/ob_1e84be_attention.jpg" alt="" height="24" width="24" /><span style="color:#ff0000;"><strong>Attention si on effectue un copier/coller du chemin via Windows, il faut remplacer les anti-slash </strong></span><strong><span style="background-color: rgb(255, 255, 0);">\</span></strong><span style="color:#ff0000;"><strong> par celui ci </strong></span><strong><span style="background-color: rgb(255, 255, 0);">/</span></strong><span style="color:#ff0000;"><strong>
(comme dans le chemin type fournis ci-dessus) sinon ça ne fonctionne
pas. C'est le genre de détail qui peut faire galérer longtemps parce
qu'on n'y prete pas attention au premier coup d’œil.</strong></span></figure>
<strong><ins>Remarque:</ins></strong>
les résultats de mes tests sont différents celons la config utilisée
(Windows / Linux) sur Linux tous les favicon sont bien attribuées aux
dossiers respectifs, sur Windows 10 j'ai 3 favicon qui ne veulent pas
s'appliquer, alors que le chemin à exactement le même que pour les
autres dossiers. La raison c'est que sur Windows <ins>il ne faut pas que le nom d'un dossier dans le code CSS comporte des lettres accentuées</ins>, même chose pour le nom d'un dossier dans les marques-page.
<p><span style="color:#ff0000;">Je n'ai pas essayé avec des images aux formats JPEG, ICO ou BMP. à tester</span></p>
<ins><strong>27 - Modifier la taille des favicon de la barre personnelle </strong></ins>
<p><strong>/* <strong>Taille favicon barre personnelle</strong> */<br /><span style="color:#008000;">#bookmarks-ptf toolbarbutton.bookmark-item .toolbarbutton-icon,<br />#personal-bookmarks toolbarbutton.bookmark-item .toolbarbutton-icon {<br />display: block !important;<br />width: </span><span style="color:#008000;"><strong><span style="color:#ff0000;">18px</span></strong> !important;<br />height: </span><span style="color:#008000;"><strong><span style="color:#ff0000;">18px</span></strong> !important;<br />padding: 0px !important;<br />margin: 0px !important; } </span></strong><br /> <br />La taille des favicon sera à ajuster celons ses préférences.</p>
<h4><ins><strong>28 - Modifier l'espace entre les favicon de la barre personnelle </strong></ins></h4>
<p><strong>/* Ajustement écart entre favicon barre personnelle */<br /><span style="color:#008000;">#bookmarks-ptf toolbarbutton.bookmark-item .toolbarbutton-text,<br />#personal-bookmarks toolbarbutton.bookmark-item .toolbarbutton-text,<br />#personal-bookmarks toolbarbutton.bookmark-item .toolbarbutton-text-shadow {<br />padding-left: </span><span style="color:#008000;"><strong><span style="color:#ff0000;">2px</span></strong> !important; } <br /></span></strong></p>
L'écart entre les favicon sera à ajuster celons ses préférences.<br /><h4><ins><strong>29 - Mettre la Barre Personnelle sur plusieurs lignes</strong></ins></h4>
<p>Pour palier à l'incompatibilité des extensions comme <a href="https://addons.mozilla.org/fr/firefox/addon/roomy-bookmarks-toolbar/?src=ss"><span style="color:#0000ff;"><strong>Roomy Bookmarks Toolbar</strong></span></a>, <a href="https://addons.mozilla.org/fr/firefox/addon/multirow-bookmarks-toolbar/?src=ss"><span style="color:#0000ff;"><strong>Multirow Bookmarks Toolbar</strong></span></a> ou <a href="https://addons.mozilla.org/fr/firefox/addon/multirow-bookmarks-toolbarplus/?src=ss"><span style="color:#0000ff;"><strong>Multirow Bookmarks Toolbar Plus</strong></span></a>, il existe plusieurs solutions qui fonctionnent plus ou moins bien. il existe plusieurs solutions qui fonctionnent plus ou moins bien.</p>
<p>La première solution, la plus basique consiste à ajouter le code CSS suivant :</p>
<p><strong>/* Barre Personnelle sur 2 lignes */ </strong><br /><span style="color:#008000;"><strong>#PlacesToolbarItems .box-inherit.scrollbox-innerbox<br />{<br />display:block !important;<br />height: </strong></span><span style="color:#ff0000;"><strong>52px</strong></span><span style="color:#008000;"><strong> !important; } </strong></span><br /> <br /><ins>La hauteur est ajustable selon ses préférences</ins>, il suffit de l'augmenter pour une 3ème, 4ème,... ligne.<br /><br />Il faut que la valeur de la hauteur soit un multiple de la valeur d'une barre par défaut (<strong>26px</strong>), si on utilise <strong>2 barres personnelles</strong> il faut mettre "<strong><em>height= 52px</em></strong>"</p>
<p><span style="color:#ff0000;">Cette
solution bien qu'elle affiche deux lignes de la barre personnelle n'est
pas parfaite, dans la mesure ou si le nombre de marque-pages dépasse 2
lignes, ceux figurant sur la troisième ligne ce retrouvent écrasés et illisible
(sauf au survol de la souris) et ce même si on modifie la valeur "<em>height</em>". </span></p>
<p>Ceci dit elle peut suffire si le nombre de marque pages ne dépasse pas 2 lignes.</p>
<p>Deuxième solution ci-dessous qui normalement est censé effectuer un
réajustement automatique en fonction du nombre de marque-pages.</p>
<p><strong>/* Barre Personnelle sur plusieurs lignes avec réajustement automatique */</strong><br /><span style="color:#008000;"><strong>#PlacesToolbarItems<br />{ overflow: visible !important;<br />}<br /><br /> #PlacesToolbarItems > .box-inherit.scrollbox-innerbox<br />{ display:block !important; }</strong></span></p>
<p><span style="color:#ff0000;">Malheureusement même problème que précédemment.</span></p>
<p>Autre alternative, mais cette fois avec l'affichage de la 2 lignes de la barre personnelle uniquement au survol de la souris.</p>
<p><strong>/* Afficher toutes les lignes de la barre personnelle seulement au survol de la barre */ </strong><br /><span style="color:#008000;"><strong>#PlacesToolbarItems > .box-inherit.scrollbox-innerbox<br />{<br />display:block !important;<br />height: 26px !important;<br />-moz-transition-duration: </strong></span><span style="color:#ff0000;"><strong>200ms</strong></span><span style="color:#008000;"><strong> !important; }<br /> <br />#PlacesToolbarItems:hover > .box-inherit.scrollbox-innerbox<br />{<br />display:block !important;<br />height: 52px !important; /*valeur pour 2 lignes (à modifier si besoin)*/<br />-moz-transition-duration: </strong></span><span style="color:#ff0000;"><strong>300ms</strong></span><span style="color:#008000;"><strong> !important;<br />-moz-transition-delay: </strong></span><span style="color:#ff0000;"><strong>500ms</strong></span><span style="color:#008000;"><strong> !important; }</strong></span><br /><br />Le délais d'affichage est là pour éviter d'afficher la barre lorsque l'on effectue un "<em>survol en passant</em>" (pour aller ailleurs), ce délais est réglable, tout comme l'effet de transition.</p>
<p><span style="color:#ff0000;">Malheureusement là aussi on a le même problème si le nombre de marque-pages dépasse 2 lignes.</span></p>
<p>Troisième solution qui cette fois fonctionne correctement, quelque soit
le nombre de lignes et de marque pages dans la barre personnelle.</p>
<p><strong>/* Afficher Barre Personnelle sur plusieurs lignes */</strong><br /><span style="color:#008000;"><strong>#personal-bookmarks {<br />display: block;<br />}<br /><br />#personal-bookmarks #PlacesToolbar {<br />display: block;<br />min-height: </strong></span><span style="color:#ff0000;"><strong>0px</strong></span><span style="color:#008000;"><strong>;<br />overflow-x: </strong></span><span style="color:#ff0000;"><strong>hidden</strong></span><span style="color:#008000;"><strong>;<br />overflow-y: </strong></span><span style="color:#ff0000;"><strong>auto</strong></span><span style="color:#008000;"><strong>;<br />max-height: </strong></span><span style="color:#ff0000;"><strong>999px</strong></span><span style="color:#008000;"><strong>;<br />}<br /><br />#personal-bookmarks #PlacesToolbar > hbox {<br />display: -moz-stack !important;<br />left: </strong></span><span style="color:#ff0000;"><strong>0px</strong></span><span style="color:#008000;"><strong>;<br />right: </strong></span><span style="color:#ff0000;"><strong>0px</strong></span><span style="color:#008000;"><strong>;<br />width: </strong></span><span style="color:#ff0000;"><strong>100%</strong></span><span style="color:#008000;"><strong>;<br />}<br /><br />#personal-bookmarks #PlacesToolbar #PlacesToolbarItems {<br />overflow-x: </strong></span><span style="color:#ff0000;"><strong>visible</strong></span><span style="color:#008000;"><strong>;<br />overflow-y: </strong></span><span style="color:#ff0000;"><strong>visible</strong></span><span style="color:#008000;"><strong>;<br />}<br /><br />#personal-bookmarks #PlacesToolbar #PlacesToolbarItems > box {<br />display: block;<br />}<br /><br />#personal-bookmarks #PlacesToolbar > .bookmark-item{<br />visibility: </strong></span><span style="color:#ff0000;"><strong>visible</strong></span><span style="color:#008000;"><strong> !important;<br />}<br /><br />#personal-bookmarks #PlacesToolbar .chevron{<br />display: none;<br />}<br /><br />#personal-bookmarks #PlacesToolbar > hbox > hbox{<br />overflow-x: </strong></span><span style="color:#ff0000;"><strong>hidden</strong></span><span style="color:#008000;"><strong>;<br />overflow-y: </strong></span><span style="color:#ff0000;"><strong>hidden</strong></span><span style="color:#008000;"><strong>;<br />}<br /><br />#personal-bookmarks #PlacesToolbar #PlacesToolbarDropIndicator[collapsed="true"],<br />#personal-bookmarks #PlacesToolbar #PlacesToolbarDropIndicator{<br />display: none;<br />}<br /><br />#personal-bookmarks #PlacesToolbar toolbarbutton.bookmark-item{<br />padding-top: </strong></span><span style="color:#ff0000;"><strong>2px</strong></span><span style="color:#008000;"><strong>;<br />padding-bottom: </strong></span><span style="color:#ff0000;"><strong>2px</strong></span><span style="color:#008000;"><strong>;</strong></span><br /><span style="color:#ff0000;"><strong>/*</strong></span><span style="color:#008000;"><strong>margin-left: </strong></span><span style="color:#ff0000;"><strong>-4px</strong></span><span style="color:#008000;"><strong> !important;<br />padding-right: </strong></span><span style="color:#ff0000;"><strong>9.5px</strong></span><span style="color:#008000;"><strong> !important;</strong></span><span style="color:#ff0000;"><strong>*/</strong></span><br /><span style="color:#008000;"><strong>}<br /><br />#personal-bookmarks #PlacesToolbar toolbarbutton.bookmark-item:hover:active:not([disabled="true"]),<br />#personal-bookmarks #PlacesToolbar toolbarbutton.bookmark-item[open="true"] {<br />padding-top: </strong></span><span style="color:#ff0000;"><strong>2px</strong></span><span style="color:#008000;"><strong> !important;<br />padding-bottom: </strong></span><span style="color:#ff0000;"><strong>2px</strong></span><span style="color:#008000;"><strong> !important;</strong></span><br /><span style="color:#ff0000;"><strong>/*</strong></span><span style="color:#008000;"><strong>-moz-padding-start: </strong></span><span style="color:#ff0000;"><strong>4px</strong></span><span style="color:#008000;"><strong>;<br />-moz-padding-end: </strong></span><span style="color:#ff0000;"><strong>2px</strong></span><span style="color:#008000;"><strong>;</strong></span><span style="color:#ff0000;"><strong>*/</strong></span><br /><span style="color:#008000;"><strong>}<br /><br />#personal-bookmarks #PlacesToolbar toolbarseparator{<br />-moz-appearance: none !important;<br />visibility: </strong></span><span style="color:#ff0000;"><strong>visible</strong></span><span style="color:#008000;"><strong> !important;<br />display: inline;<br />text-shadow: none !important;<br />border-left: </strong></span><span style="color:#ff0000;"><strong>3px</strong></span><span style="color:#008000;"><strong> solid ThreeDShadow !important;<br />border-right: </strong></span><span style="color:#ff0000;"><strong>3px</strong></span><span style="color:#008000;"><strong> solid ThreeDHighlight !important;<br />vertical-align: </strong></span><span style="color:#ff0000;"><strong>middle</strong></span><span style="color:#008000;"><strong>;<br />}<br /><br />#personal-bookmarks toolbarbutton.bookmark-item[dragover][open]{<br />-moz-appearance: toolbarbutton;<br />}<br /><br />#navigator-toolbox toolbar:not(#nav-bar):not(#toolbar-menubar):not(#TabsToolbar) {<br />max-height: </strong></span><span style="color:#ff0000;"><strong>999px</strong></span><span style="color:#008000;"><strong> !important;<br />}</strong></span></p>
<p>Certains paramètres sont ajustables en modifiant leurs valeurs et/ou en
dé-commentant certaines lignes de code (il suffit de supprimer le <span style="color:#ff0000;"><strong>/*</strong></span> et <span style="color:#ff0000;"><strong>*/</strong></span> de la ligne concernée).</p>
<h4><ins><strong>30 - Modifier la couleur de fond et/ou la croix du bouton nouvel onglet</strong></ins></h4>
<p>Pour différencier l'aspect du bouton nouvel onglet</p>
<p><strong>/* Couleur de la croix et du fond du bouton nouvel onglet */<br /><span style="color:#008000;">.tabs-newtab-button {<br />color: </span><span style="color:#ff0000;">red</span><span style="color:#008000;"> !important;<br />background: </span><span style="color:#ff0000;">lavender</span><span style="color:#008000;"> !important; }</span></strong></p>
<p>Dans l'exemple ci-dessus <span style="color:#ff0000;"><strong>la croix est rouge</strong></span> et le fond du bouton est couleur "<em>lavande</em>" (<span style="background-color:#dda0dd;">violet</span>), modifier les couleurs celons ces préférences et le thème utilisé.</p>
<p><ins>autre code:</ins></p>
<p><strong>/* Couleur de la croix et du fond bouton nouvel onglet */<br /><span style="color:#008000;">.tabs-newtab-button {<br />color: </span><span style="color:#ff0000;">blue</span><span style="color:#008000;"> !important;<br />background-color: </span><span style="color:#ff0000;">aqua</span><span style="color:#008000;"> !important; }</span></strong><br /> <br />Choisir la/les couleurs celons ses préférences, dans l'exemple <strong><span style="color:#0000cd;">la croix est bleu</span></strong> et le fond bleu aquatique (ou <span style="background-color:#00ffff;">bleu ciel</span>), on peut ajouter un peu de transparence, en définissant la couleur au format <strong>RGBA </strong>(<em><span id="intelliTXT"><span class="_Tgc"><strong>R</strong>ed, <strong>G</strong>reen, <strong>B</strong>lue, <strong>A</strong>lpha</span></span></em>), exemple: <span style="color:#008000;"><strong>background-color: rgba(60%,70%,45%, 0.6) </strong></span>qui correspond à un fond vert olive, la dernière valeur correspond au degrés de transparence.</p>
<h4><ins><strong>31 - Modifier la largeur et la couleur de la barre d'adresse</strong></ins></h4>
<p>Code CSS fournis par <a href="https://forum.pcastuces.com/sujet.asp?page=-1&f=6&s=73048&REP_ID=5782680"><span style="color:#0000ff;">"Elle" sur PC Astuces</span></a><br /><br /><strong>/* Barre d'adresse - largeur-couleur-texte */<br /><span style="color:#008000;">#main-window[sizemode="maximized"] #urlbar-container textbox {<br />max-width: </span><span style="color:#ff0000;">450px</span><span style="color:#008000;"> !important;<br />min-width: </span><span style="color:#ff0000;">450px</span><span style="color:#008000;"> !important ;<br />background-color: </span><span style="color:#ff0000;">#6F6F6F</span><span style="color:#008000;"> !important; } </span></strong><br /><br />Choisir la largeur, la couleur celons ses préférences et le thème utilisé.<br /><br /><span style="color:#ff0000;">Non testé</span></p>
<h4><ins><strong>32 - Modifier la largeur de la barre de recherche</strong></ins></h4>
<p>Ajuster la largeur celons sa convenance.</p>
<p><strong>/* Barre de Recherche - Largeur */<br /><span style="color:#008000;">.searchbar-textbox {<br />max-width: </span><span style="color:#ff0000;">300px</span><span style="color:#008000;"> !important;<br />min-width: </span><span style="color:#ff0000;">300px</span><span style="color:#008000;"> !important; }</span></strong></p>
<p>On peut aussi <strong>ajouter une couleur de fond pour cette barre de recherche</strong>, il suffit d'ajouter le code suivant à la fin.</p>
<p><strong><span style="color:#008000;">background-color: </span><span style="color:#ff0000;">aqua</span><span style="color:#008000;"> !important; }</span></strong></p>
<p>Dans l'exemple fournis le fond est bleu aquatique (ou <span style="background-color:#00ffff;">bleu ciel</span>).</p>
<p><span style="color:#ff0000;">Non testé</span></p>
<h4><ins><strong>33 - Changer la couleur du texte et du fond de la sélection dans la barre URL</strong></ins></h4>
<p><strong>/* Couleur texte et fond de la sélection dans la barre URL */<br /><span style="color:#008000;">::-moz-selection {<br />color: </span><span style="color:#ff0000;">#fff</span><span style="color:#008000;"> !important;<br />background: </span><span style="color:#ff0000;">#ff0000</span><span style="color:#008000;"> !important; }</span></strong><br /><br />Dans l'exemple fournis, le texte est blanc avec un fond rouge.</p>
<p>Par contre le code :<br /> <br /><strong>/* Couleur texte et fond des textes sélectionnés de pages Web */<br /><span style="color:#008000;">::-moz-selection {<br />color:white !important;<br />background: rgb(10,132,255) !important; } </span></strong></p>
<p>(Texte blanc et fond bleu)</p>
<p>Placé dans le fichier <em><strong>userContent.css</strong></em> sert à changer la couleur de sélection du texte + du fond de tous les textes dans les pages Web (<em>userContent.css</em> sert à modifier l'apparence du contenu des pages Web)<br /><br /><a data-cke-saved-href="https://forum.pcastuces.com/sujet.asp?page=-1&f=6&s=73048&REP_ID=5792526" href="https://forum.pcastuces.com/sujet.asp?page=-1&f=6&s=73048&REP_ID=5792526"><span style="color:#0000ff;">Astuce fournis par Scapo sur PC Astuces</span></a></p>
<p><strong><ins>Quelques captures d'écran de rendu.</ins></strong></p>
<p><ins>Couleur texte et fond de la sélection dans la barre URL - Texte blanc et fond rouge</ins></p>
<ins><figure class="image-align-center" style="margin:10px 0 10px 0"><img src="https://img.over-blog-kiwi.com/1/20/89/97/20180106/ob_752741_firefox-57-couleur-selection-barre.png" alt="" height="21" width="514" /></figure></ins>
<p><ins><ins>Couleur de fond de la Barre Personnelle jaune pâle, et pour la Barre d'Onglet vert pâle<br /></ins></ins></p>
<figure class="image-align-center" style="margin:10px 0 10px 0"><img src="https://img.over-blog-kiwi.com/1/20/89/97/20180106/ob_4b7ee4_firefox-57-couleur-de-fond-de-la-bar.png" alt="" height="121" width="512" /></figure><p><ins>Barre personnelle sans affichage des textes des favicon (dossiers inclus)</ins> - taille des favicon par défaut je suppose que c'est <strong>14</strong> ou <strong>16px </strong>- <span style="color:#ff0000;">Le survol des dossiers n'affiche pas leur nom.</span></p>
<figure class="image-align-center" style="margin:10px 0 10px 0"><img alt="" src="https://img.over-blog-kiwi.com/1/20/89/97/20171119/ob_7cfa7d_favicon-barre-personnelle-ff57.png" height="41" width="504" /></figure><p><ins>Barre personnelle avec nom des dossiers apparent et celui des sites masqués</ins> - taille des favicon = <strong>20px</strong></p>
<figure class="image-align-center" style="margin:10px 0 10px 0"><img alt="" src="https://img.over-blog-kiwi.com/1/20/89/97/20171119/ob_dc86b1_favicon-barre-personnelle-ff57-2.png" height="32" width="506" /></figure><p><ins>favicon sur les dossiers de la barre personnelle FF57 sur Linux Ubuntu.</ins> Affichage du nom des dossiers au survol.</p>
<figure class="image-align-center" style="margin:10px 0 10px 0"><img alt="" src="https://img.over-blog-kiwi.com/1/20/89/97/20171122/ob_06a88d_firefox-57-icones-sur-dossiers-barre.png" height="74" width="340" /></figure><p><ins>Barre Personnelle sur plusieurs lignes.</ins></p>
<figure class="image-align-center" style="margin:10px 0 10px 0"><img alt="" src="https://img.over-blog-kiwi.com/1/20/89/97/20171125/ob_1df572_ff57-barre-personnelle-sur-plusieurs.png" height="55" width="508" /></figure>
<p><ins><strong>Liens connexes :</strong></ins></p>
<ul><li><a href="https://forum.pcastuces.com/personnaliser_ff_57_sans_extensions-f6s73048.htm" title="Commencé le 18/11/2017 à 06:18"><span style="color:#0000ff;">Personnaliser FF 57 sans extensions - PC Astuces</span></a></li>
<li><span style="color:#0000ff;"><a data-cke-saved-href="https://www.forum-francophone-linuxmint.fr/viewtopic.php?t=7506" href="https://www.forum-francophone-linuxmint.fr/viewtopic.php?t=7506"><span style="color:#0000ff;">Firefox 57+ modifs possibles sans extension + Sécurisation - Forum francophone LinuxMint</span></a></span></li>
<li><a href="http://j2m-06.pagesperso-orange.fr/faq_ff_userchrome.html"><span style="color:#0000ff;">UserChrome.css (FAQ Firefox)</span></a></li>
<li><span style="color:#0000ff;"><a href="https://www.userchrome.org/"><span style="color:#0000ff;">userChrome.css for Customizing Firefox</span></a></span></li>
<li><a href="https://forums.mozfr.org/viewtopic.php?t=28965"><span style="color:#0000ff;">Personnaliser Firefox avec le userChrome.css - Espace Geckozone</span></a>
</li>
<li><a href="https://github.com/Aris-t2/CustomCSSforFx"><span style="color:#0000ff;">CustomCSSforFx: Custom CSS tweaks for Firefox 57+ / GitHub - Aris-t2</span></a>
</li>
<li><a href="https://github.com/Endor8/userChrome.js"><span style="color:#0000ff;">userChrome.js - Scripts pour Firefox 57 - GitHub - Endor8</span></a>
</li>
</ul>http://easy.pc.blog.free.fr/index.php?post/Astuces-de-personnalisations-de-Firefox-Quantum-%28hors-extensions%29#comment-formhttp://easy.pc.blog.free.fr/index.php?feed/atom/comments/8184405