personnaliser Firefox avec le userChrome.css

[ottomar]

salut! jolie, la rouge! en fait, pour la belle bleue, tu as juste mis ta patte sur la zone de texte de la barre #urlbar .textbox-input-box, alors que pour les autres, c'est le 'container' que tu as ciblé. essaie (donc) avec autocomplete-textbox-container

[j,b]

Bonsoir ottomar,tou(te)s

C'est beaucoups mieux...


un grand Merci et milles mercis pour les diverses astuces données.

bonne soirée

[lowmax]

Bonsoir !

Dans le même genre, ma barre URL après modifications présente une anomalie avec un lien sécurisé avec flux, cela se passe uniquement sur la gauche de la barre. Auriez vous une idée ?
Merci d’avance pour vos réponses.








/* coins arrondis */
#urlbar-container,
#urlbar {
background : transparent url('bar.png') no-repeat center left !important;
color : #000 !important;
}

#urlbar-container,
#urlbar {
height : 22px !important;
padding : 0 !important;
margin : 1px !important;
}

#urlbar {
background-position : right !important;
-moz-appearance : none !important;
border : 0px solid !important;
margin : 0px !important;
padding : 0px 0px 0px 5px !important;
height : 22px !important;
}

#urlbar > .autocomplete-history-dropmarker {
-moz-appearance : none !important;
margin : 0 !important;
padding : 2px !important;
border : 0px solid !important;
background-color : transparent !important;
background-image : none !important;
}



#urlbar .textbox-input-box {
background : transparent url('barmid.png') repeat-x !important;
height : 22px !important;
color: rgb(255,255,255) !important;
}

#urlbar .textbox-input-box {
margin : 0 !important;
padding : 1px 3px !important;
}


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

[ottomar]

salut, lowmax
si tu y regardes bien, c'est la .textbox-input-box qui est un peu décalée vers la gauche, et vu qu'elle entraine avec elle le cadre...
tu dois pouvoir arranger avec un margin-left dessus, rajoute en dessous de ton margin: 0
margin-left: ?px !important;

[lowmax]

Merci Ottomar ! c'est tout beau !

Au lieu de me précipiter sur le forum j'aurais pu réfléchir un peu plus , j'avoue !

Bonne journée a toi.

[ottomar]

rapido, parce qu'il faut aussi comprendre (ou à peu près) ce qu'on fait! donc syntaxe des css

un sélecteur: l'élèment auquel s'applique le code
une déclaration: la propriété et la valeur de propriété que l'on veut donner à l'élément

le sélecteur : on peut appliquer la même propriété à plusieurs sélecteurs, auquel cas, ils sont séparés par une virgule
attention pas de virgule à la fin, juste avant la déclaration

Code : Tout sélectionner

selecteur1, selecteur2 { .... }

la déclaration : encadrée par une embrasse ouvrante '{' et... une fermante! '}', elle commence toujours par le nom de la propriété, puis ':' (2points) et enfin la valeur de la propriété

Code : Tout sélectionner

{propriété: valeur}

on peut appliquer plusieurs propriétés à un ou plusieurs sélecteurs, auquel cas les déclarations sont séparées par un ';' (point-virgule)
le ';'(point-virgule) à la fin des déclarations, donc juste avant la '}' fermante est facultatif (mieux vaut prendre l'habitude de le mettre pour ne l'oublier ailleurs)

Code : Tout sélectionner

{propriété1: valeur; propriété2: valeur;}

le !important après la valeur et avant le ',' sert à écraser la valeur built-in (??) par défaut. si vous vous servez de notepad2 comme éditeur (il suffit allègrement) dans editConfigFiles traduite par... Jim! appliquez une mise en forme à !important, tant que votre code ne sera pas bon, la mise en forme ne s'appliquera pas (menu affichage > paramêtres des types de documents > css > important)

eczèmepeul:

Code : Tout sélectionner

#baudet, #cochon { saucisson: àl'ail !important; boudin: alacancoillotte !important; }

jamais un !important n'a autant mérité sa place
à chacun sa manière de présenter le code, pourvu que tout soit dedans

liens trézzzzzzzzutiles:
comprendre: http://www.tuteurs.ens.fr/internet/web/html/css.html
les propriétés: http://wiki.media-box.net/documentation/css
tout sur les feuilles CascadingStyleSheet: http://www.openweb.eu.org/css/ et http://css.alsacreations.com/ pour d'autrezorizons webmestriens

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

Edith me dit, t'as fini? va faire ta sieste, tu fais les courses c'tap!

[ottomar]

Les icônes des menus

d'abord, expliquez dans l'oreille du panda ce qu'on attend de lui, sinon, lui pas ni bouillir, ni binder (bindings=liens)
le code qui suit, donc obligatoire avant le reste pour que le panda capte

Code : Tout sélectionner

menuitem[label] {
  -moz-binding: url("chrome://global/content/bindings/menu.xml#menuitem-iconic") !important;
}
menupopup menu[label],
popup menu[label] {
  -moz-binding: url("chrome://global/content/bindings/menu.xml#menu-iconic") !important;
}

en premier: une icône générique pour tous les items de menu, en jouant avec les margin, padding et hauteur des séparateurs,

Code : Tout sélectionner

menu[label]
menuitem[label], 
menupopup menu[label],
menupopup[label]
{
	-moz-appearance: none !important;
	list-style-image: url("file:///D:/images/FF_generic16.png") !important;
	margin: 0 !important;
	padding: 0 !important;
}

menuseparator 
{
	margin: 0 !important;
	border: 0 !important;
}

ça peut vous donner ça:



si vous ne voulez pas que les items à checkbox (items cochés), que les marque-pages (sans favicônes) et les dossiers soient ainsi défigurés, en sélecteur

Code : Tout sélectionner

menu[label]:not([type="checkbox"]):not(.bookmark-item):not(.folder-icon),
menuitem[label]:not([type="checkbox"]):not(.bookmark-item):not(.folder-icon), 
menupopup menu[label]:not([type="checkbox"]):not(.bookmark-item):not(.folder-icon),
menupopup[label]:not([type="checkbox"]):not(.bookmark-item):not(.folder-icon)

vous pouvez attribuer aux menus qui ouvrent un autre menu (popupmenu) une icône diffèrente:

Code : Tout sélectionner

menu[label],
menupopup menu[label]
{
	-moz-appearance: none !important;
	list-style-image: url("file:///D:/images/FF_genericMenu16.png") !important;
	margin: 0 !important;
	padding: 0 !important;
}

bien sûr, le top du top, c'est une icône par menu! 2 ou 3 solutions

la première : installer l'extension cuteMenus http://extensions.geckozone.org/CuteMenus, ou un thème qui en est pourvu (par exemple mostly crystal (trés trés abouti, mostly))

la seconde, si vous voulez bien des icônes, mais pas du thème! vous téléchargez (pas installez) Mostly, vous le dégnappez dans un coin de votre dd, vous récupérez toutes les icônes et le fichier menuitems-fx-fr.css dans un dossier à part, vous ouvrez le css et vous changez toutes les cibles des list-style-image de mostly par le chemin vers vos icones et dans votre userchrome.css, vous inscrivez au-dessus de la ligne namespace

Code : Tout sélectionner

@import url("file:///D:/cheminVers/menuitems-fx-fr.css");
@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");

la troisième, si vous vous sentez une âme de graphiste et êtes pourvu d'une grande patience, vous pouvez bien éditer vos propres icônes, (vous pouvez bien aussi en trouver des tas sur le net) ou en partant de la solution précédente (sans doute le plus facile) et en attribuant les icônes des menus par code aux items qui vous intèressent

Code : Tout sélectionner

menu[label="Fichier"]
{
  list-style-image: url("file:///D:/images/Mostly/icons/page.png") !important;
}
menu[label="Edition"]
{
  list-style-image: url("file:///D:/images/Mostly/icons/edit.png") !important;
}
menu[label="Outils"]
{
  list-style-image: url("file:///D:/images/Mostly/icons/dominspector.png") !important;
}
#viewTextZoomMenu, menu[label="Taille du texte"]
{
  list-style-image: url("file:///D:/images/Mostly/icons/font-normal.png") !important;
}
menuitem[label="Plein écran"]
{
	list-style-image: url("file:///D:/images/Mostly/icons/fullscreen.png") !important;
}
menuitem[label="eReader"] 
{
  list-style-image: url("file:///D:/images/Mostly/icons/ereader16.png") !important;
    -moz-image-region: rect(0px 16px 16px 0px) !important;
}

dans le cas où ça merdouille avec les label[], la seule solution, c'est le domimspector pour trouver l'id du menu (comme dans le cas du [taille du texte] qui ne veut rien savoir ici!)

le domInspector, c'est pas simple comme bonjour, mais pas loin, suffit d'un peu d'ordre, d'autant plus qu'il a la bonne idée de faire clignoter bon nombre d'éléments. Il sert à donner la structure de la page qui se présente sous la forme d'une arborescence: des contenants qui contiennent des contenants qui contiennent des contenants qui contiennent... des élèments parfois!
1/ ouvrez le dom
2/ dans le menu fichier > Examiner une fenêtre > vous cochez le nom de la fenêtre en cours (de toute manière, si vous n'avez que le dom d'ouvert, vous n'avez le choix qu'entre la fenêtre et lui)
3/ développez l'arborescence de la page, en cliquant sur la petite flèche à côté de 'window', scrollez jusqu'à 'toolbox', le conteneur des barres de menu va clignoter : vous êtes bons!
développez 'toolbox', vous allez voir 4 ou 5 'toolbar' avec à droite dans le champ 'id', leur... id (#)
en principe les menus sont dans la 'toolbar-menubar', développez, allez jusqu'à 'toolbaritem', développez, et miracle, surgissent de la nuit comme des pandas zirsutes nouveaux-nés, vos... menus!
et toujours selon le même principe, vous allez trouvez tous les menus, leurs menuitems, les id en #, et dans la zone de droite du dom, leur [label]
c'est toujours plus sur et plus radical par les #id que par les [label]

j'espère, ça est clair.
pas baudet, hein! seulement halof!
Have
A
Lot
Of
Fun
Amusez-vous bien

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

[Jim]

Je me disais bien que ça sentait le cookie pas frais

Edit: faute

[ottomar]

1/ je m'élève avec force contre les manipulations de mon language, certes peu amène, mais si expressif à l'encontre de mon cookie !
2/ l'est pas frais, mon poisson ???
3/ vous mets en inspection par l'inspecteur en punition

j'en suis où avec ce b.. de p.. de m... de cookie?
j'espère que le trés gentil modo verra rien!

[ottomar]

nouveauté FF1.5 : les menus principaux ont (enfin) une id # !!
fini l'utf8 pour le menu <aller à> !

Code : Tout sélectionner

#go-menu { display: none !important;}

dans l'ordre :
Fichier = #file-menu
Edition =#edit-menu
Affichage = #view-menu
Marque-pages = #bookmarks-menu
Outils = #tools-menu
? = #helpMenu
mise à jour incessante du 1er post...
mise à jour cessée!

[ottomar]

par contre...! si vous utilisez compact-menu pour la 1.5, vous en avez encore besoin (de l'utf8 pour le même menu <Aller à>)
bon, c'est une bête à chagrin, ça!

Code : Tout sélectionner

menu[label="Aller à"] { display: none !important;}

[hs]je me mets aussi sans retard à jour Jim[/hs]

[ottomar]

trafiqu'âge des fenêtres extensions et thèmes

2 petites précisions
les images de boutons et leurs :hover n'exportent aucun message subliminal (ceci pour Mori qui va encore supputer je ne sais quoi), je me déclare responsable mais innocent au sens biblique du terme, mais j'avoue alof !
les 2 fenêtres sont redimensionnables en faisant poignet, donc redimensionnez !
le code est utilisable tel que : toutes les images sont chez imageShack, simplement copiez-collez dans votre userChrome.css
pour vos boutons, bannières, images, fonds d'écrans (mon préféré), avatars, posters, affichettes, charmantes photos, rouges pandas Firefox, le site de Jean Pierre Bardiau (n'oubliez pas entre Jean et Pierre : une espace)
si Calimo, Mori, Myahoo, Edith voient un inconvénient à l'usage de leurs avatars (et leurs adresses), je rectifierai, bien sûr

Code : Tout sélectionner

/*=========== FENETRES EXTENSIONS ET THEMES ============ */

/* fond du cadre et des boutons */
#extensionsManager
{
	background-image: url("http://img396.imageshack.us/img396/2875/redpanda8fs.jpg") !important;
}

/* fond des boutons */
#extensionsManager .box-inherit
{
background-image: url("http://img227.imageshack.us/img227/5351/redpanda0920029xv.png")
}

/* empêcher l'image de fond sur le menu contextuel (conséquence de .box-inherit) */
#extensionContextMenu .box-inherit
{
background-image: none !important;
}

/* resizer et getmore cachés */
#windowResizer, 
#getMore
{
	display: none !important;
}

/* fond de la barre de boutons */
#commandBar 
{
	padding: 8px !important;
	background-image: url("http://img396.imageshack.us/img396/2875/redpanda8fs.jpg") !important;
}

/* Bouton de désinstallation */
#uninstallButton .button-icon
{
	height: 90px !important;
	width: 90px !important;
}
#uninstallButton 
{
	list-style-image: url("http://img509.imageshack.us/img509/8739/chatmyahoo90hover8vf.png") !important;
	-moz-image-region: rect(0px, 90px, 90px, 0px) !important;
	font-size: 1em !important;
}
#uninstallButton:hover
{
	list-style-image: url("http://tgx.free.fr/1967L.png") !important;
}
#uninstallButton[disabled="true"] 
{
	list-style-image: none !important;
	color: gray !important;
}

/* Bouton d'options */
#optionsButton .button-icon
{
	height: 128px !important;
	width: 128px !important;
}
#optionsButton 
{
	list-style-image: url("http://img211.imageshack.us/img211/5646/baudetmori128hover29uq.png") !important;
	-moz-image-region: rect(0px, 128px, 128px, 0px) !important;
	font-size: 1em !important;
}
#optionsButton:hover
{
	list-style-image: url("http://ersplus.free.fr/spip/IMG/auton15.png") !important;
	-moz-image-region: rect(0px, 128px, 128px, 0px) !important;
}
#optionsButton[disabled="true"] 
{
	list-style-image: none !important;
}

/* Bouton de mise à jour */
#updateButton .button-icon
{
	height: 88px !important;
	width: 100px !important;
}
#updateButton
{
	list-style-image: url("http://cui.unige.ch/~robin0/Avatars/FSM.png") !important;
	-moz-image-region: rect(0px, 100px, 100px, 0px) !important;
	font-size:1em !important;
}
#updateButton:hover 
{
	list-style-image: url("http://img227.imageshack.us/img227/8029/cerveau8rg.png") !important;
	-moz-image-region: rect(0px, 100px, 100px, 0px) !important;
}
#updateButton[disabled="true"] {
	list-style-image: none !important;
	color: gray !important;
}

/* Bouton utiliser le thème */
#useThemeButton .button-icon
{
	height: 75px !important;
	width: 75px !important;
}
#useThemeButton 
{
	list-style-image: url("http://img227.imageshack.us/img227/7775/avataredith755ly.png") !important;
	-moz-image-region: rect(0px, 75px, 75px, 0px) !important;
	font-size: 1em !important;
}
#useThemeButton:hover
{
	list-style-image: url("http://img214.imageshack.us/img214/5466/avataredith75hover1ql.png") !important;
	-moz-image-region: rect(0px, 75px, 75px, 0px) !important;
}
#useThemeButton[disabled="true"] {
  list-style-image: none !important;
}

/* Les extensions */
extension[selected="true"] 
{
	background-image: url("http://img214.imageshack.us/img214/6044/06uv.png") !important;
	color: Papayawhip !important;
}
extension 
{
	min-height: 50px!important;
	border-bottom: 5px solid lightgray!important;
	background-image: url("http://img214.imageshack.us/img214/9048/0g5gk.png")!important;
	color: white !important;
}
extension[disabled="true"] 
{
	color: Lightgrey !important;
	background-image: url("http://img214.imageshack.us/img214/4691/0d1va.png") !important;
}
extension[disabled="true"][selected="true"] 
{
	background-image: url("http://img211.imageshack.us/img211/1375/0ds8lw.png") !important;
}
extension[disabled="true"] .extension-icon 
{
	opacity: 0.5 !important;
}
.extension-item-name 
{
	font-size: 24px !important;
}

/* Le fond de la boite de prévisualisation des thèmes */
#previewImageDeck
{
	background-image: url("http://img396.imageshack.us/img396/2875/redpanda8fs.jpg") !important;
}

/*========= FIN FENETRES EXTENSIONS ET THEMES ========== */

[myahoo]

si Calimo, Mori, Myahoo, Edith voient un inconvénient à l'usage de leurs avatars (et leurs adresses), je rectifierai, bien sûr

Aucun problème, sieur ottomar

[ottomar]

faut dire que ton chat va trés bien pour ça ! de plus, il me donne l'impression d'être... électrique (sous tension, quoi !)

[ottomar]

Complément d'enquête !!
Le truc de la fenêtre extensions/thèmes, c'est tout de même un peu lourd (et long) à charger : pensez à utiliser des images en local (sur votre disque dur) plus lègères (png 256 couleurs passées à pngOptimizer)