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 : Mori, myahoo, jpj, nico@nc

édith
Arias
Messages : 8
Enregistré le : 13 nov. 2005, 10:48

Message par édith » 31 mars 2006, 21:46

Message envoyé avec : l'espoir qu'un gentil, appétissant, dans la force de l'âge gallois modérateur (t'as le bonjour de babas de birmingham) ou une mignonne et douce administratrice lyonnaise qui use beaucoup de smileys redonne la paternité du post précédent à mon ottomar qui voudrait l'édither pour changer la place d'une virgule

et parce que je ne suis pas si bête que ça, une antépénultième solution aux SEARCHPLUGINS en remplaçant les icônes par l'emblème du site, qu'ottomar m'a dit que c'était pas si laid !

Image

hein que c'est mignon !

Code : Tout sélectionner

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

/* antépénultième solution */
#searchbar-dropmarker .box-inherit
{
-moz-appearance: none !important;
background-color: white !important;
/* largeur de l'image la plus... large */
max-width: 87px !important;
min-width: 87px !important;
/* éradication de la bête = somme des hauteurs des images */
/* plus le margin-top moins le séparateur */
max-height: 160px !important;
min-height: 160px !important;
}

#searchbar-dropmarker menuitem
{
-moz-appearance: none !important;
background-image: none !important;
opacity: 0.3 !important;
margin-top: 4px !important;

}

/* suppression de l'icône normale */
#searchbar-dropmarker menuitem[label="Google"] .menu-iconic-icon,
#searchbar-dropmarker menuitem[label="Yahoo"] .menu-iconic-icon,
#searchbar-dropmarker menuitem[label="MediaDICO"] .menu-iconic-icon,
#searchbar-dropmarker menuitem[label="MozillaZine Forums"] .menu-iconic-ico
#searchbar-dropmarker menuitem[label="Ubuntu-fr"] .menu-iconic-ico
{
display: none !important;
}

#searchbar-dropmarker menuitem[label="Google"],
#searchbar-dropmarker menuitem[label="Yahoo"],
#searchbar-dropmarker menuitem[label="MediaDICO"],
#searchbar-dropmarker menuitem[label="MozillaZine Forums"],
#searchbar-dropmarker menuitem[label="Ubuntu-fr"]
{
-moz-appearance: none !important;
margin-top: 2px !important;
background-image: none !important;
background-repeat: no-repeat !important;
color: white !important;
/* pour cacher le label du serchplugin */
/* correspond à la largeur max */
padding-left: 87px !important;

}

/* les searchplugins en spécifiant la hauteur */
#searchbar-dropmarker menuitem[label="Google"]
{
background-image: url("http://www.google.fr/images/firefox/google.gif") !important;
height: 32px !important;
}
#searchbar-dropmarker menuitem[label="Yahoo"]
{
background-image: url("http://us.i1.yimg.com/us.yimg.com/i/ws/w2/yahoo_logo.gif") !important;
height: 16px !important;
}
#searchbar-dropmarker menuitem[label="MediaDICO"]
{
background-image: url("http://www.wtb.free.fr/blog/images/mediadico.jpg") !important;
height: 35px !important;
}
#searchbar-dropmarker menuitem[label="MozillaZine Forums"]
{
background-image: url("http://osuosl.org/images/partners/mozillazine.png") !important;
height: 15px !important;
}
#searchbar-dropmarker menuitem[label="Ubuntu-fr"]
{
background-image: url("http://ubuntuforums.org/images/ubuntu-small.gif") !important;
height: 47px !important;
}

/* :hover en jouant sur l'opacité */
#searchbar-dropmarker menuitem:hover
{
background-color: white !important;
opacity: 1 !important;

}
Message envoyé avec : Mozilla/5.0 (X11; U; Linux i686; fr; rv:1.8.0.1) Gecko/20060124 Firefox/1.5.0.1
!Par Pitié : sauvegardez vos marque-pages et vos fichiers utilisateurs : bookmarkBackup
config

Avatar du membre
ottomar
Varan
Messages : 1128
Enregistré le : 09 janv. 2005, 07:31

Message par ottomar » 02 avr. 2006, 09:37

Si vous avez personnalisé les icônes des menus comme page... 218191 avec :

/* ====== ICONES DES MENUS ====== */
menuitem[id|="context"],
menuitem[tabid],
menuitem[label],
menuitem[name],
menuitem[id|="textlink"]
{
-moz-binding: url("chrome://global/content/bindings/menu.xml#menuitem-iconic") !important;
}
menupopup menu[label],
menupopup menu[key],
menupopup menu[tabid],
popup menu[label],
popup menu[key],
popup menu[tabid]
{
-moz-binding: url("chrome://global/content/bindings/menu.xml#menu-iconic") !important;
}
menu[label],
menuitem[label],
menupopup menu[label],
menupopup[label]
{
-moz-appearance: none !important;
list-style-image: url("http://img97.imageshack.us/img97/8809/fondmenu6vo.png") !important;
margin-top: -1px !important;
font-size: 14px !important;
color: black !important;
}
menuseparator
{
margin: 2px !important;
border: 0px !important;
border-color: transparent !important;
}
/* ==== /// ICONES DES MENUS ==== */


vous avez écrasé les checkbox, les petits machins qui se cochent et se décochent, qui sont parfois pas trés chouettes.

BOITES A CHEQUES

c'est pas compliqué, mais c'est un peu bordin parce que les possibilités de ces boites là sont moulti-moulti-multiples. checked=true, checked=false, disabled=false, disabled=true, active, et les hover et vous pouvez combiner le tout comme ça vous dit. bon, on n'a pas compliqué, ça ferait 50cm de haut

les menus : Image
les checkbox pas chèquées : Image
les checkbox chèquées : Image
les checkbox grignotées : Image
les actives : Image

Image

thème par défaut, userChrome juste avec le code des menus au dessus plus...

Code : Tout sélectionner

/* ====== CHECKBOX ====== */
/* standard */
menu[label][type="checkbox"],
menuitem[label][type="checkbox"],
menupopup menu[label][type="checkbox"],
menupopup[label][type="checkbox"]
{
-moz-appearance: none !important;
list-style-image: url("http://img97.imageshack.us/img97/7160/fondmenucheck10mc.png") !important;
color: darkmagenta !important;
}
/* hover sur standard */
menu[label][type="checkbox"]:hover,
menuitem[label][type="checkbox"]:hover,
menupopup menu[label][type="checkbox"]:hover,
menupopup[label][type="checkbox"]:hover
{
-moz-appearance: none !important;
list-style-image: url("http://img217.imageshack.us/img217/1206/fondmenucheckhover7zc.png") !important;
}
/* cochées et hover sur les cochées */
menu[label][checked="true"],
menuitem[label][checked="true"],
menupopup menu[label][checked="true"],
menupopup[label][checked="true"],
menu[label][checked="true"]:hover,
menuitem[label][checked="true"]:hover,
menupopup menu[label][checked="true"]:hover,
menupopup[label][checked="true"]:hover
{
-moz-appearance: none !important;
list-style-image: url("http://img47.imageshack.us/img47/1088/fondmenucheckcheck3rl.png") !important;
color: forestgreen !important;
}
/* aussi étrange que ça puisse paraître /*
/* c'est pas pareil que menu[label][type="checkbox"] */
/* essayez simplement de changer la 'color' de texte */
menu[label][checked="false"],
menuitem[label][checked="false"],
menupopup menu[label][checked="false"],
menupopup[label][checked="false"]
{
-moz-appearance: none !important;
list-style-image: url("http://img97.imageshack.us/img97/7160/fondmenucheck10mc.png") !important;
color: darkmagenta !important;
}
/* hover sur les non-cochées  */
menu[label][checked="false"]:hover,
menuitem[label][checked="false"]:hover,
menupopup menu[label][checked="false"]:hover,
menupopup[label][checked="false"]:hover
{
-moz-appearance: none !important;
list-style-image: url("http://img217.imageshack.us/img217/1206/fondmenucheckhover7zc.png") !important;
color: chocolate !important;
}
/* les actives */
/* du genre 'activé' de l'extension reloadEvery */
menu[label][checked="true"]:active,
menuitem[label][checked="true"]:active,
menupopup menu[label][checked="true"]:active,
menupopup[label][checked="true"]:active
{
-moz-appearance: none !important;
list-style-image: url("http://img128.imageshack.us/img128/1337/fondmenucheckactive4vv.png") !important;
color: firebrick !important;
} 
/* ==== /// CHECKBOX ==== */
c'est plus simple qu'il n'y parait, vous pouvez compliquer avec [disabled="true"] presque pour chaque déclaration
voilà, voilà
bon dimanche à tous
Enjoy ! Halof !

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


Message envoyé avec : Mozilla/5.0 (X11; U; Linux i686; fr; rv:1.8.0.1) Gecko/20060124 Firefox/1.5.0.1

pepito
Salamandre
Messages : 35
Enregistré le : 05 avr. 2006, 01:09

Image dans Fonds sidebar

Message par pepito » 05 avr. 2006, 05:55

Bonsoir,
grace à vos conseils j'ai pu mettre une image en fond dans mes panneaux de la barre laterale,du moins dans les marque-pages et l'historique car pour Sage ca ne marche pas,pas plus que pour le panneau des telechargements.
j'ai essayé les 2 versions proposées
celle-çi fonctionne pour les 2 panneaux sus-cités

Code : Tout sélectionner

/* fonds sidebar */
.plain
{
   background-color: #e8e8e8 !important;
   background-image: url(file:///D:/images/sunb4th.jpg) !important;
   color: black !important;
}
celle-là pour aucuns

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;
}
pas même le demi-panneau sage

et pour corser le tout je viens d'installer l'extension "2 panes bookmarks"
même principe que Sage,au demeurant trés pratique,et hélas plus d'image aussi pour les marques pages :cry: :cry:

pourriez-vous m'aider? :idea:
merci d'avance

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

Bender
Arias
Messages : 7
Enregistré le : 03 avr. 2006, 15:59

les parametres du userChrome

Message par Bender » 05 avr. 2006, 08:46

Bonjour,

Où peut-on trouver la liste des paramètres (tels que #urlbar, #ok-button, toolbar...) ? un site les référence ?

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

Avatar du membre
ottomar
Varan
Messages : 1128
Enregistré le : 09 janv. 2005, 07:31

Message par ottomar » 05 avr. 2006, 18:17

salut's

Pepito : es-tu bien sûr que ton image se charge (chemin ?)
apparemment c'est correct

Code : Tout sélectionner

#historyTree, 
#bookmarks-view Tree, 
#rssItemListBox, 
.plain {
-moz-appearance: none !important;
background-image: url(http://img58.imageshack.us/img58/8336/sunb4th.jpg) !important;
color: black !important;
font-weight: bold !important;
}
Image

Bender : sais pas s'il existe un répertoire, une partie de la réponse est dans l'image
Message envoyé avec : Mozilla/5.0 (X11; U; Linux i686; fr; rv:1.8.0.1) Gecko/20060124 Firefox/1.5.0.1

Bender
Arias
Messages : 7
Enregistré le : 03 avr. 2006, 15:59

Message par Bender » 05 avr. 2006, 22:02

merci ottoman et bravo pour les exemples du post :)

Message envoyé avec : Mozilla/5.0 (X11; U; Linux i686; fr; rv:1.7.10) Gecko/20050925 Firefox/1.0.4 (Debian package 1.0.4-2sarge5)

pepito
Salamandre
Messages : 35
Enregistré le : 05 avr. 2006, 01:09

Message par pepito » 06 avr. 2006, 00:57

bonsoir Ottomar!

ben maintenant ça marche......car ....petit rajout :wink: : .plain

Image

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

Image

Image

mais pas là

Image

ni là

Image

j'ai pratiquement tout fait sinon : menus avec hover et arrondis (super!)
info-bulles...
j'ai essayé le code tout en un comprenant les pop up et messages mais trop contraignant (peut on choisir les elements?)
Par contre ,comme tu peux le voir sur une captures,je n'ai pas reussi les coins arrondis de l'urlbar et searchbar,j'ai trifouillé le code proposé en page 8 j'ai même essayé celui des menus...radius etc..
Au fait,je me suis permis de prendre ton image sans ton assentiment....mais elle va si bien avec mon skin 8-) il n'est jamais trop tard....puis-je ?
sinon ben mille merçis pour toutes tes astuces et aides distillées avec moult
humour (j'adore :lol: j'y ai pas eu droit dans ta reponse :cry: )

j'ai pas trouvé FirefoxMenu Buttons :cry:

bon ben bonjour à .....Edith :lol:

Invité

Message par Invité » 06 avr. 2006, 13:06

tiens, un ganteux au pays des xulous.... :wink:

n'empeche merci Ottomar et Edith et les autres pour toutes ces astuces.

PS: pepito moi aussi jsuis un peu gant powaaa sur les bords (et au milieu aussi....)

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

pepito
Salamandre
Messages : 35
Enregistré le : 05 avr. 2006, 01:09

Message par pepito » 06 avr. 2006, 19:36

bonsoir,
ben encore mieux maintenant Ottomar,me suis rappelé de ton astuce avec
colorzilla et ça devient un jeu d'enfant....
maintenant image everywhere !!!

Code : Tout sélectionner

#historyTree,
#bookmarks-view Tree,
#rssItemListBox,
#translation,
#text,
#downloadView,
#extensionsView,
#previewImageContainer,
#ConsoleBox,
.plain {
-moz-appearance: none !important;
background-image: url(http://img58.imageshack.us/img58/8336/sunb4th.jpg) !important;
color: black !important;
font-weight: bold !important;
}
parcontre pour le web panel (quand il est vide) colorzilla ne dis que :html
et pour Page Info >> apercu du média : vbox.inset iframe

bon là je crois que j'exagere un peu,ces 2 là on s'en passera

Bender: avec Colorzilla tu les as tous en pointant sur l'endroit désiré tout s'affiche en bas dans la status bar :idea:



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

AliaS93
Iguane
Messages : 966
Enregistré le : 14 déc. 2005, 20:27

Message par AliaS93 » 07 avr. 2006, 10:42

Bonjour la section Userchrome ^^

Voilà , aprés la decouverte de l'extension pagestyle2tab , je me suis demandé si on pouvait changer le fond de l'onglet pour en gros passer de


Image

à

Image

sans garder l'extension en fait qui met l'onglet au couleur du site , je voudrais garder la même couleur , le blanc par exemple.

Je suis allé voir dans la section Onglet mais je n'ai rien trouvé .

Donc si quelqu'un à une idée de code ^^ Merki d'avance.

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
Image Image
Sony Vaio C2Z/B - Sony Walkman S639 - HTC Tattoo

Invité

Message par Invité » 09 avr. 2006, 10:38

Saluts du dimanche qui pleut

@MikoLasso
ne complique pas trop ton code, je sais, ça fait savant sachant coder, d'un autre côté, tu sais où sont tes affaires, mais juste avec :

Code : Tout sélectionner

scrollbox,
.box-inherit,
.plain
{
background-image: url(http://img58.imageshack.us/img58/8336/sunb4th.jpg) !important;
}
tout devrait y passer (si tu veux tout faire passer) sauf cette sal... de scrollbox de la sidebar téléchargements qui ne veux rien savoir : échec
l'image ? du coup, je l'ai reprise ! mais fais gaffe, la sors pas trop, me semble qu'il y a un copyright dessus (bon au depart, elle était soleil couchant, ça change qqchose ???)
en tous cas, toi tu suis ! malheureusement colorzilla marche pas sous linux
j'ai vu un machin que mon lien de customToolbarButton n'était pas bon, bon j'avoue que je ne suçe pas toujours que ma cervelle...
http://developer.mozilla.org/en/docs/Cu ... bar_Button

Message envoyé avec : Mozilla/5.0 (X11; U; Linux i686; fr; rv:1.8.0.1) Gecko/20060124 Firefox/1.5.0.1

@AliaS93
ben...

Code : Tout sélectionner

tab
{
-moz-appearance: none !important;
background-image: none !important;
background-color: white !important;
} 
essaie pour voir si ça écrase le code de l'extension, mais (tu me diras de me mêler de ma cancoillotte), c'est pas justement l'intérêt de cette extension ?

Message envoyé avec : Mozilla/5.0 (X11; U; Linux i686; fr; rv:1.8.0.1) Gecko/20060124 Firefox/1.5.0.1

bon, là on va vous apprendre à faire des croix, faut savoir faire des croix, au moins chez le banquier

Code : Tout sélectionner

.tabs-closebutton .toolbarbutton-icon
{
list-style-image: url("http://img446.imageshack.us/img446/5922/gtkcancel0ni.png") !important;
-moz-image-region: rect(0px, 16px, 16px, 0px);
opacity: 0.5 !important;
}
.tabs-closebutton:hover .toolbarbutton-icon
{
opacity: 1 !important;
}
Message envoyé avec : Mozilla/5.0 (X11; U; Linux i686; fr; rv:1.8.0.1) Gecko/20060124 Firefox/1.5.0.1

le p'tit bookmarklet de jessie Rudermann qui va bien, pour les pages que vous en aimez pas les couleurs, ou trop sombres, ou trop noires, ou que les yeux vous-y font l'oignon (à propos : jamais d'oignon dans la cancoillotte, ça dénature, de l'ail oui, de l'oignon NON !)
facile à mettre à vos gouts et couleurs, dans un nouveau marque-pages, dans la zone 'adresse web'

Code : Tout sélectionner

javascript:(function(){var newSS, styles='* { background: white ! important; color: black !important } :link, :link * { color: #0000EE !important } :visited, :visited * { color: firebrick !important }'; if(document.createStyleSheet) { document.createStyleSheet(%22javascript:'%22+styles+%22'%22); } else { newSS=document.createElement('link'); newSS.rel='stylesheet'; newSS.href='data:text/css,'+escape(styles); document.getElementsByTagName(%22head%22)[0].appendChild(newSS); } })();
vous n'avez juste à changer les codes couleurs

Message envoyé avec : Mozilla/5.0 (X11; U; Linux i686; fr; rv:1.8.0.1) Gecko/20060124 Firefox/1.5.0.1

Avatar du membre
ottomar
Varan
Messages : 1128
Enregistré le : 09 janv. 2005, 07:31

Message par ottomar » 09 avr. 2006, 10:42

Code : Tout sélectionner

!BORDIN; 
Je suis connecté 
{
pas bourré:  connecté;
}
!MARRE;
Message envoyé avec : Mozilla/5.0 (X11; U; Linux i686; fr; rv:1.8.0.1) Gecko/20060124 Firefox/1.5.0.1

Edith : merdasse, c'était firefoxMenuButtons ! aïe, pas la tête, pas la tête !
https://addons.mozilla.org/addon.php?id=2046

Edith : ottomar, t'as un train de retard !

pepito
Salamandre
Messages : 35
Enregistré le : 05 avr. 2006, 01:09

Message par pepito » 09 avr. 2006, 22:06

bonsoir,
bon ben , j'ai bien l'impression d'avoir déplu.....quelquepart
je m'en tiendrais , dorénavant , à une simple lecture...

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

Avatar du membre
Mori
Animal mythique
Messages : 13293
Enregistré le : 30 avr. 2004, 19:17

Message par Mori » 09 avr. 2006, 22:26

heu non Pepito ... ottomar jacte comme cela, quand il perd ses cookies ... c'est contre lui-même qu'il jure comme un franc-comtoué. :lol:
Linux ubuntu MATE 18.04 (x86_64)

Invité

Message par Invité » 12 avr. 2006, 13:14

Bonjour tout le monde
je vous pose une colle comment on rajoute une 2e barre d'état en bas (au dessus ou en dessous) dans le fichier userChrome.css, un ?.

merki :lol: :wink:.

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

Répondre

Qui est en ligne

Utilisateurs parcourant ce forum : Bing [Bot], Google [Bot], rocky 42 et 8 invités