personnaliser Firefox avec le userChrome.css

[ottomar]

bon...

inspecteur dom

c'est pas un gadget !
le dom, c'est l'autopsie garantie de tout firefox : l'interface utilisateur et la page web que le même utilisateur utilise (ben, oui...) Ce qui intéresse ici, c'est l'interface utilisateur , l'apparence de votre firefox

pré-requis : firefox

pour l'ouvrir (le dom) Ctrl+Maj+i

★ utilisation la plus simple pour trouver et régler l'élément que vous voulez personnaliser

• dans le menu fichier du dom, sélectionnez la fenêtre principale
> menu Fichier > Examiner une fenêtre > Fenêtre firefox


• dans le menu rechercher, cochez > sélectionner l'élément par un clic


• supposons que vous vouliez en savoir plus sur le bouton maison , mettez en avant la fenêtre firefox sans cliquer dedans !important ou par votre barre des tâches, ou en réduisant le dom, ou en cliquant sur la barre de titre de ff
c'est bon ? cliquez sur votre bouton home, miracle, il clignote encadré de rouge ! le dom a compris donc ce que vous cherchez
>

• retournez dans la fenêtre du dom ! miracle ! votre home-button est sélectionné, surbrillé, cancoillotté, une 'tite genouille sur l'image

la fenêtre est peut-être un peu réduite, mais vous pigez déjà que votre bouton maison est un toolbarbutton (générique pour les boutons de barre d'outils pour le comportement général) que son id (son nom) est home-button, donc qu'il est unique (puisque id), qu'il s'écrira dans le code css #home-button et accessoirement, il fait partie de la class toolbarbutton-1 qui régit certains comportements particuliers à cette classe

• dépliez le volet droit du dom, par défaut, celui-ci s'ouvre sur 'objet DOM node' qui vous redonne les caractéristiques principales du noeud, ça s'appelle un noeud, oui, un noeud comme dans noeud. vous y retrouver l'id, la class, les actions javascripts, et d'autres bla-bla, le tout provenant du xul, pas des css


• il y a des codes id ou class qui sont bien difficiles à retenir, pour les copier, clic à droite dans le volet noeud sur l'id ou la classe > ouvrir (pas sur copier ! qui copie tout le code se rapportant à l'élément)


une 'tite boite d'édition s'ouvre, là vous le copiez gentîment


• revenons à nos css, cliquez sur le petit basculeur à la gauche de 'objet DOM node'

dans le miraculeux menu qui apparait
-box model donne les caractérisques de la fenêtre
-XBL Bindings donne (je sniffe) le 'lien' moteur du bouton
-javascript object c'est trop intelligent pour moi
-CSS Style rules
-Computed style

• CSS Style rules

donne la provenance des fichiers qui règlent les css appliqués à l'élément (le home-bouton souvenez-vous...)
-dans la colonne 'règles' la partie de l'élément à laquelle il s'applique (l'id, la class, tout (*), le générique (appelons ça comme ça)
-dans la colonne 'fichier' où est stocké la règle dans le programme, ben tiens ottomar l'a mis les pieds là-dedans : on retrouve le userChrome.css et son adresse et le numèro de ligne
-dans la partie basse, la propriété qui a été maltraitée ou pour les autres fichiers, ce qu'ils règlent (c'est clear ?)
tout ça, ça donne déjà un bon aperçu de ce sur quoi vous pouvez agir
mais pour tout savoir...

• Computed style

là, vous avez tout tout tout, même ce qui est computé par le xul,
donc pour action, réaction, mieux vaut s'en tenir à CSS styles rules


★ maintenant amusez-vous à cliquer dans le volet gauche sur les petites flèches pour déplier l'arborescence du dom


vous allez comprendre (enfin) comment est construit firefox de contenant en contenus
quelques petites précisions

-si vous vous attaquez à un élément à id (#) , pas besoin de déclarer de contenant donc pas (quoiqu'il y ait des interférences en particulier avec certaines fenêtres (voir mon bouton help dans le dom qui vient de mon menu principal, alors qu'en principe l'élément est unique )
pas :
#navigator-toolbox #toolbar-menubar #home-button
simplement
#home-button

-si vous vous attaquez à une classe • (marquée par un point)
soit vous visez tous les éléments de cette classe, dans ce cas juste déclarer la classe
exemple :

Code : Tout sélectionner

.toolbarbutton-icon
{
opacity: 0.5 !important;
}

soit vous visez un élément particulier, déclarez l'id

Code : Tout sélectionner

#home-button .toolbarbutton-icon
{
opacity: 0.5 !important;
}

soit vous visez des éléments dans un contenant plus large, par exemple uniquement les boutons de la barre de nav, vous n'avez pas besoin de tous les passer à la moulinette

Code : Tout sélectionner

#nav-bar .toolbarbutton-icon
{
opacity: 0.5 !important;
}

les propriétés css : http://wiki.media-box.net/documentation/css
le plus gros est dégrossi, il n'est plus gros, donc !
Pas trop de 'que' ??
... juste pour faire avancer le schmilblik !


Message envoyé avec : Mozilla/5.0 (X11; U; Linux i686; fr; rv:1.8.1b1) Gecko/20060710 Firefox/2.0b1

[superform]

@ottomar

@invité
ben oui, ben non, c'est quand le throbber tourne, que superform veut son curseur qui tourne, ben... donc change ton curseur wait de windows et ça tournera manège

c'était moi l'invité...
le souci est que je voudrais un curseur personnalisé, sans changer le curseur wait de tous mes utilisateurs...

sinon oui c'est ce que j'aurais fait...

je vais de ce pas poser la question dans le sujet usercontent, au cas où...

merci pour tout

Message envoyé avec : Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; Maxthon; SV1; .NET CLR 1.1.4322)

[Invité]

Ottomar>Excellent !!
J'allais justement te demander comment faire pour trouver les class et les id des éléments de la fenètre principale ^^

Merci à toi !!


Au fait, le lien dans ton premier post (celui qui renvoit vers ton tuto tout beau sur DOM Inspector) est incorrect ^^
Il revoit vers le post 305753 (qui n'existe pas) au lieu du post 305754 ^^

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.0.6) Gecko/20060728 Firefox/1.5.0.6

[kaihansen]

Merci Ottomar,

Avec çà, je commence à piger certains codes (car franchement je me demandais de où çà sortait).

a+

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.0.1) Gecko/20060111 Firefox/1.5.0.1

[epsy]

Par ma burette de cancoillotte ! rien qu'à voir sa tronche au codé qu'on sursaute tellement ça peut pas marcher !
Quel est le baudet qui a pondu ça ? je devais être pour une fois beaucoup désordonné mental (© Olivia Ruiz) ce jour là !
m'enfin... j'arrive pas à comprendre pourquoi ça mijotait si bien, c'est évident qu'il faut des indic de dimension !

Code : Tout sélectionner

.tabbrowser-tabs > hbox
{
display: block;
}
tabbrowser tab
{
-moz-appearance: none !important;
display: -moz-box !important;
min-width: 24px !important;
max-width: 24px !important; 
margin-left: 4px !important;
margin-bottom: 0px !important;
} 

euh, beeennnn, ça marche toujours pas

Message envoyé avec : Mozilla/5.0 (X11; U; Linux i686; fr-FR; rv:1.8.0.4) Gecko/20060719 Firefox/1.5.0.4
edit: arf j'en veux pas de marge

[ottomar]

purée... ça marche au poil dans la 1.5.0.6 (je n'ai que ça dans le userChrome) tu n'aurais pas quelque chose après qui contrarierait la chose ?
euhhh... essaie sur un profil vierge

pour crér un nouveau profil > menu démarrer > éxécuter...

☎Edith
l'adresse du machin sur DOM Inspecteur est rectifiée :
http://www.geckozone.org/forum/viewtopi ... 754#305754

si vous voulez vous y retrouvez dans ces pages, commencez par la page... 1 (index ?) du post-it, c'est à jour !



Message envoyé avec : Mozilla/5.0 (X11; U; Linux i686; fr; rv:1.8.0.6) Gecko/20060728 Firefox/1.5.0.6

[epsy]

avec le theme par défaut ça passe

ci-joint mon chrome://global/skin/tabbox.css

Code : Tout sélectionner

@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
 
/* ::::: tabpanels ::::: */

tabpanels {
  -moz-appearance: none;
  border-right: 1px solid;
  border-left: 1px solid;
  border-bottom: 1px solid;  
  border-top: 1px solid;
  -moz-border-top-colors: #a3a3a3 ;
  -moz-border-right-colors: #a3a3a3 ;
  -moz-border-bottom-colors: #a3a3a3 ;
  -moz-border-left-colors: #a3a3a3 ;
  background-color: #ddd;
  color: #000000;
}

/* ::::: tab ::::: */

tab {
  -moz-appearance: none;
  padding: 1px 6px 2px 6px;
  border-top: 1px  solid;
  border-right: 1px solid;
  border-left: 1px solid;
  -moz-border-top-colors: #a3a3a3;
  -moz-border-right-colors: #a3a3a3;
  -moz-border-left-colors: transparent;
  background-color: #ccc;
  color: #707070;
}

.tab-text {
  margin: 0 !important;
}

tab[last-tab="true"] {
}

tab[first-tab="true"] {
  -moz-border-left-colors: #a3a3a3 ;
}

tab[beforeselected="true"] {
  /* border-right: none; */
}

tab[afterselected="true"] {
  /* border-left: none; */
}

tab[selected="true"] {
  background-color : #fff !important;
  color: #191919;
  /* Q FIX FOR HOVER-BLEED SEE TABBOX.CSS */
  /* -moz-border-left-colors: #fff !important; */
}

tab:hover {
  background-color: #dbdbdb;
  color: #191919;
}

tab[first-tab="true"][selected="true"] {
}

.tab-bottom {
}

.tab-bottom[selected="true"] {
}

.tab-bottom[beforeselected="true"] {
}

.tab-bottom[afterselected="true"] {
}

/* ::::: tabs ::::: */

/* 
.tabs-left,
.tabs-right {
  -moz-border-bottom-colors: #0000FF #FFFFFF;
}
*/
 

Message envoyé avec : Mozilla/5.0 (X11; U; Linux i686; fr-FR; rv:1.8.0.4) Gecko/20060719 Firefox/1.5.0.4

[pirlouy]

Bravo Ottomar pour le tutoriel sur le Dom Inspector.

2 p'tits trucs à rajouter:
- L'extension Inspect This, ou bien un peu de javascript ajouté au userchrome.js permet d'avoir directement accès au Dom inspector à l'endroit où on a cliqué... C'est plus simple...
- Sinon, j'ai cru lire que tu utilisais le userchrome.css ? Tu n'aimes pas Stylish ?

[Yoko]

tu parle de usercontent.css non?

[Jim]

Teuh, teuh, teuh... Ce n'est pas avec ça que tu échaperras aux diverses requetes tordues...

Quoique si peut-être... Certainement

Bravo et merci pour ce cours


Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.0.6) Gecko/20060728 Firefox/1.5.0.6

[pirlouy]

@Yoko: non non, je parle bien du userchrome.js.

[ottomar]

flexions à tous

les mules braient, les pingouins aussi, les manchots par contre (?) balladent leur oeuf

@epsy manquerait pas quelques points !important dans ton code ?
@pirlouy vrai que inspectthis est une petite extension utile (dans la page) ciblée plus userContent ou stylish ou uChrome.js (dont, non, je me sers pas) : un chapitre 'panda qui tête' et un chapitre 'gmail' dans le userContent, pour le reste adblock, flashblock. Je vois venir le Gérard et son noscript, ben... Edith peut pas l'avaler, moi moins, mais aussi)
@Jim non, je ne tousse pas, tant que ça me détend... ce qui me détend pas, c'est de voir que la barre de recherche de la 2.0b2 n'est pas la même que celle de la 2.0b1, donc j'arrête mes conneries jusqu'à la définitive et le blabla gadget vais vous l'étendre que j'aurai plus rien à faire qu'à montrer du doigt le lien
@pirlouy, aussi webdeveloper et merdasse, le nom ne me revient pas, le truc avec la pipette qui se promène !
@epsy les thèmes, ça pollue ! certains collent comme la poisse

bon, une 'tite pipette de poulsard avec une goutte de violette ?

Message envoyé avec : Mozilla/5.0 (X11; U; Linux i686; fr; rv:1.8.1b2) Gecko/20060821 Firefox/2.0b2

[Zhorg]

Le tuto sur le dom est non seulement exemplaire mais également unique en la matière... On est quand même veinard de l'avoir notre ottomar!

[ottomar]

merci, mais n'en jetez plus, merci

le plus rigolo est que je n'ai vraiment, mais vraiment pas la réputation d'être un bon pédagopode (demandez à Edith...) plutôt du genre impatient, quoi !

non, non, pas unique, parce que le DOM, c'est avant tout un super-outil de développement de pages web :
tiens : la page du forum, clic à droite sur websitenav > supprimer et plus de websitenav ! coucou, léou !?


deux lectures courtes et faciles à digérer pour cet usage page
le petit guide d'initiation : http://mozfr.mozdev.org/docs/startpage- ... guide.html
avec l'explication entre autre de 'box model'
et Pourquoi j'aime le DOM Inspector (Tristan Nitot) : http://standblog.org/?p=93112784

Message envoyé avec : Mozilla/5.0 (X11; U; Linux i686; fr; rv:1.8.1b2) Gecko/20060821 Firefox/2.0b2

pour éviter la hernie du boyau de la tête :
◐ utilisez le DOM-Inspecteur : le machin qui ressemble à un tuto est là : ☻
◑ sautez sur la page index des trucs qui est là : 1

la barre de recherche google : de plus en plus performante, le résultat de l'opération (fonction calculatrice) en suggestion de réponse !

[Acharnatus]

Arf, une fois n'est pas coutume, juste un mot pour remercier tous les participants de ce post qui m'ont été d'un grand secours dans mes recherches, et la personnalisation de mon user chrome.... et un gros spécial cancoillotage a MONSIEUR Ottomar, qui nous offre a tous de tres bons cours sur l'art et la maniere du CSS... et hop, une lichette d'arboué histoire de faire glisser tout ca!
Apres je m'attaque aux autres usercontent, prefs, et user.... va y avoir du boulot, et encors tout plein de chose a apprendre j'espere. Merci aussi pour votre patience.... bref... MERCI!!!!!!

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.8.0.6) Gecko/20060728 Firefox/1.5.0.6