personnaliser Firefox avec le userChrome.css

[Jim]

Comme je me suis fais avoir
Je me permets de coller ce lien en gros...car il est en tout petit dans la rubrique code d'Ottomar
http://www.geckozone.org/forum/viewtopi ... rimer+menu
Ca concerne la suppression du menu "Aller à" en UTF-8

Edit: C'est quand même balo que ChromeEdit ne sauvegarde pas correctement

[ottomar]

Code : Tout sélectionner

/* hover sur les boutons de nav et de barre perso */
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;
}

hover:

hover:active

Code : Tout sélectionner

/* Couleur de barre d'adresse */
#urlbar .textbox-input-box {
  background-color: #800000 !important;
  color: white !important;
}

Code : Tout sélectionner

/* hover sur les onglets */
tab:hover { 
  background-color: #800000 !important; 
  color: white !important; 
}

[ottomar]

Code : Tout sélectionner

/* Icones pour dossiers marque-pages */
.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;
}
.bookmark-item[container="true"][label="SP"] {
list-style-image: url("file://D:/images/icones/Arvid/Icon files/Advanced.ico") !important;
-moz-image-region: rect(0px 16px 16px 0px) !important;
}

les icones en 16x16, svp

[ottomar]

@FF_Olivier
sissi, ça marche... #prefDialog {width: ...; height:...; }
mais c'est juste une histoire d'unité: le px ne colle pas, l'em si !!

Code : Tout sélectionner

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

[FF_Olivier]

@FF_Olivier
sissi, ça marche... #prefDialog {width: ...; height:...; }
mais c'est juste une histoire d'unité: le px ne colle pas, l'em si !!

Code : Tout sélectionner

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

Aaah, voilà une nouvelle qu'elle est bonne, il faudra que j'essaie, merci !
(En fait, j'avais contourné le pb par la manière forte, en modifiant le code xul à la base, afin d'avoir les boutons l'un en-dessous de l'autre. Ça tiendra jusqu'à la prochaine version de FF, qui, de toute façon, présentera les menus différemment et où le pb disparaîtra.)

[Jim]

Tiens je viens de remarquer un truc sous la version béta.
J'avais supprimé le menu "aller à", mais il y avait un très désagréable effet de clignotement dans les menus placés après... c'est à dire dans les menus marque-pages et outils...
Au début je pensais à un phénomère dû à la béta mais en regardant de plus près dans les menus fichier, edition et affichage, c'etait tout à fait normal...
J'ai donc remodifié pour avoir le menu "aller à" et tout est redevennu normal...

[mnemo]

bonjour

j'ai une question est-ce que d'après vous ça marche sur portablefirefox?
(j'ai pas encore tout lu, mais ça a l'air intéressant...)

merci

[ottomar]

je ne pense pas qu'il y ait de blème avec portableFF, puisque c'est kif FF: tu as un dossier Chrome, donc un userChrome

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;
}

pourquoi pas ??

[mnemo]

merci ottomar

par contre comme j'ai pas encore tout lu , du coup j'ai pas compris grd chose au reste...
mais qd j'aurais lu, vais peut-etre comprendre!
sinon, je viendrais surement poser des quest... (dsl ) à moins que ce soit pas pour les "débutants"...

[ottomar]

au contraire, c'est le bAbA pour personnaliser son ff

Code : Tout sélectionner

/* tooltip infobulle */
tooltip {
-moz-appearance: none !important;
background-image: url(http://ottomar.chez.tiscali.fr/res/redpanda.jpg) !important; /* ou couleur background-color */
color: #800000 !important;
font-size: 10px !important;
border: none !important;
}

[mnemo]

ouais.....suis pas sûre j'ai lu depuis le début, meme si c'est b a. ba pour moi ça m'a l'air du chinois

par ex: meme si je me doute, vu que vous en rigoliez, qu'il faut pas mettre le "important" , je sais pas si faut mettre le "!" qu'est avant ou après, enfin bref! tu vois l'genre quoi

(d'ailleurs z'auriez p't'êt' pu mettre les trucs à pas mettre ds une aut' couleur non? bonne idée. )

pi, des fois c'est pas clair de savoir pourquel résultat faut mettre ci ou ça (pour moi du moins)
enfin, faut déjà ouvrir ce fichier voir comment il est foutu......

(même les copies d'écran me paraissent difficiles... oui je sais on va dire on peut plus rien pour moi! irrécupérable )
par contre j'adore ce que t'as fait de ton ff sur la copie d'écran d'avt!
(moi, suis meme pas foutue de séparer en deux barres mes liens de barre perso...)

[ottomar]

Une petite série barre latérale...

Code : Tout sélectionner

/*  Supprime la limite de largeur de la sidebar */
#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; }

/* Fond de l'entête de la barre latérale */
sidebarheader {
-moz-appearance: none !important;
background-image: url(http://ottomar.chez.tiscali.fr/res/FirefoxRedPandaTop.png) !important;
color: white !important; 
}

/* Cache l'entête de la barre latérale */
sidebarheader { display: none !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://ottomar.chez.tiscali.fr/res/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; }   

mnemo:
pour l'instant, si tu y piges que couic
1/ installe l'extension ChromEdit, tu n'auras aucun souci pour trouver/enregistrer le userChrome.css
2/ tu ne dois pas toucher à
-moz-appearance: none !important;
!important;
aux {}
à ce qu'il y a avant {
3/ tu peux changer ce qui se trouve entre les ":" et le "!important"
exemple:
dans <color: navy !important;>, tu peux juste changer "navy" par un autre code couleur
dans <background-image: url(http://ottomar.chez.tiscali.fr/res/Fire ... daTopR.png) !important;>, tu peux juste changer l'adresse "http://ottomar.chez.tiscali.fr/res/Fire ... daTopR.png" par une autre, ou http, ou un fichier de ton disque dur
j'espère ça est clair !!

[Invité]

Jim:

Ça tiendra jusqu'à la prochaine version de FF, qui, de toute façon, présentera les menus différemment et où le pb disparaîtra

ben, non! là, c'est la 1.5 et ça affiche mal
Et

Code : Tout sélectionner

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

ne corrige pas

[ottomar]

ni en pixels, d'ailleurs...
par contre, je vois avec plaisir que les zones codes réduites en hauteur avec ton userContent se "défilent" à la souris dorénavant

[ottomar]

le menu de editConfigFiles avec bordure de menu, mise en évidence du menu actif, séparateurs transparents et.... l'icône de chromEdit (je n'avais qu'elle sous la main!)

Code : Tout sélectionner

/* bordure des menus pop-up*/
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;
  min-width: 1px !important;
  background-color: none !important; }

  /* Hover souris menu arrondi */
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; */

/* Séparateurs transparents (ou non en changeant le code couleur */
menuseparator {
margin: 5px 0px !important;
   border-top: none !important;
   border-bottom: none !important; }