personnaliser Firefox avec le userChrome.css

Vos requêtes concernant Mozilla Firefox, le navigateur Gecko alternatif, ne trouvèrent point de réponses lorsque vous cherchâtes ? Toute l'équipe Geckozone est prête à vous aider.

Modérateurs : myahoo, nico@nc, Mori, jpj

Répondre
Avatar de l’utilisateur
ottomar
Varan
Messages : 1145
Inscription : 09 janv. 2005, 07:31

personnaliser Firefox avec le userChrome.css

Message par ottomar »

.

23.11.17
[modération: Bjr:->J'ai modifié les liens morts pointant sur feu Geckozone.org :wink: ]J2m06

? Edith :

Et par pitié, sauvegardez vos marque-pages et vos fichiers utilisateurs ou sauvegardez votre entier profil* . La perte de marque-pages professionnels (les autres, on s'en fout, mais moins !) pour une petite coupure de courant peut-être cata-complet !
les fichiers importants, c'est ici : http://forums.mozfr.org/viewtopic.php?t=13343
comment sauvegarder votre profil, c'est là : https://support.mozilla.org/fr/kb/profi ... -un-profil

/-------------------------Ajout J2m06 --------------------------------------------\
* Le profil c'est quoi :roll: -> Des infos sur le profil ici (ou >> ici << , ou encore >> ici (site miroir) << )


N'hésitez pas à vous servir de la recherche ctrl+f dans ce post

Depuis le temps que ça me gratouillait...

les userChrome.css et userContent.css : pour ne pas vous posez de questions sur son emplacement dans votre profil au milieu des dossiers cachés de windows, installez l'excellente extension editConfigFiles qui l'ouvre et édite dans votre éditeur de texte préféré (dans paramêtres) voir le Post-it du post-it à deux lignes plus bas, quatre, bon) L'avantage est que vous pourrez sauvegarder vos fichier uilisateurs en utf-8 (utile, par exemple, pour cacher le menu <Aller à>)
Si certains 'trucs' ne marchent pas, rajouter au début de la déclaration, juste après l'embrasse ouvrante {
-moz-appearance: none !important;

un p'tit post pour signaler et y regarder, merci

Les codes peuvent se copier-coller tels que, vous réglez après !

Image Post-it du post-it : Saucissonnage du DOM-inspecteur et pour Fx3.0 : le plus qui rend le dom plus agréable
l'outil indispensable si vous voulez personnaliser sérieusement

Image Post-it du post-it : Editer le fichier userChrome.css
où, can et coillotte ! par Acharnatus


=====

NEW:


ColumnBookmarks oTTo 1.9.3.1 page...481136

Iconic & :hover-zoomed down-labellised bookmarks page... 401425
Mise à jour ff2.0 : le manager d'extension page... 399374
Scrapbook : barre latérale "shake shakira" page... 396129
Dropmarkers (affichage des listes déroulantes) dans les dossiers marque-pages de la barre personnelle page... 395136
Hauteur des onglets page... 395136 aussi

=====

tous les titres de code de CE post sont marqués par une esperluette et un n° : pour vous y rendre au plus vite, donc recherche ctrl+f &numéro, pour ce qui est des pages alimentaires, système de lien sur topic


?

oTTomar préférés & sympas

page... 410397 : transparence barre d'outils et fenêtre complète [pirlouy dans sa grande bonté :D]

page... 463570 : autoscroller (image de défilement doux) fx3-maj

page... 292588 : Fusion arrêter/recharger/throbber fx3-valide
page... 293729 : La petite mimine fx3-valide
page... 298218 : Menu principal : En icônes only
page... 221571 : Son thème en 5 images et 6 lignes de code fx3-maj
page... 302101 : Modification des barres d'outils ff2.0 : fin d'étracas !


FENETRE 'A PROPOS DE MOZILLA FIREFOX'

&01 Image de fond de 'A propos de Mozilla Firefox' (menu Aide) et page... 205494


FENETRE DES OPTIONS - PREFERENCES

&41 Options-Préférences : Cache les boutons de la zone mots de passe enregistrés
&42 Dimensions de la fenêtre Options-Préférences ! en em uniquement ! FF 1.0.x
page... 208609 : Volet général
page... 209161 : Autres volets
page... 245337 : Icônes des volets


FENETRE DU GESTIONNAIRE D'EXTENSIONS ET THEMES

&47 Cache "obtenir d'autres extensions" dans la fenetre des extensions
page... 220053 : oTTopsie
page... 281287 : Mode slim (maigre) ff1.5
page... 399374 : mise à jour du précédent pour ff 2.0



FENETRE DU GESTIONNAIRE DE TELECHARGEMENTS

page... 222356 : oTTopsie
page... 282786 : Mode slim (vendredi saint)


FENETRE DU GESTIONNAIRE DE MARQUE-PAGES
FENETRE DE LA BIBLIOTHEQUE

&49 Gestionnaire des marque-pages : cacher...
page... 207295 : oTTopsie
page... 208221 : Shakira dans le panneau fx3-maj


FENETRE DU GESTIONNAIRE DE COOKIES

page... 211451 : Le four à cookie


FENETRE PERSONNALISER (MENU CONTEXTUEL DES BARRES D'OUTILS)

page... 233353 : versions 1.0.x (FF_Olivier)
page...233888 : Problèmes d'affichage
page... 302101 : Modification des barres d'outils ff2.0 : fin d'étracas !


MENUS

&02 Cacher les menus désactivés
&03 Cacher un menu (tout menu)
&05 Menu Principal (Fichier, Edition, etc)
&06 Séparateurs dans les menus
&08 Cacher 'Ouvrir dans des onglets' dans les menus de dossiers marque-pages
&33 Bordure des menus pop-up (déroulants)
&34 Mise en évidence du menu actif (image de fond et bords arrondis)
&37 Changer le style de la police des menus et des boutons
&40 Photo ou image perso en fond de menus
page... 218191 : Les icônes dans les menus
page... 259872: les Checkbox
page... 295605 : Menu principal : Compact-Menu sans Compact-Menu
page... 298218 : Menu principal : En icônes only
page... 313684 et la suite : Trés Coucou menu principal en mode cafard crevé sans encore Compact-menu (mise au jour : pirlouy)
page... 313642 : Les dropmarkers (affichage des listes déroulantes) aussi en mode coucou (epsy)


MENUS MARQUE-PAGES

&07 Réglage de la largeur des menus de dossiers marque-pages
&08 Cacher 'Ouvrir dans des onglets' dans les menus de dossiers marque-pages
&09 Souligner - ne pas souligner les marque-pages et page... 206653
page... 220900 : Amaigrir les icônes des marque-pages pour en mettre plus
page... 266051 : Scrollez dans vos marque-pages

page... 314601 : fenêtre d'ajout de marque-page : dépliage


BARRE PERSONNELLE DES MARQUE-PAGES

&10 Icones différentes pour chaque dossier marque-pages et page... 203037
&11 Barre personnelle sur plusieurs lignes et page... 297286
&12 Cacher les icônes de dossiers et de marque-pages
page... 237277 : Différencier les dossiers des marque-pages simples
page... 247354 : Image de fond par catégories
page... 263668 : Cacher - afficher avec hover
page... 293729 : Changer le curseur selon les marque-pages (petite mimine)
page... 395136 : Dropmarkers (affichage des listes déroulantes) dans les dossiers marque-pages de la barre personnelle
page... 401425 : Iconic & :hover-zoomed down-labellised bookmarks


BARRE D'ADRESSE (URLBAR)

&13 Fond et police de la barre d'adresse (urlbar)
&14 Niveau de sécurité des pages (urlbar)
page... 221966 : Hover et focus
page...255041 : Bords et fond


ZONE DE RECHERCHE (GOOGLE) ET MOTEURS [SEARCHPLUGINS]

&16 Largeur de la zone de recherche (Google - searchbar)
&17 Cache la flèche descendante (dropmarker) de la zone de recherche
page... 257883 : Searchplugins et maj-Fx3 & new page... 481775
non ff2.0 page... 283834 et page... 293729 ff2.0 : Mode coucou
page... 297885 : Loucher la barre de recherche
page...481775 : fx3 + moteurs en ligne + moteurs en table


BOUTONS DES BARRES D'OUTILS (TOOLBARBUTTON)

&18 Cache l'indicateur d'activité (throbber)
&19 Changer l'indicateur d'activité (throbber)
&20 Un seul bouton arrêter/recharger (StopOrReloadButton)
&21 Cache les boutons suivant/précédent quand ils sont indisponibles
&22 Cache le bouton de mise à jour
&23 Cache les flèches "drop-down" des boutons Précédente/Suivante (dropmarker)
&24 Cacher ou masquer le bouton Stop quand il n'y a rien à arrêter
&50 Espacement des boutons de barre d'outils (tous)

&51 Passage de la souris sur les boutons de nav et de barre perso (hover) et page... 202999
page... 211901: Boutons d'extensions : on Vous ment !
page... 213618 : Page précédente, page suivante
page... 214618 : Sweet Home...
page... 292588 : Fusion arrêter/recharger/throbber


BOUTONS DE COMMANDE DES FENETRES ET DES DIALOGUES

page... 212557: ok, annulez !


ONGLETS - BARRE D'ONGLETS (TAB)

&25 Cache les icones sur les onglets
&26 Cache les boutons de fermeture
&27 Supprime l'espace entre l'onglet et le bouton de fermeture
&28 Supprime la bordure basse de la barre d'onglets
&29 La barre d'onglets en bas de l'écran
&30 Régler la hauteur de la barre d'onglets
&31 La barre d'onglet verticale à gauche ou à droite
&32 Présentation des onglets
page... 247827 : Largeur des onglets
page... 286115 : Verticaux, sur plusieurs lignes ou juste les icônes
page... 286724 : Changer l'indicateur de chargement des onglets (throbber)
page... 291750 : Elargir les onglets avec hover
page... 293729 : Changer le curseur selon les onglets (petite mimine)
page... 304503 Les onglets à la mode Opéra (semble-t-il !)
page... 395136 : Hauteur des onglets (FX2.0)


BARRE D'OUTILS

&35 Cache les bordures des barres d'outils
&36 Changer la couleur des barres d'outils (et de la barre d'onglets .tabbrowser-tabs)
&37 Changer le style de la police des menus et des boutons
&38 Votre image perso comme fond des barres de menu
&39 Changer la couleur des espaces des barres d'outils
page... 292184 : Visibles en plein écran


BARRE LATERALE (SIDEBAR)

&43 Barre latérale (sidebar) Cacher...
&44 La barre à droite de l'écran
&45 Barre latérale (sidebar) fonds, police, sélections
&46 Le panneau latéral couché et paf
page... 225700 : Séparer l'écran horizontalement, naviguer depuis la sidebar
page... 208090 : Fonds précisions
page... 208275 : Séparateur vertical habité


BARRE D'ETAT (STATUS-BAR)

&52 Barre d'état (status-bar) : miscellanées
255041 : StatusButtons et AllInOneSidebar
page... 43882 : Mettez vos boutons dans la barre d'état : StatusButtons
page... 277285: Barre d'état sur 2 étages et naviguez depuis la cale


MISCELLANEES

&15 Infobulle (tooltip)
&48 Barre d'alerte (popups, téléchargements, ottorisations
page... 253960 : Messages d' !, de ? et de messages

page... 303971 et la suivante (Zhorg) : Les petits pingouins tourneurs de MostlyCrystal


NAVIGATION DEPUIS LE BAS DE L'ECRAN

&29 La barre d'onglets en bas de l'écran
page... 277285 : Barre d'état sur 2 étages et naviguez depuis la cale


EXTENSIONS

page... 255041 : StatusButtons et AllInOneSidebar
page... 243882: Mettez vos boutons dans la barre d'état : StatusButtons
page... 290205 : FlatBookmarkEditing : Amaigrissement
page... 396129 : Scrapbook : barre latérale "shake shakira"


PERSONNALISATION EN BLOC

page... 220754 : Box-inherit : simplissime et facile
page... 221571 : Son thème en 5 images et 6 lignes de code
page... 297286 : Enrayons le panda

?

--------------------------------------------------------------------------

&01 Image de fond de 'A propos de Mozilla Firefox (menu Aide)
fx3

Code : Tout sélectionner

#aboutDialog #clientBox 
{
  -moz-appearance: none !important;
   	background-image: url("http://www.enregistrersous.com/images/cbb32cebaa0cad8aba9e6728c6cd915b.png") !important;
   	min-height: 480px !important;
   	min-width: 600px !important;
	padding-top: 0 !important;
}
#aboutDialog #version 
{
   	margin-top: 10px  !important;
	font-size: 80% !important;
   	color: #FFCC00 !important;
	font-weight: bold !important;
}
#aboutDialog #copyright 
{
   	font-size: 65% !important;
   	margin: 380px 0 0 0 !important;
   	color: #DF8309 !important;
	font-weight: bold !important;
	line-height: 1.05em !important;
	text-align: center !important;
}
#aboutDialog #userAgent 
{
   	background: transparent !important;
   	color: gold !important;
   	font-size: 80% !important;
	font-weight: bold !important;
   	margin: 10px 0 0 4px !important;
   	padding: 0px !important;
	text-align: center !important;
}
#aboutDialog #userAgent .textbox-input-box
{
   	background: transparent !important;
	text-align: center !important;
}

&02 Cacher les menus désactivés
fx3

Code : Tout sélectionner

/* Par exemple, vous ne verrez plus "précédente" dans le menu contextuel
s'il n'y a pas de page précédente dans l'onglet*/

menuitem[disabled="true"] 
{
display: none; 
}

&03 Cacher un menu (tout menu)
fx3

Code : Tout sélectionner

/* Solution la plus simple pour cacher un menu: en utilisant son libellé (label) */
/* Sauvegarder en utf-8 si accents...!  par exemple */

menuitem[label="Marquer cette page"],
menuitem[label="Marquer cet onglet"]
{
display: none !important;
}
&05 Menu Principal (Fichier, Edition, etc)

Code : Tout sélectionner

/* Cacher les items du MENU PRINCIPAL (Firefox avant 1.5) */
/* sauvegarder le userChrome.css en code utf8 pour faire passer"Aller à" */
/* http://forums.mozfr.org/viewtopic.php?t=13003&highlight=supprimer+menu */

#navigator-toolbox menu[label="Fichier"],
#navigator-toolbox menu[label="Edition"],
#navigator-toolbox menu[label="Affichage"],
#navigator-toolbox menu[label="Aller à"],
#navigator-toolbox menu[label="Marque-pages"],
#navigator-toolbox menu[label="Outils"],
#navigator-toolbox menu[label="?"]
{ 
	display: none !important; 
}

/* Cacher les items du MENU PRINCIPAL (Firefox 1.5) */

#file-menu, /* Fichier */
#edit-menu, /* Edition */
#view-menu, /* Affichage */
#go-menu, /* Aller à */
#bookmarks-menu, /* Marque-pages */
#tools-menu, /* Outils */
#helpMenu /* ? */
{ 
	display: none !important; 
}

/* Cacher tout le MENU PRINCIPAL */

#toolbar-menubar
{ 
display: none !important; 
}

&06 Séparateurs dans les menus

Code : Tout sélectionner

/* Couleur hauteur des séparateurs */

menuseparator 
{
-moz-appearance: none !important;
	margin: 3px 0px !important;
	border-top-color:#800000 !important;
	border-bottom-color:#000000 !important;
	border-width:5px 0px !important;
	border-style:solid !important;
}

 /* Cacher les séparateurs (tout menu) */
 
menuseparator 
{ 
	display: none;
}

/* Séparateurs transparents (ou non en changeant le code couleur */

menuseparator
{
	margin: 5px 0px !important;
	border-top: none !important;
	border-bottom: none !important; 
}

&07 Réglage de la largeur des menus de dossiers marque-pages

Code : Tout sélectionner

 /* par défaut 26em) */

menu.bookmark-item, menuitem.bookmark-item 
{ 
	max-width: 40em !important; 
}

&08 Cacher 'Ouvrir dans des onglets' dans les menus de dossiers marque-pages

Code : Tout sélectionner

.openintabs-menuseparator, .openintabs-menuitem 
{ 
	display: none !important; 
}

&09 Souligner - ne pas souligner les marque-pages

Code : Tout sélectionner

/* Ne souligne pas les items normaux du menu Marque-pages */
menuitem.bookmark-item >
{
	text-decoration: none !important;
}
/* Souligne dans la barre perso */
toolbarbutton.bookmark-item
{
	text-decoration: underline !important;
}
/* Souligne dans le menu Marque-pages */
menu.bookmark-item
{
	text-decoration: underline !important;
}
/* Ne souligne les groupes dans le menu Marque-pages */
menuitem.bookmark-group
{
	text-decoration: none !important;
}


&10 Icones différentes pour chaque dossier marque-pages

Code : Tout sélectionner

/* Attribuer à 'label' le nom du dossier */

.bookmark-item[container="true"][label="News"] 
{
list-style-image: url("file://D:/images/icones/Arvid/Icon files/Globe.ico") !important;
-moz-image-region: rect(0px 16px 16px 0px) !important;
}

&11 Barre personnelle sur plusieurs lignes

Code : Tout sélectionner

#bookmarks-ptf 
{ 
	display: block; 
}
#bookmarks-ptf toolbarseparator 
{ 
	display: inline; 
}

&12 Cacher les icônes de dossiers et de marque-pages

Code : Tout sélectionner

/* Enlever toolbarbutton pour n'avoir aucune favicône */

toolbarbutton.bookmark-item > .toolbarbutton-icon 
{
	display: none;
}

&13 Fond et police de la barre d'adresse (urlbar)

Code : Tout sélectionner

/* Fond de la barre d'adresse */
/* Ou une image (background-image: url('CheminVers/bg.png') !important;) */

#urlbar .textbox-input-box 
{
	background-color: #800000 !important;
	color: white !important;
}

/* Changer la police de la barre d'adresse */

#urlbar
{ 
	font-family: Arial !important; 
	font-size: 9pt !important; 
}

&14 Niveau de sécurité des pages (urlbar)

Code : Tout sélectionner

/* http://www.users.on.net/~grypen/Downloads/userChrome.css */
/* les images sont à charger http://www.users.on.net/~grypen/Downloads/ */
/* les installer dans le même répertoire que votre userChrome */

#urlbar[level="high"] > .autocomplete-textbox-container 
{
	background-image: url('high.png') !important;
	background-color: none !important;
	font-weight: 600 !important;
}

#urlbar[level="low"] > .autocomplete-textbox-container 
{
	background-image: url('low.png') !important;
	background-color: none !important;
	font-weight: 600 !important;
}

#urlbar[level="broken"] > .autocomplete-textbox-container 
{
	background-image: url('broken.png') !important;
	background-color: none !important;
	font-weight: 600 !important;
}

/* Carrément le contraire! */
#urlbar[level="high"] > .autocomplete-textbox-container,
#urlbar[level="low"] > .autocomplete-textbox-container,
#urlbar[level="broken"] > .autocomplete-textbox-container 
{
	background-color: transparent !important; 
}

/* mise à jour FF1.5 */
#urlbar[level="high"] #autocomplete-security-wrapper,
#urlbar[level="low"] #autocomplete-security-wrapper,
#urlbar[level="broken"] #autocomplete-security-wrapper
{
	background-color: transparent !important;
-moz-appearance:  none !important;
}


&15 Infobulle (tooltip)

Code : Tout sélectionner

/* Fond, couleur du texte et style */

tooltip 
{
-moz-appearance: none !important;
	background-image: url(file:///D:/images/redpanda.jpg) !important; /* ou couleur background-color */
	color: #800000 !important;
	font-size: 10px !important;
	border: none !important;
}

&16 Largeur de la zone de recherche (Google - searchbar)

Code : Tout sélectionner

/* Elargir la boite de recherche (uniquement élargir, sinon suivant) */

#search-container, #searchbar 
{ 
-moz-box-flex: 400 !important; 
}

/* Largeur de la boite de recherche */

#search-container 
{ 
width: 88px !important; 
}
/* ou */
#searchbar 
{ 
width: 88px !important; 
}

&17 Cache la flèche descendante (dropmarker) de la zone de recherche

Code : Tout sélectionner

.search-proxy-button-dropmarker 
{ 
	display: none !important; 
}
.searchbar-dropmarker-image 
{
	display: none !important;
}
#search-proxy-button 
{ 
	margin-top: 1px !important;
	margin-left: -2px !important;
	margin-right: 2px !important; 
}

&18 Cache l'indicateur d'activité (throbber)

Code : Tout sélectionner

#throbber-box 
{ 
	display: none !important;
}

&19 Changer l'indicateur d'activité (throbber)

Code : Tout sélectionner

#navigator-throbber .button-icon
{
-moz-appearance: none !important;
	list-style-image: url(chemin/vers/image) !important;
}

&20 Un seul bouton arrêter/recharger

Code : Tout sélectionner

/* ATTENTION : le bouton stop doit être à gauche du bouton recharger */
/* C'est ce que fait l'extension StopOrReloadButton */

#stop-button[disabled="true"] 
{

	display:none; 
} 
#stop-button:not([disabled]) + #reload-button 
{ 
	display:none; 
}

&21 Cache les boutons suivant/précédent quand ils sont indisponibles

Code : Tout sélectionner

#back-button[disabled="true"],
#forward-button[disabled="true"]
{
	display: none;
}

&22 Cache le bouton de mise à jour

Code : Tout sélectionner

toolbarbutton #softwareupdate 
{ 
	display:none !important;
}

&23 Cache les flèches "drop-down" des boutons Précédente/Suivante (dropmarker)

Code : Tout sélectionner

#back-button .toolbarbutton-menubutton-dropmarker, 
#forward-button .toolbarbutton-menubutton-dropmarker
{ 
	display: none !important; 
}

/*  Si vous ne voulez AUCUN dropmarker */
.toolbarbutton-menubutton-dropmarker 
{ 
	display: none !important; 
}

&24 Cacher ou masquer le bouton Stop quand il n'y a rien à arrêter

Code : Tout sélectionner

/* mais fait se trés mousser la barre d'outils */
#stop-button[disabled="true"] 
{ 
	display: none !important; 
}

/* pour ne pas faire frétiller la barre d'outils */
/* applicable à bien des boutons */

#stop-button
{ 
	opacity: 1 !important; 
}
#stop-button[disabled="true"] 
{ 
	opacity: 0 !important; 
}

&25 Pas d'icones sur les onglets (tab)

Code : Tout sélectionner

.tabbrowser-tabs .tab-icon 
{ 
	display: none; 
}

&26 Cache les boutons de fermeture sur les onglets (tab)

Code : Tout sélectionner

.tabbrowser-tabs .tabs-closebutton 
{ 
	display:none !important; 
}

&27 Supprime l'espace entre l'onglet et le bouton de fermeture (tab)

Code : Tout sélectionner

.tabbrowser-tabs .tabs-right 
{ 
	display:none !important; 
}

&28 Supprime la bordure basse de la barre d'onglets (tab)

Code : Tout sélectionner

.tabbrowser-strip 
{
	border-bottom: none !important; 
}

&29 La barre d'onglets en bas de l'écran (tab)

Code : Tout sélectionner

#content > tabbox 
{ 
-moz-box-direction: reverse; 
}

&30 Régler la hauteur de la barre d'onglets (tab)

Code : Tout sélectionner

tab 
{
	height: 23px !important; 
}
.tabbrowser-strip 
{ 
	height: 25px !important; 
}

&31 La barre d'onglet verticale à gauche ou à droite (tab)

/* nottomar: ? */

Code : Tout sélectionner

#content > tabbox { -moz-box-orient: horizontal; } 
.tabbrowser-strip { -moz-box-orient: vertical; overflow: -moz-scrollbars-none; } 
.tabbrowser-tabs { -moz-box-orient: horizontal; min-width: 10ex; -mox-box-pack: start; -moz-box-align: start; }
.tabbrowser-tabs > hbox { -moz-box-orient: vertical; -moz-box-align: stretch; -moz-box-pack: start; } 
.tabbrowser-tabs > hbox > tab { -moz-box-align: start; -moz-box-orient: horizontal; }
.tabbrowser-tabs > stack { display: none; }

/* Pour la mettre à droite, ajouter ceci */
#content > tabbox {-moz-box-direction: reverse;}


&32 Présentation des onglets

c'est le mien code, icônes et boutons de fermeture cachés
tab = onglet en général
tab[selected="true"] = onglet sélectionné
tab:not([selected]) = onglet non encore sélectionné
tab[busy] = onglet en chargement
vous pouvez y mettre un fond en image avec :
background-image: url("cheminVers/votreFond.png") !important;

Code : Tout sélectionner

/* onglet */
tab
{
-moz-appearance: none !important;	
	background-color: transparent !important;
	font-size: 11px !important;
	border: 0 !important;
	margin-left: 1px !important;
	padding: 0 !important;
}

tab .tab-text
{
-moz-appearance: none !important;
	margin-top: -2px !important;
	background-color: #D4CBC5 !important;
	color: -moz-fieldText !important;
	padding-left: 8px !important;
	padding-right: 8px !important;
	font-weight: bold !important;
	font-family: bitstream vera sans !important;
}

/* Présentation de l'onglet actif: */
tab[selected="true"] 
{

}

tab[selected="true"] .tab-text
{
-moz-appearance: none !important;
	color: white !important;
	margin-top: -1px !important;

	background-color: firebrick !important;
}

/* Onglet non encore séléctionné */
tab:not([selected]) .tab-text
{
	background-color: transparent !important;
	font-style: italic !important;
	color: darkslategray !important;
	font-size: 10px !important;
}

/* Passage de la souris sur l'onglet 	 */
tab:hover 
{
-moz-appearance: none !important;	
	margin-top: 0px !important;
	background-image: none !important;
	background-color: transparent !important;
}

tab:hover .tab-text
{ 
-moz-appearance: none !important;
	padding-left: 8px !important;
	padding-right: 8px !important;
	margin-top: 0px !important;
	color: firebrick !important;
}

tab:hover[selected="true"] .tab-text
{
	margin-top: -1px !important;
	color: white !important;
}

&33 Bordure des menus pop-up (déroulants)

Code : Tout sélectionner

/* A régler selon */
menupopup, 
popup 
{
	border: 2px solid !important;
	-moz-border-top-colors: #CCFFF1 !important;
	-moz-border-right-colors: #CCFFF1 !important;
	-moz-border-bottom-colors: #CCFFF1 !important;
	-moz-border-left-colors: #CCFFF1 !important;
	padding: 2px !important;
	background-color: none !important; 
}

/* ou plus simple si même couleur pour les 4 bords */

menupopup, 
popup 
{
	border: 2px solid #CCFFF1 !important;
	padding: 2px !important;
	background-color: none !important; 
}

&34 Mise en évidence du menu actif (image de fond et bords arrondis)

Code : Tout sélectionner

menubar > menu[_moz-menuactive="true"],
menupopup > menu[_moz-menuactive="true"],
popup > menu[_moz-menuactive="true"],
menuitem[_moz-menuactive="true"] 
{
	background-color: navy !important;
	background-image: url(file:///D:/images/FirefoxRedPandaTopR.png) !important;
	color: navy !important;
	-moz-border-radius-topleft: 8px !important;
	 -moz-border-radius-topright: 8px !important; 
	-moz-border-radius-bottomleft: 8px !important;
	-moz-border-radius-bottomright: 8px !important; 
	-moz-border-corner-fit: scale !important;
	border-color: #d4d3d9 !important;
	padding-left: 10px !important;
}

/* ou en relief */
/*
   	-moz-border-top-colors: ThreeDShadow ThreeDDarkShadow !important;
   	-moz-border-right-colors: ThreeDHighlight ThreeDLightShadow !important;
   	-moz-border-bottom-colors: ThreeDHighlight ThreeDLightShadow !important;
   	-moz-border-left-colors: ThreeDShadow ThreeDDarkShadow !important;
*/



&35 Cache les bordures des barres d'outils

Code : Tout sélectionner

  /* ou border: none !important */
menubar, toolbox, toolbar 
{
	border-style: none !important; 
}



&36 Changer la couleur des barres d'outils (et de la barre d'onglets .tabbrowser-tabs)

Code : Tout sélectionner

 menubar, 
toolbox, 
toolbar, 
.tabbrowser-tabs 
{ 
	background-color: navy !important; 
}



&37 Changer le style de la police des menus et des boutons

Code : Tout sélectionner

menubar > menu, menupopup > menu, popup > menu, menuitem, toolbarbutton 
{ 
	color: #000000 !important; 
	font-weight: bold !important; 
	font-size: 16px !important;
	font-family: monospace !important;
}

/* ou pour presque tout */

menubar, menubutton, menulist, menu, menuitem, textbox, tab, tree, tooltip 
{
	color: #000000 !important; 
	font-weight: bold !important; 
	font-size: 16px !important;
	font-family: monospace !important;
}

/* ou */

toolbar 
{
	font-family: verdana, helvetica !important;
	font-size: 10px !important;
}



&38 Votre image perso comme fond des barres de menu

Code : Tout sélectionner

 /* La même pour l'ensemble des barres */

#navigator-toolbox 
{ 
	background-image: url(file:///E:/test.jpg) !important; 
}

/* OU */

#navigator-toolbox 
{
	background: url(file:///D:/images/redpanda.jpg) top left repeat !important;
}



&39 Changer la couleur des espaces des barres d'outils

Code : Tout sélectionner

/* ou une icône si ça vous dit avec background-image */
toolbarspacer 
{
	background : black;
}



&40 Photo ou image perso en fond de menus

Code : Tout sélectionner

/*ou url(redpanda.jpg) si redpanda.jpg est dans le même répertoire que le userChrome.css*/
/* choisir une photo pas énorme qui correspond à la largeur - hauteur des menus */

menupopup,
#toolbar-context-menu,
#contentAreaContextMenu 
{

	background: rgb(255,255,255) url(file:///D:/images/redpanda.jpg) top left repeat-y !important;
}

&41 Options-Préférences : Cache les boutons de la zone mots de passe enregistrés

Code : Tout sélectionner

#passwords button 
{ 
	display: none !important 
}

/* Cache la liste des mots de passe */

dialog#signonviewer #savedsignons 
{ 
	display: none !important 
}

/* Supprime le bouton montrer les mots de passe */

prefwindow#SignonViewerDialog button#togglePasswords 
{ 
display:none !important; 
}

&42 Dimensions de la fenêtre Options-Préférences ! en em uniquement ! FF 1.0.x

Code : Tout sélectionner

#prefDialog 
{ 
	width: 80em !important; 
	height: 48em !important; 
}

&43 Barre latérale (sidebar) Cacher...

Code : Tout sélectionner

/* Cacher la boite de recherche des marque-pages */

#bookmarksPanel > hbox 
{ 
	display:none; 
}

/* Cache le séparateur vertical entre la fenetre et la sidebar */

#sidebar-splitter 
{ 
	display: none !important; 
}

/*  Supprime la limite de largeur de la sidebar */
/*  Versions 1.0.x */

#sidebar 
{ 
	max-width: none !important;
	min-width: 0px !important; 
}

/* Cache la barre de défilement dans la barre latérale, elle se "défile" à la souris */

#bookmarks-view, scrollbar[orient=vertical] 
{ 
	width: 0px !important; 
}

/* Cache l'entête de la barre latérale */

sidebarheader 
{ 
	display: none !important 
}


&44 La barre à droite de l'écran

Code : Tout sélectionner

window > hbox { direction:rtl; }
window > hbox > * { direction:ltr; }
FF2.0

Code : Tout sélectionner

window > stack > hbox { direction:rtl; }
window > stack > hbox > * { direction:ltr; }


&45 Barre latérale (sidebar) fonds, police, sélections

Code : Tout sélectionner

/* Une photo en fond  */

#historyTree, 
#bookmarks-view Tree, 
#rssItemListBox
{
	background-image: url(file:///D:/images/sun.jpg) !important;
}

/* Fond de l'entête de la barre latérale */

sidebarheader 
{
-moz-appearance: none !important;
	background-image: url(file:///D:/images/FirefoxRedPandaTop.png) !important;
	color: white !important; 
}

/* Couleur de la sélection dans la barre latérale */

treechildren::-moz-tree-cell-text(selected) 
{
	color: navy !important;
	background: yellow !important; 
}

/* Image de fond de la sélection dans la barre latérale et mise en évidence */

treechildren::-moz-tree-row(selected) 
{
-moz-appearance: none !important;
	background-image: url(http://cheminVers/FirefoxRedPandaTopR.png) !important;
	background-repeat: repeat !important;
	font-weight: bold !important;
	margin-left: 17px !important;
	border: 2px solid !important;
	-moz-border-top-colors: ThreeDHighlight ThreeDLightShadow !important;
	-moz-border-right-colors: ThreeDHighlight ThreeDLightShadow !important;
	-moz-border-bottom-colors: ThreeDHighlight ThreeDLightShadow !important;
	-moz-border-left-colors: ThreeDHighlight ThreeDLightShadow !important; 
}

&46 Le panneau latéral couché et paf

Code : Tout sélectionner

#browser 
{
   	-moz-box-orient: vertical;
   	-moz-box-direction: reverse;
}
#sidebar 
{
   	max-width: none !important;
   	height: 100px;
}

&47 Cache "obtenir d'autres extensions" dans la fenetre des extensions

Code : Tout sélectionner

#getMore
{
	display:none;
}

&48 Barre d'alerte (popups, téléchargements, ottorisations)

Code : Tout sélectionner

browsermessage 
{
	background-color: #ffcc00 !important;
	color: black !important;
	padding-left: 5px !important;
}

/* OU */

.alertBox {color: red !important;}
.alertTitle {color: red !important;}
.alertText {color: red !important;}
.alertText[clickable="true"] {color: red !important;}
.alertText[clickable="true"]:hover:active {color: red !important;}

&49 Gestionnaire des marque-pages : cacher...

Code : Tout sélectionner

/* Cache le menu du gestionnaire de marque-pages */

#bookmarks-toolbox #main-menubar 
{ 
	display: none !important; 
}

/* Cache le texte des boutons dans le gestionnaire des marque-pages */

#command-toolbar .toolbarbutton-text 
{ 
	display: none; !important; 

}

/* Cache les icones de la barre d'outils */

#newbookmark, /* "New Bookmark..." */
#newfolder, /* "New Folder..." */
#newseparator, /* "New Separator" */
#moveBookmark, /* "Move..." */
#moveBookmark + toolbarseparator, /* Separator on the right to "Move..." */
#properties, /* "Properties" */
#rename, /* "Rename..." */
#delete /* "Delete" */
{ 
	display: none; !important; 
}

/* Cache la barre d'état */

#bookmark-window #statusbar 
{ 
	display: none !important; 
}

/* Cache la barre de recherche */

#bookmarks-search 
{ 
	display:none !important; 
}

&50 Espacement des boutons de barre d'outils (tous)

Code : Tout sélectionner

/* Selon goûts zé couleurs -haut-droite-bas-gauche- */

toolbarbutton 
{
	padding: 0px 0px 0px 0px !important;
}

&51 Passage de la souris sur les boutons de nav et de barre perso (hover)

Code : Tout sélectionner

toolbarbutton:hover,
toolbarbutton[buttonover="true"] 
{
	background-color: navy !important;
	color: white !important;
	border-top: 1px solid navy !important;
	border-right: 1px solid navy !important;
	border-bottom: 1px solid navy !important;
	border-left: 1px solid navy !important;
}

toolbarbutton:hover:active,
toolbarbutton[open="true"] 
{
	background-color: none !important;
	border-top: 1px solid #808080 !important;
	border-right: 1px solid #FFFFFF !important;
	border-bottom: 1px solid #FFFFFF !important;
	border-left: 1px solid #808080 !important;
}

&52 Barre d'état (status-bar) : miscellanées

Code : Tout sélectionner

/* Cache le lien de l'extension Adblock */

statusbarpanel[id="adblock-status"] 
{ 
	display:none !important; 
}

/* Devrait (?) montrer l'icone du theme en cours (??) */

#page-theme-button 
{ 
	display: -moz-box !important;
	list-style-image: url(chrome://browser/skin/page-themes.png); 
	padding: 0px 2px; 
}

/* Change la police de l'extension Status Bar Clock */

#timestatus-status 
{ 
	font: bold 14pt Arial; 
}

/* Change la couleur de police de la barre d'état */

#status-bar 
{
	color: #votreCodeCouleur; !important; 
}

/* Barre d'état visible en plein-écran */

#status-bar 
{ 
	visibility: visible !important; 
}

/* Cache le bouton RSS */

#livemark-button 
{ 
	display: none !important; 
}

/* Cache le bouton sécurité (le cadenas) dans les pages https */

#security-button 
{ 
	display: none !important;
}

/* Cache la zone d'affichage de la barre d'état */

#statusbar-display 
{ 
	display: none !important;
}


/* Cache la barre de progression de la barre d'état */

#statusbar-progresspanel 
{ 
	display: none !important;
}


/* Cache le bouton de gestion des pop-ups  */

#page-report-button 
{ 
	display: none !important;
}
-------------------------------------------------

Have
Aa
Lot
Of
Fun

Image
Dernière modification par ottomar le 06 déc. 2009, 12:58, modifié 131 fois.
Avatar de l’utilisateur
Mori
Animal mythique
Messages : 13311
Inscription : 30 avr. 2004, 19:17

Message par Mori »

[Moderation]

merci ... tiens, je vais même le post-iter ... même s'il y a déjà beaucoup de posts it.
si un aministrateur ou un autre modérateur trouve que ce n'est pas une bonne idée, on changera le statut ou si ça peut faire l'objet d'un article sur le portail. :D

Linux debian 12 bookworm stable / LXQt 1.2.0

schumi
Lézard à collerette
Messages : 262
Inscription : 08 juil. 2004, 04:06

Message par schumi »

bien bien. C'est sympa.
C'est une bonne idée de le mettre en haut.
Merci. :)
genosias

Message par genosias »

:?
/* Régler la hauteur de la barre d'onglets */
tab {height: 23px !important; }
.tabbrowser-strip { height: 25px !important; }

damn ca va pas chez moi, dommage, les onglets du thème plastifox crystal sont vraiment trop gros...

sinon super post, ca fait longtemps que j'en recherche un comme ca :)
genosias

Message par genosias »

ha, j'ai trouvé une autre manière de le faire si ca intéresse qqun ;)
http://forums.mozillazine.org/viewtopic.php?t=42042

il y a aussi d'autres options sympa pour les onglets
Invité

Message par Invité »

Bonjour,

j'utilise firefox depuis sa sortie mais je découvre le fichier userchrome que depuis hier !! mieux vaut tard.....

en fait je vaoudrais tout simplement que le texte de l'onglet change de couleur si des choses ont changé sur la page.....par exemple un nouveau mail qui arrive ou un nouveau message dans un forum.....
Je ne trouve pas l'astuce....

Merci d'avance
Mikka
mikka
Arias
Messages : 2
Inscription : 22 sept. 2005, 16:11

Message par mikka »

Anonymous a écrit :Bonjour,

j'utilise firefox depuis sa sortie mais je découvre le fichier userchrome que depuis hier !! mieux vaut tard.....

en fait je vaoudrais tout simplement que le texte de l'onglet change de couleur si des choses ont changé sur la page.....par exemple un nouveau mail qui arrive ou un nouveau message dans un forum.....
Je ne trouve pas l'astuce....

Merci d'avance
Mikka
FF_Olivier
Iguane
Messages : 979
Inscription : 09 juil. 2004, 15:41

Message par FF_Olivier »

Juste pour s'amuser :

Code : Tout sélectionner

* { -moz-box-direction: reverse !important; }
Désolé ;) ...

EDIT : ajout du !important
openSUSE 12.2 - FF v24.0 FR - TB v24.0 FR ma config en détails - Décrivez la vôtre ici ;)
userContent.css : modifiez l'apparence et le contenu des sites visités !
Avatar de l’utilisateur
ottomar
Varan
Messages : 1145
Inscription : 09 janv. 2005, 07:31

Message par ottomar »

:lol:
et tout y passe, la fenetre des marque-pages, les options, tout, meme chromEdit
la blague à faire
:lol:
oleg64
Salamandre
Messages : 34
Inscription : 15 août 2005, 17:14

Message par oleg64 »

Salut, c'est impeccable, est ce qu'il y a moyen d'avoir la barre d'onglets de la même couleur que la barre d'outils ? et aussi pour le haut du panneau lattéral ?
A+
Il ne faut pas juger un homme d'après ses fréquentations. Ne perdons pas de vue que Judas avait des amis irréprochables. (E. Hemingway, 1898-1961)
FF_Olivier
Iguane
Messages : 979
Inscription : 09 juil. 2004, 15:41

Message par FF_Olivier »

Anonymous a écrit :Bonjour,

j'utilise firefox depuis sa sortie mais je découvre le fichier userchrome que depuis hier !! mieux vaut tard.....

en fait je vaoudrais tout simplement que le texte de l'onglet change de couleur si des choses ont changé sur la page.....par exemple un nouveau mail qui arrive ou un nouveau message dans un forum.....
Je ne trouve pas l'astuce....

Merci d'avance
Mikka
Inutile de poster de tous les côtés, je réponds ici pcq c'est plus logique ;) .

Ce que tu demandes est a priori impossible puisque le CSS n'est pas capable de faire du conditionnel, c'est un langage de description/association, pas de programmation. La seule possibilité, c'est que FF change qqc dans l'arbre DOM quand une page a changé, et que le CSS réflète ce changement, mais je ne sais pas si c'est le cas.

Sinon, il y a des extensions qui permettent de changer la couleur de l'onglet quand il n'est pas encore lu, TabMixPlus p.ex. Mais comme elle fait aussi plein d'autres choses, c'est p-ê trop lourd juste pour ça. Il faudrait voir dans les extensions pour FF s'il n'y en a pas une autre plus adaptée à tes besoins.

Quant aux nouveaux mails annoncés dans FF, alors là, ça me dépasse, je ne vois même pas l'utilité de la chose, il y a des dizaines d'utilitaires gratuits qui font ça très bien et qui s'intègrent dans l'interface de Windows/Mac/Linux. Quoi qu'il en soit, FF n'a pas pour vocation de gérer les mails, et le CSS encore moins, ce n'est pas la bonne approche il me semble.

À chaque tâche son outil.
openSUSE 12.2 - FF v24.0 FR - TB v24.0 FR ma config en détails - Décrivez la vôtre ici ;)
userContent.css : modifiez l'apparence et le contenu des sites visités !
mikka
Arias
Messages : 2
Inscription : 22 sept. 2005, 16:11

Message par mikka »

pourtant mes onglets ce mettent en italique lorsqu'un nouveau mail arrive dans ma page webmail google, l'utilité c'est je ne suis pas obligé de passer en revu tous mes onglets pour voir les nouveautes ;)
cela dit c'est peut etre une extension que j'ai rajouté qui fait ca !

je vais regarder du coté des extensions
desolé pour le multipost je pensais avoir posté dans le mauvais post au départ :lol:
FF_Olivier
Iguane
Messages : 979
Inscription : 09 juil. 2004, 15:41

Message par FF_Olivier »

Un petit défi pour les bons, pcq moi j'en ai marre de chercher ;) :

quand on ouvre les {Préférences|Options}/Vie privée/Cookies, la fenêtre d'affichage est trop petite et on a une barre de défilement horizontale, berk berk berk !

2 possibilités pour résoudre ce pb :
  • afficher l'un sous l'autre les boutons [Exceptions] et [Afficher les cookies] ;
  • et/ou augmenter la taille de toute la fenêtre (elle fait par défaut 694x513) à 880x660.
Et non, #prefDialog {width: ...; height:...; } ne marche pas, ce serait trop facile :mrgreen: ...
openSUSE 12.2 - FF v24.0 FR - TB v24.0 FR ma config en détails - Décrivez la vôtre ici ;)
userContent.css : modifiez l'apparence et le contenu des sites visités !
Avatar de l’utilisateur
ottomar
Varan
Messages : 1145
Inscription : 09 janv. 2005, 07:31

Message par ottomar »

Code : Tout sélectionner

/* ============ PHOTO DANS MENUS ET BARRES ============== */

menupopup,
#toolbar-context-menu,
#contentAreaContextMenu {
   background:
     rgb(255,255,255)
     url(http://ottomar.chez.tiscali.fr/res/redpanda.jpg)
     top left
     repeat-y
     !important;
}

sidebarheader,
#sidebar-box,
#appcontent,
#content {
   url(http://ottomar.chez.tiscali.fr/res/redpanda.jpg)
   top left
   repeat-x
   !important;
}

#navigator-toolbox {
   background:
     url(http://ottomar.chez.tiscali.fr/res/redpanda.jpg)
     top left
     repeat
     !important;
}
la mëme photo en fond des barres d'outils, des menus et de la sidebar,
résultat ici

merci à JPBardiau pour la photo : Firefox Pictures

ou simplement une photo de votre disque dur avec url(file:///D:/images/redpanda.jpg) par ex.
center au lieu de top left pour les menus, c'est mieux
Avatar de l’utilisateur
ottomar
Varan
Messages : 1145
Inscription : 09 janv. 2005, 07:31

Message par ottomar »

/* ============ SIDEBAR ============== */

Code : Tout sélectionner

#historyTree, #bookmarks-view Tree, #rssItemListBox, {
-moz-appearance: none !important;
background-image: url(file:///D:/images/sun.jpg) !important;
color: white !important;
font-weight: bold !important;
}
met une photo comme fond de la sidebar: historique, marque-pages, et....panneau du bas de sage
je n'arrive pas à trouver pour le panneau du haut de sage (#pageSagePanel colle po)
malheureusement (?) ça la colle aussi en fond dans la fenetre du gestionnaire de marque-pages
Répondre

Qui est en ligne ?

Utilisateurs parcourant ce forum : Google [Bot] et 17 invités