texte des menus-item

[erickman]

salut , j'aimerais un petit coup de main svp
j'essaye sans relache de trouver le bon code
mais je commence a etre epuiser , ma
question est sur les textes des menus.item
(barre d'outils) donc
fichier , edition , affichage , historique ,
outils , aide ,

j'ai reussi a trouver pour le marque-pages

menuitem.bookmark-item
{
color: #FFDC17 !important;
font-weight: bold !important;
font-size: 11px !important;
}


mais pour les autres je bloque
j'ai essayer ceci:

menuitem.edit-item

pourtant je vois pas la difference a celui du marque-pages
qui fonctionne
menuitem.bookmark-item

et la

exemple: menuitem.help-item = ne fonctionne pas et tout les autres

cest pourtant du pareil au meme
merci de m'aider.

[Freddy]

salut, enfin re

Qu'est-ce que tu veux faire au juste ?
Tu veux que chacun soit modifier de façon différente, indépendamment les uns des autres, ou tu veux simplement modifier toute la barre de menu ?

Dans le dernier cas, ça fonctionne avec ça:

Code : Tout sélectionner

#main-menubar > menu

Sinon t'es sûr que ça marche le nom de ton sélecteur ?

[erickman]

salut, enfin re

Qu'est-ce que tu veux faire au juste ?
Tu veux que chacun soit modifier de façon différente, indépendamment les uns des autres, ou tu veux simplement modifier toute la barre de menu ?

Dans le dernier cas, ça fonctionne avec ça:

Code : Tout sélectionner

#main-menubar > menu

Sinon t'es sûr que ça marche le nom de ton sélecteur ?

merci de ton aide , oui toute , mais independement

comme ceci



le texte en jaune etc...

mais pour les autres je trouve pas le code

ici menu fichier, je ne peux pas changer la couleur texte etc....

[Freddy]

Pour ce qui est de l'utilisation de "DOM inspector" voir
http://www.geckozone.org/forum/viewtopi ... 21#p305754
et http://www.geckozone.org/forum/viewtopi ... 530#457530

Par exemple pour trouver les noms des entrées du menu "Fichier":
→ ouvres DOM inspector.
→ clic sur "File" → "inspect Chrome document" → puis sélectionne la première ligne.
→ clic sur le bouton encerclé en rouge sur ma capture.
→ clic sur "Fichier" de la barre des menus de FF.
→ reviens dans la fenêtre du DOM, tu atterris directement sur la ligne concernant le nom du bouton "Fichier"
→ en cliquant sur les ptites flèches tu peux dérouler l'arborescence et découvrir toutes les entrées du menu [y a pas les desserts ]
→ par exemple si tu veux connaître le nom du sélecteur pour l'entrée "Ouvrir une adresse" tu fais clic-droit sur l'entrée voulue (encadrée en vert) → "Sélecteur pour la copie" → et choisis dans ce cas l'id (nom précédé du #) c'est un nom unique donc plus précis.










ps: j'ai oublié dans l'autre sujet, pour le nom de la fenêtre sous la barre d'adresse:

Code : Tout sélectionner

/*------ fond popup barre d'adresse ------*/
#PopupAutoCompleteRichResult > richlistbox

[erickman]

merci freddy mais comme je le disait , lorsque j'ouvre dom
et que j'ouvre le fichier chrome browser
j'ai le message disant qu'il ne trouve pas le chrome browser

lorsque j'ai entrer dans le dossier chrome la 1ere fois ,
j'ai jeter le fichier chrome originale et j'ai commencer a editer un
new avec notepad++ et je l'ai renommer .chrome.css
je me souvien d'avoir vu l'originale avec 7 ou 8 ligne
mais meme apres avoir supprimer firefox , il ny avait toujour pas
l'originale , mais seulement les 2 autres , content

si tu aurait l'originale dom le detecterait
non , j'ai essayer d'ouvrir mon notepas++ avec dom , rien a faire...

merci de ton aide

[Freddy]

Je sais pas trop dans quoi tu t'es emmanché là, ni comment tu t'y prends, mais apparemment il te serait vraiment plus simple d'utiliser "Stylish".

De même pour l'utilisation de "DOM inspector", je ne vois pas ce que vient faire l'histoire de l'ouverture du fichier chrome browser...

Lis bien les liens que je t'ai indiqué pour savoir l'utiliser; y a juste à faire comme j'ai résumé juste après.

[erickman]

Je sais pas trop dans quoi tu t'es emmanché là, ni comment tu t'y prends, mais apparemment il te serait vraiment plus simple d'utiliser "Stylish".

De même pour l'utilisation de "DOM inspector", je ne vois pas ce que vient faire l'histoire de l'ouverture du fichier chrome browser...

Lis bien les liens que je t'ai indiqué pour savoir l'utiliser; y a juste à faire comme j'ai résumé juste après.

[/b]
merci freddy pour ton coup de main , j'ai suivi a la lettre tes explication
la ou je pige pas , ou sont les ( ) , !important;
que l'on trouve dans les code du css ,

et aussi dans dom , ca me dit pas
comment mettre les mots ,
exemple :
menu.bookmark-item
{
font-weight: bold !important;
color: #47fff3 !important;
}

ou peut etre ca

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


dans le fichier viewfile je ne voit rien de ca
je reussi a me rendre comme tu l'explique au nom du file et au id
et la je vois tout les titres du menu , mais comme je le dit
a part que je copy le nom par exemple
helpmenu , ensuite je vois pas item-menu ou peut importe
comment il doit ce placer dans le css , et cest la que je pige pas

comme tu vois sur cest image

[erickman]

Je sais pas trop dans quoi tu t'es emmanché là, ni comment tu t'y prends, mais apparemment il te serait vraiment plus simple d'utiliser "Stylish".

De même pour l'utilisation de "DOM inspector", je ne vois pas ce que vient faire l'histoire de l'ouverture du fichier chrome browser...

Lis bien les liens que je t'ai indiqué pour savoir l'utiliser; y a juste à faire comme j'ai résumé juste après.

[/b]
merci freddy pour ton coup de main , j'ai suivi a la lettre tes explication
la ou je pige pas , ou sont les ( ) , !important;
que l'on trouve dans les code du css ,

et aussi dans dom , ca me dit pas
comment mettre les mots ,
exemple :
menu.bookmark-item
{
font-weight: bold !important;
color: #47fff3 !important;
}

ou peut etre ca

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


dans le fichier viewfile je ne voit rien de ca
je reussi a me rendre comme tu l'explique au nom du file et au id
et la je vois tout les titres du menu , mais comme je le dit
a part que je copy le nom par exemple
helpmenu , ensuite je vois pas item-menu ou peut importe
comment il doit ce placer dans le css , et cest la que je pige pas

comme tu vois sur cest image

http://front1.monsterup.com/upload/1293721394220.jpg


http://front1.monsterup.com/upload/1293722567622.jpg

[Freddy]

merci freddy pour ton coup de main , j'ai suivi a la lettre tes explication
la ou je pige pas , ou sont les ( ) , !important;
que l'on trouve dans les code du css

je suis pas sûr d'avoir tout compris


Je pense que tu devrais te documenter pour mieux comprendre ce qu'est le css, les tutoriels sur ce sujet ne manquent pas, faut pas hésiter à les consulter, par exemple:

- un qui explique assez simplement => http://www.cssdebutant.com/syntaxe-css-heritage.html

- ou encore celui-ci => http://www.siteduzero.com/tutoriel-3-13 ... part_13663


Mais y en a plein d'autres, et qui vont ptêt plus dans le détails, par exemple:

- http://www.alsacreations.com/tuto/liste/2-css.html

- http://www.tuteurs.ens.fr/internet/web/html/css.html

- http://slaout.linux62.org/html_css/css.html

- http://fr.selfhtml.org/navigation/css.htm#bordures

- http://www.yoyodesign.org/doc/w3c/css1/

- ...


pour les propriétés:

- http://www.web-petit.com/ressources-css

- http://www.commentcamarche.net/contents ... perty.php3

- https://developer.mozilla.org/fr/R%C3%A ... 9rence_CSS

- https://developer.mozilla.org/Special:T ... anguage=fr

- ...


Ne t'occupes pas des exemples concernant le HTLM, c'est uniquement l'utilisation du CSS qui t'intéresse ici.

Le fait d'ajouter " !important " permet de donner la priorité à la nouvelle propriété que tu indiques par rapport à celle d'origine.

Ça fait de la lecture, mais arrivé un moment faut passer par là pour comprendre ce qu'on doit faire, pour pouvoir ensuite faire ce qu'on veut.
Parce que tout le travail que tu as fait ou copié, ne va plus forcément être bon pour la (très) prochaine version de Firefox 4, y aura pas tout à changer mais par exemple, certains noms de sélecteurs vont changer, ce qui veut dire apporter des modifications pour adapter tout ça.
Faut prendre son temps, y aller par étape s'il le faut, y a rien de sorcier, ça fait pas un an que je m'y suis mis.






Pour l'utilisation de "DOM inspector", dans le volet de droite il faut que tu restes avec l'option "DOM Node" (voir l'encadré en rouge sur ma capture).
Ensuite:
1- il faut continuer à cliquer sur les flèches pour dérouler l'arborescence jusqu'à voir apparaitre les noms qui t'intéressent.

2- en sélectionnant la ligne, tu peux voir dans le volet de droite que le même nom s'affiche, et pour t'aider tu peux remarquer que ce qui s'affiche réellement dans les menus que tu utilises couramment en temps normal, apparait dans la ligne "label" (voir encadré vert).

Une fois que tu as bien repéré ce que tu veux, tu fais un clic-bouton.droit sur la ligne sélectionnée

3- dans le menu qui s'ouvre, choisis "Sélecteur pour la copie"

4- clic-bouton.gauche pour copier le nom.

Ensuite t'as plus qu'a coller ce nom dans ton fichier et à toi d'inscrire les propriétés que tu souhaites lui donner; par exemple ici ça pourrait faire:

#menu_openHelp
{
color: yellow !important;
font-size: 12px !important;
}






Si tu veux connaitre toutes les propriétés qui existent et que tu peux modifier, cliques sur le bouton encerclé en rouge sur ma capture et choisis l'option "Computed Style".
Pour savoir a quoi elles correspondent, suffit de chercher par exemple dans les docs que je t'ai mis, mais c'est parfois plus efficace de faire directement une recherche, on peut tomber sur des ptites perles: https://developer.mozilla.org/fr/Utilis ... rad%C3%A9s

[erickman]

merci freddy pour ton coup de main , j'ai suivi a la lettre tes explication
la ou je pige pas , ou sont les ( ) , !important;
que l'on trouve dans les code du css

je suis pas sûr d'avoir tout compris


Je pense que tu devrais te documenter pour mieux comprendre ce qu'est le css, les tutoriels sur ce sujet ne manquent pas, faut pas hésiter à les consulter, par exemple:

- un qui explique assez simplement => http://www.cssdebutant.com/syntaxe-css-heritage.html

- ou encore celui-ci => http://www.siteduzero.com/tutoriel-3-13 ... part_13663


Mais y en a plein d'autres, et qui vont ptêt plus dans le détails, par exemple:

- http://www.alsacreations.com/tuto/liste/2-css.html

- http://www.tuteurs.ens.fr/internet/web/html/css.html

- http://slaout.linux62.org/html_css/css.html

- http://fr.selfhtml.org/navigation/css.htm#bordures

- http://www.yoyodesign.org/doc/w3c/css1/

- ...


pour les propriétés:

- http://www.web-petit.com/ressources-css

- http://www.commentcamarche.net/contents ... perty.php3

- https://developer.mozilla.org/fr/R%C3%A ... 9rence_CSS

- https://developer.mozilla.org/Special:T ... anguage=fr

- ...


Ne t'occupes pas des exemples concernant le HTLM, c'est uniquement l'utilisation du CSS qui t'intéresse ici.

Le fait d'ajouter " !important " permet de donner la priorité à la nouvelle propriété que tu indiques par rapport à celle d'origine.

Ça fait de la lecture, mais arrivé un moment faut passer par là pour comprendre ce qu'on doit faire, pour pouvoir ensuite faire ce qu'on veut.
Parce que tout le travail que tu as fait ou copié, ne va plus forcément être bon pour la (très) prochaine version de Firefox 4, y aura pas tout à changer mais par exemple, certains noms de sélecteurs vont changer, ce qui veut dire apporter des modifications pour adapter tout ça.
Faut prendre son temps, y aller par étape s'il le faut, y a rien de sorcier, ça fait pas un an que je m'y suis mis.






Pour l'utilisation de "DOM inspector", dans le volet de droite il faut que tu restes avec l'option "DOM Node" (voir l'encadré en rouge sur ma capture).
Ensuite:
1- il faut continuer à cliquer sur les flèches pour dérouler l'arborescence jusqu'à voir apparaitre les noms qui t'intéressent.

2- en sélectionnant la ligne, tu peux voir dans le volet de droite que le même nom s'affiche, et pour t'aider tu peux remarquer que ce qui s'affiche réellement dans les menus que tu utilises couramment en temps normal, apparait dans la ligne "label" (voir encadré vert).

Une fois que tu as bien repéré ce que tu veux, tu fais un clic-bouton.droit sur la ligne sélectionnée

3- dans le menu qui s'ouvre, choisis "Sélecteur pour la copie"

4- clic-bouton.gauche pour copier le nom.

Ensuite t'as plus qu'a coller ce nom dans ton fichier et à toi d'inscrire les propriétés que tu souhaites lui donner; par exemple ici ça pourrait faire:

#menu_openHelp
{
color: yellow !important;
font-size: 12px !important;
}






Si tu veux connaitre toutes les propriétés qui existent et que tu peux modifier, cliques sur le bouton encerclé en rouge sur ma capture et choisis l'option "Computed Style".
Pour savoir a quoi elles correspondent, suffit de chercher par exemple dans les docs que je t'ai mis, mais c'est parfois plus efficace de faire directement une recherche, on peut tomber sur des ptites perles: https://developer.mozilla.org/fr/Utilis ... rad%C3%A9s

merci pour les info , mais ce que tu me repond cest exactement ce que je fait
ce que je redit , cest comment les assembler cest code , j'ai la valeur et son id
mais , il y a la facon des mettre dans le css pour que ca roule
les . , - ( ) // important #
faut les mettre a la bonne place dans le css
dans dom il ny a pas ca
donc pour resumer ,
jai tout les nom menu / menuitem / openhelp /
mais cest trop facile , mais cest pas le code ca

maintenant il faut le mettre dans le css
je suis allez sur de nombreux site de debutant et ca revient au meme
plusieur site t'explique la base du html ou css , mais personne te dit comment
assembler tes valeur et id dans ton css , autrement dit il faudrait que je prennenet un cour
et ca minteresse pas , je veux juste changer la couleur et le bold des texte
dans le main menu , comme j'expliquait sur cette page quelqun a donner le

menuitem.bookmark-item
{
color: #FFDC17 !important;
font-weight: bold !important;
font-size: 14px !important;
font-family: vivian !important;
}

/* Dossier Des Marque-Pages */
menu.bookmark-item
{
font-weight: bold !important;
color: #47fff3 !important;
}




mais si on revient au help ca marche pas de la meme facon

jai pas arreter d'essayer

menuitem.openhelp-item
menuitem.openhelp
menuitem.menu.opemhelp
menuitem.openhelp.item(
etc

et je n'ai pas en fesant un clic droit (le selecteur)
merci encore

[Freddy]

Je comprend que se soit difficile de décrire ce qu'on veut demander quand on connait pas trop le sujet, mais si tu étais plus précis dans tes questions on pourrait répondre aussi plus précisément et ça t'éviterais de redire les choses.
Par exemple, tu aurais pu dire tout de suite que tu n'as pas l'option "Sélectionner pour la copie".

C'est bizarre pcq je ne l'ai pas non plus pour FF4, mais pour FF3.6 c'est bon
C'est vrai que c'est bien pratique mais y a moyen de faire sans.

Tu dis que ça t'intéresse pas de prendre un cour, mais tu demandes comment on structure un code css, ça doit pas être loin de revenir au même...
N'empêche que dans ce cas, moi je redis qu'en consultant les docs tu auras les réponses que tu cherches, je vois pas trop ce que je pourrais expliquer de mieux que ce qu'on y trouve.
Ottomar en parle dans le lien que j'ai mis pour "DOM inspector", et dans les autres docs aussi:

La syntaxe du CSS est très simple : sélecteur { propriété : valeur }
Exemple : body { background: #eeeeee; }

(voir ici: http://www.cssdebutant.com/syntaxe-css-heritage.html)

Remarque : On utilise un # pour les id et un "." pour les classes

(http://www.cssdebutant.com/les-id-css.html)


Pour racourcir, pour mieux comprendre les docs, on peut dire que "balise"="sélecteur"=les noms dans les colonnes de DOM-inspecteur, si ça peut t'aider à mieux comprendre ce qui est expliqué ici par exemple: http://www.siteduzero.com/tutoriel-3-13 ... #ss_part_2

Je rappelle aussi ceci:

Ne t'occupes pas des exemples concernant le HTLM, c'est uniquement l'utilisation du CSS qui t'intéresse ici.

Le fait d'ajouter " !important " permet de donner la priorité à la nouvelle propriété que tu indiques par rapport à celle d'origine.
Donc à ajouter à la suite de chaques propriétés.

Pour les propriétes et leurs valeurs concernant le texte, tu as déjà les liens.


Pour résumé par rapport à ce qui t'intéresse, comment construire un code css, il faut donc avoir cette forme:

sélecteur
{ propriété : valeur }


avec pour "sélecteur", si son nom dans la fenêtre de DOM-inspector est situé dans la colonne:
•"nodeName", s'écrira alors → sélecteur
exemples: menu ou menuitem

•"id", s'écrira → #sélecteur
ex: #helpMenu

•"class" → .sélecteur
ex: .menubar-text


Tu peux aussi te servir des infos du volet de droite pour nommé un sélecteur en utilisant le "sélecteur d'attribut" et une de ses valeurs distinctives, par exemple s'il n'est pas de type "id" et que tu as besoin de sélectionner un élément particulier.
Exemple, si tu veux uniquement modifier l'entrée "Etiquettes récentes" dans le menu "Marque-pages", ça donnerait:
menu[label="Étiquettes récentes"]


Si tu préfères copier les noms, ottomar l'explique aussi dans son lien http://www.geckozone.org/forum/viewtopi ... 3c#p305754 ,en sachant que l'entrée "Ouvrir" est remplacée par "Edit".


Pour la syntaxe des regroupements de sélecteurs, des sélecteurs enfants, descendants, d'attribut, ... voir ici: http://slaout.linux62.org/html_css/css.html#selecteurs
ou http://www.yoyodesign.org/doc/w3c/css2/selector.html
ou http://fr.wikibooks.org/wiki/Le_langage ... A9lecteurs



Si ça peut être encore plus clair avec des exemples concrets:
(on est d'accord, tu choisis ce que tu veux comme propriétés entre les {...}, c'est qu'un exemple)
(les espaces et les retours à la ligne ne sont pas obligatoire, mais ça permet d'être plus clair à lire)

►pour avoir, dans la barre des menus, tous tes menus qui s'affichent de la même façon:

Code : Tout sélectionner

#main-menubar > menu > menupopup *
{
color: red !important;
font-size: 14px !important;
}

►pour avoir plusieurs menus de style identique et certain différent:
(ici par exemple, le menu de "Fichier" - "Editer" - "Affichage" seront pareils et "Marque-pages" aura un autre style)

Code : Tout sélectionner

#file-menu > menupopup * ,
#edit-menu > menupopup * ,
#view-menu > menupopup
{
color: green !important;
font-size: 14px !important;
}


#bookmarksMenu > menupopup *  
{
color: red !important;
font-size: 13px !important; 
font-weight: bold !important;
}

et par rapport à l'utilisation des "sélecteurs d'attribut", pour l'exemple du menu de "Marque-pages" ça pourrait aussi avoir le nom:

Code : Tout sélectionner

menu[label="Marque-pages"] > menupopup *

ou encore

Code : Tout sélectionner

menu[id="bookmarksMenu"] > menupopup *

pareil que

Code : Tout sélectionner

#bookmarksMenu > menupopup *

on peut même encore l'écrire aussi

Code : Tout sélectionner

#bookmarksMenuPopup menuitem,
#bookmarksMenuPopup menu

comme ça pour reprendre mon exemple plus haut pour différencier "Etiquettes récentes" j'utilise ensuite le code

Code : Tout sélectionner

#bookmarksMenuPopup menu[label="Étiquettes récentes"]

ça évite dans ce cas de mettre à la place

Code : Tout sélectionner

#bookmarksMenuPopup > menuitem:first-child + menuitem + menu + menuitem + menuitem + menuseparator + menu + menuseparator + menu

Avec des beaux commentaires en bonus ça donnerait par exemple

Code : Tout sélectionner

/*====== menu "Marque-pages" ======*/

/*** pour tout ***/
#bookmarksMenuPopup menuitem,
#bookmarksMenuPopup menu
{
color: red !important;
font-size: 13px !important;
font-weight: bold !important;
}


/*** pour "Etiquettes récentes" ***/
#bookmarksMenuPopup menu[label="Étiquettes récentes"]
{ color: blue !important; }

Voilà, j'espère que ça va t'aider, et Bonne Année

[erickman]

Je comprend que se soit difficile de décrire ce qu'on veut demander quand on connait pas trop le sujet, mais si tu étais plus précis dans tes questions on pourrait répondre aussi plus précisément et ça t'éviterais de redire les choses.
Par exemple, tu aurais pu dire tout de suite que tu n'as pas l'option "Sélectionner pour la copie".

C'est bizarre pcq je ne l'ai pas non plus pour FF4, mais pour FF3.6 c'est bon
C'est vrai que c'est bien pratique mais y a moyen de faire sans.

Tu dis que ça t'intéresse pas de prendre un cour, mais tu demandes comment on structure un code css, ça doit pas être loin de revenir au même...
N'empêche que dans ce cas, moi je redis qu'en consultant les docs tu auras les réponses que tu cherches, je vois pas trop ce que je pourrais expliquer de mieux que ce qu'on y trouve.
Ottomar en parle dans le lien que j'ai mis pour "DOM inspector", et dans les autres docs aussi:

La syntaxe du CSS est très simple : sélecteur { propriété : valeur }
Exemple : body { background: #eeeeee; }

(voir ici: http://www.cssdebutant.com/syntaxe-css-heritage.html)

Remarque : On utilise un # pour les id et un "." pour les classes

(http://www.cssdebutant.com/les-id-css.html)


Pour racourcir, pour mieux comprendre les docs, on peut dire que "balise"="sélecteur"=les noms dans les colonnes de DOM-inspecteur, si ça peut t'aider à mieux comprendre ce qui est expliqué ici par exemple: http://www.siteduzero.com/tutoriel-3-13 ... #ss_part_2

Je rappelle aussi ceci:

Ne t'occupes pas des exemples concernant le HTLM, c'est uniquement l'utilisation du CSS qui t'intéresse ici.

Le fait d'ajouter " !important " permet de donner la priorité à la nouvelle propriété que tu indiques par rapport à celle d'origine.
Donc à ajouter à la suite de chaques propriétés.

Pour les propriétes et leurs valeurs concernant le texte, tu as déjà les liens.


Pour résumé par rapport à ce qui t'intéresse, comment construire un code css, il faut donc avoir cette forme:

sélecteur
{ propriété : valeur }


avec pour "sélecteur", si son nom dans la fenêtre de DOM-inspector est situé dans la colonne:
•"nodeName", s'écrira alors → sélecteur
exemples: menu ou menuitem

•"id", s'écrira → #sélecteur
ex: #helpMenu

•"class" → .sélecteur
ex: .menubar-text


Tu peux aussi te servir des infos du volet de droite pour nommé un sélecteur en utilisant le "sélecteur d'attribut" et une de ses valeurs distinctives, par exemple s'il n'est pas de type "id" et que tu as besoin de sélectionner un élément particulier.
Exemple, si tu veux uniquement modifier l'entrée "Etiquettes récentes" dans le menu "Marque-pages", ça donnerait:
menu[label="Étiquettes récentes"]


Si tu préfères copier les noms, ottomar l'explique aussi dans son lien http://www.geckozone.org/forum/viewtopi ... 3c#p305754 ,en sachant que l'entrée "Ouvrir" est remplacée par "Edit".


Pour la syntaxe des regroupements de sélecteurs, des sélecteurs enfants, descendants, d'attribut, ... voir ici: http://slaout.linux62.org/html_css/css.html#selecteurs
ou http://www.yoyodesign.org/doc/w3c/css2/selector.html
ou http://fr.wikibooks.org/wiki/Le_langage ... A9lecteurs



Si ça peut être encore plus clair avec des exemples concrets:
(on est d'accord, tu choisis ce que tu veux comme propriétés entre les {...}, c'est qu'un exemple)
(les espaces et les retours à la ligne ne sont pas obligatoire, mais ça permet d'être plus clair à lire)

►pour avoir, dans la barre des menus, tous tes menus qui s'affichent de la même façon:

Code : Tout sélectionner

#main-menubar > menu > menupopup *
{
color: red !important;
font-size: 14px !important;
}

►pour avoir plusieurs menus de style identique et certain différent:
(ici par exemple, le menu de "Fichier" - "Editer" - "Affichage" seront pareils et "Marque-pages" aura un autre style)

Code : Tout sélectionner

#file-menu > menupopup * ,
#edit-menu > menupopup * ,
#view-menu > menupopup
{
color: green !important;
font-size: 14px !important;
}


#bookmarksMenu > menupopup *  
{
color: red !important;
font-size: 13px !important; 
font-weight: bold !important;
}

et par rapport à l'utilisation des "sélecteurs d'attribut", pour l'exemple du menu de "Marque-pages" ça pourrait aussi avoir le nom:

Code : Tout sélectionner

menu[label="Marque-pages"] > menupopup *

ou encore

Code : Tout sélectionner

menu[id="bookmarksMenu"] > menupopup *

pareil que

Code : Tout sélectionner

#bookmarksMenu > menupopup *

on peut même encore l'écrire aussi

Code : Tout sélectionner

#bookmarksMenuPopup menuitem,
#bookmarksMenuPopup menu

comme ça pour reprendre mon exemple plus haut pour différencier "Etiquettes récentes" j'utilise ensuite le code

Code : Tout sélectionner

#bookmarksMenuPopup menu[label="Étiquettes récentes"]

ça évite dans ce cas de mettre à la place

Code : Tout sélectionner

#bookmarksMenuPopup > menuitem:first-child + menuitem + menu + menuitem + menuitem + menuseparator + menu + menuseparator + menu

Avec des beaux commentaires en bonus ça donnerait par exemple

Code : Tout sélectionner

/*====== menu "Marque-pages" ======*/

/*** pour tout ***/
#bookmarksMenuPopup menuitem,
#bookmarksMenuPopup menu
{
color: red !important;
font-size: 13px !important;
font-weight: bold !important;
}


/*** pour "Etiquettes récentes" ***/
#bookmarksMenuPopup menu[label="Étiquettes récentes"]
{ color: blue !important; }

Voilà, j'espère que ça va t'aider, et Bonne Année

bonne annnee a toi aussi , je pense avec tous cest exemple que tu me donne et les autres tutos, ca devrait etre tres clair pour avancer , il me reste juste a mettre du mien , donc un enorme merci pour tout ton aide, ... a une autre fois , salut

[erickman]

Je comprend que se soit difficile de décrire ce qu'on veut demander quand on connait pas trop le sujet, mais si tu étais plus précis dans tes questions on pourrait répondre aussi plus précisément et ça t'éviterais de redire les choses.
Par exemple, tu aurais pu dire tout de suite que tu n'as pas l'option "Sélectionner pour la copie".

C'est bizarre pcq je ne l'ai pas non plus pour FF4, mais pour FF3.6 c'est bon
C'est vrai que c'est bien pratique mais y a moyen de faire sans.

Tu dis que ça t'intéresse pas de prendre un cour, mais tu demandes comment on structure un code css, ça doit pas être loin de revenir au même...
N'empêche que dans ce cas, moi je redis qu'en consultant les docs tu auras les réponses que tu cherches, je vois pas trop ce que je pourrais expliquer de mieux que ce qu'on y trouve.
Ottomar en parle dans le lien que j'ai mis pour "DOM inspector", et dans les autres docs aussi:

La syntaxe du CSS est très simple : sélecteur { propriété : valeur }
Exemple : body { background: #eeeeee; }

(voir ici: http://www.cssdebutant.com/syntaxe-css-heritage.html)

Remarque : On utilise un # pour les id et un "." pour les classes

(http://www.cssdebutant.com/les-id-css.html)


Pour racourcir, pour mieux comprendre les docs, on peut dire que "balise"="sélecteur"=les noms dans les colonnes de DOM-inspecteur, si ça peut t'aider à mieux comprendre ce qui est expliqué ici par exemple: http://www.siteduzero.com/tutoriel-3-13 ... #ss_part_2

Je rappelle aussi ceci:

Ne t'occupes pas des exemples concernant le HTLM, c'est uniquement l'utilisation du CSS qui t'intéresse ici.

Le fait d'ajouter " !important " permet de donner la priorité à la nouvelle propriété que tu indiques par rapport à celle d'origine.
Donc à ajouter à la suite de chaques propriétés.

Pour les propriétes et leurs valeurs concernant le texte, tu as déjà les liens.


Pour résumé par rapport à ce qui t'intéresse, comment construire un code css, il faut donc avoir cette forme:

sélecteur
{ propriété : valeur }


avec pour "sélecteur", si son nom dans la fenêtre de DOM-inspector est situé dans la colonne:
•"nodeName", s'écrira alors → sélecteur
exemples: menu ou menuitem

•"id", s'écrira → #sélecteur
ex: #helpMenu

•"class" → .sélecteur
ex: .menubar-text


Tu peux aussi te servir des infos du volet de droite pour nommé un sélecteur en utilisant le "sélecteur d'attribut" et une de ses valeurs distinctives, par exemple s'il n'est pas de type "id" et que tu as besoin de sélectionner un élément particulier.
Exemple, si tu veux uniquement modifier l'entrée "Etiquettes récentes" dans le menu "Marque-pages", ça donnerait:
menu[label="Étiquettes récentes"]


Si tu préfères copier les noms, ottomar l'explique aussi dans son lien http://www.geckozone.org/forum/viewtopi ... 3c#p305754 ,en sachant que l'entrée "Ouvrir" est remplacée par "Edit".


Pour la syntaxe des regroupements de sélecteurs, des sélecteurs enfants, descendants, d'attribut, ... voir ici: http://slaout.linux62.org/html_css/css.html#selecteurs
ou http://www.yoyodesign.org/doc/w3c/css2/selector.html
ou http://fr.wikibooks.org/wiki/Le_langage ... A9lecteurs



Si ça peut être encore plus clair avec des exemples concrets:
(on est d'accord, tu choisis ce que tu veux comme propriétés entre les {...}, c'est qu'un exemple)
(les espaces et les retours à la ligne ne sont pas obligatoire, mais ça permet d'être plus clair à lire)

►pour avoir, dans la barre des menus, tous tes menus qui s'affichent de la même façon:

Code : Tout sélectionner

#main-menubar > menu > menupopup *
{
color: red !important;
font-size: 14px !important;
}

►pour avoir plusieurs menus de style identique et certain différent:
(ici par exemple, le menu de "Fichier" - "Editer" - "Affichage" seront pareils et "Marque-pages" aura un autre style)

Code : Tout sélectionner

#file-menu > menupopup * ,
#edit-menu > menupopup * ,
#view-menu > menupopup
{
color: green !important;
font-size: 14px !important;
}


#bookmarksMenu > menupopup *  
{
color: red !important;
font-size: 13px !important; 
font-weight: bold !important;
}

et par rapport à l'utilisation des "sélecteurs d'attribut", pour l'exemple du menu de "Marque-pages" ça pourrait aussi avoir le nom:

Code : Tout sélectionner

menu[label="Marque-pages"] > menupopup *

ou encore

Code : Tout sélectionner

menu[id="bookmarksMenu"] > menupopup *

pareil que

Code : Tout sélectionner

#bookmarksMenu > menupopup *

on peut même encore l'écrire aussi

Code : Tout sélectionner

#bookmarksMenuPopup menuitem,
#bookmarksMenuPopup menu

comme ça pour reprendre mon exemple plus haut pour différencier "Etiquettes récentes" j'utilise ensuite le code

Code : Tout sélectionner

#bookmarksMenuPopup menu[label="Étiquettes récentes"]

ça évite dans ce cas de mettre à la place

Code : Tout sélectionner

#bookmarksMenuPopup > menuitem:first-child + menuitem + menu + menuitem + menuitem + menuseparator + menu + menuseparator + menu

Avec des beaux commentaires en bonus ça donnerait par exemple

Code : Tout sélectionner

/*====== menu "Marque-pages" ======*/

/*** pour tout ***/
#bookmarksMenuPopup menuitem,
#bookmarksMenuPopup menu
{
color: red !important;
font-size: 13px !important;
font-weight: bold !important;
}


/*** pour "Etiquettes récentes" ***/
#bookmarksMenuPopup menu[label="Étiquettes récentes"]
{ color: blue !important; }

Voilà, j'espère que ça va t'aider, et Bonne Année

je croit ce qui ma tromper cest davoir des le debut copiere des codee
daten de 2008 et qui on fontionner comme pour le marque page
celui la
/* Menu Des Marque-Pages */
/* Menu Des Marque-Pages */
menuitem.bookmark-item
{
color: #FFDC17 !important;
font-weight: bold !important;
font-size: 14px !important;
font-family: vivian !important;
}

/* Dossier Des Marque-Pages */
menu.bookmark-item
{
font-weight: bold !important;
color: #47fff3 !important;
}

et tu veras qil est different du tien , dapres moi comme tu le disait ,
firefox change d'une verion a l'autre leur code scrypt , et en me fiant
a ceux ci , je bloquait , tandis quau tien , je le vois plus clairement
dans dom inspect : #bookmarksMenu > menupopup *
{
color: red !important;
font-size: 13px !important;
font-weight: bold !important;
}

croit moi le code que jai trouver du marque page
je lai jamais vu de cette maniere en tant qur Id , class et valeur
comme ceci : menuitem.bookmark-item

mais comme le tien ici: #bookmarksMenuPopup menuitem,
la oui ....

bonne annnee a toi aussi , je pense avec tous cest exemple que tu me donne et les autres tutos, ca devrait etre tres clair pour avancer , il me reste juste a mettre du mien , donc un enorme merci pour tout ton aide, ... a une autre fois , salut

[jpj]

Bonjour,

[Modération] erickman, pourrais-tu cesser de mettre tout tes textes en citation. Tes messages sont quasi incompréhensibles.

Tu disposes de plusieurs outils.
Le bouton "CITER" en haut à droite du message qui permets de le citer. Il est tout à fait possible d'éditer cette citation pour n'en conserver qu'une partie.
Le bouton "RÉPONDRE" sert à répondre au message précédent.
Enfin, tu disposes des balises [quote][/quote] qui te permet d'inclure une citation (par exemple avec un copier-coller). Tu peux même éditer cette balise pour citer un nom ([quote="nom"][/quote]).

[erickman]

thanks freddy