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

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

Message par ottomar » 15 déc. 2005, 15:39

silverskin en 6 lignes et 5 images

background.gif
Image

background2.gif
Image

background5.gif
Image

background6.gif
Image

footer.png
Image

Hugo :
tu les charges / enregistres / renommes, tu les copies dans le dossier userChrome à coté du userChrome.css
dans le userChrome.css (sans oublier la ligne namespace en haut)

Code : Tout sélectionner

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

toolbox { background-image: url("background.gif") !important; }
#toolbar-menubar, #nav-bar, #PersonalToolbar { border: none !important; }
tabbox { background-image: url("background2.gif") !important; }
tab { -moz-appearance: none !important; background-image: url("background5.gif") !important; padding: 1px 4px 2px 4px !important; }
tab[selected="true"] { background-image: url("background6.gif") !important; }
statusbar,statusbarpanel { -moz-appearance  : none !important; background-image : url("footer.png") !important; }
si tu veux plus de skin que silverskin soi-même, tu rajoutes :

Code : Tout sélectionner

.box-inherit, .popup-internal-box { background-image: url("background.gif") !important; }
toolbox .box-inherit, tab .box-inherit { background-image: none !important; }
Image

attention, c'est à partir du thème par défaut de Firefox, à partir d'un autre... peut y avoir des différences, maintenant tu cherches et tu trouves les boutons qui vont bien (sans moi :D )

suite... http://www.geckozone.org/forum/viewtopi ... 091#222091

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

☎ Firefox 3

Code : Tout sélectionner

toolbox
{
-moz-appearance: none !important;
background: url("background.gif") !important;
}
#toolbar-menubar, #nav-bar, #PersonalToolbar
{
-moz-appearance: none !important;
background: transparent !important;
border: none !important;
}
Message envoyé avec : Mozilla/5.0 (X11; U; Linux i686; fr; rv:1.9) Gecko/2008061015 Firefox/3.0
Modifié en dernier par ottomar le 28 juin 2008, 08:03, modifié 2 fois.

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

Message par ottomar » 15 déc. 2005, 16:08

William-AliaS93, je t'oublie !

Code : Tout sélectionner

#urlbar .textbox-input-box
{
background-color: #800000 !important;
color: white !important;
}

tu règles le fond avec background, si tu veux juste changer la couleur de texte, tu joues du color

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

Invité

Message par Invité » 16 déc. 2005, 00:42

Merci Ottomar pour cette reponse , mais en fait les 2 codes jouent sur la totalité de l'adresse , hors moi j'essayais de trouver un code pour changer juste la selection ( ce que je surligne avec ma souris ) c'est assez complique à comprendre lol je te l'accorde ^^

Si tu regardes bien sur le screen que j'ai effectué , la selection apparait en gris clair sur un fond blanc , je cherche donc un code pour avoir un fond gris par exemple pour bien faire le distinguo

Bon j'espere que ce poste est comphensible ^^ , et que le code que je cherche existe.

Merci & ciao

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

Message par ottomar » 16 déc. 2005, 17:32

non-non, je pige bien que ta sélection a les mêmes color de texte /background de fond que la barre d'adresse, par contre je pige pas qu'en changeant simplement la color de texte, ça ne marche pas
aussi bien, la sélection dans la barre d'url dépend des couleurs système (windows dans ton cas, me semble) donc tu peux régler le problème dans propriétés>affichage>sélection de windows
je ne trouve rien dans firefox pour changer ça, pas même dans les .jar du chrome du dossier d'installation
tu peux par contre appliquer une mise en forme ou lors du focus ou lors du hover sur la barre d'adresse, la sélection est alors trés visible

Code : Tout sélectionner

#urlbar .textbox-input-box:hover
{
   background: #800000 !important;
   color: yellow !important;
 
}

Code : Tout sélectionner

#urlbar[focused="true"] .textbox-input-box
{
   background: #800000 !important;
   color: yellow !important; 
}
si ça peut aider...
si vous voulez vous y retrouvez dans ces pages, commencez par la page... 1 du post-it, c'est à jour !

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

Message par AliaS93 » 16 déc. 2005, 19:24

Quel idiot je fais , en fait je pensais m'être mal exprimé , mais c'est surtout moi qui a pas compris ta réponse Ottomar ^^
Merci pour ton coup de main c'est sympa voila en gros ce que ça donne :

Image

comme tu me l'as conseillé , j'ai juste change la couleur du txt , et jai mis du background blanc , par magie la selection est redevenue grise comme le theme "Brushed" de la version 1.0.7 !
Merci aussi de m'avoir fais decouvrir le code ":hover" , je l'utilise maintenant pour d'autre manip ;)

Enfin juste pour la route , et promis je t'embête plus ^^ encore une petite question : ...

Voila j'ai tenté de mettre le meme code pour le #searchbar mais là la magie n'officie plus lol

Voilà le chtit prbl :

Image

J'espere que ce n'est pas du au skin en lui meme au quel cas il y aurai peut e^tre une soluce .

Encore merci , ciao ;)
Image Image
Sony Vaio C2Z/B - Sony Walkman S639 - HTC Tattoo

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

Message par ottomar » 17 déc. 2005, 05:05

salut !
avec quoi tu as arrondi tes boites ? brushed ?

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

Message par Mori » 17 déc. 2005, 08:49

ottomar a écrit :salut !
avec quoi tu as arrondi tes boites ? brushed ?
avec ça peut-être http://wellrounded.mozdev.org/ ?
Linux ubuntu MATE 18.04 (x86_64)

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

Message par ottomar » 17 déc. 2005, 09:04

c'est ce que j'allais lui proposer ! d'autant plus que wellrounded a la particularité d'être décompressée dans son dossier {F37730...} : pas de .jar, donc traffic (traphique ? thrafic ?) des images trés facile

trafic !

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

Message par ottomar » 17 déc. 2005, 09:16

silverskin (et autres) suite...
la belle astuce pour que çe soit pile-poil, c'est de connaitre la hauteur de ses barres d'outils pour régler la hauteur de l'image de fond et comment mieux les connaitre que de les définir soi-même (avec min-height, max-height : ne me demander pas pourquoi, mais c'est ce qui marche le mieux)
si vous avez en permanence disons 3 barres de 32px, 24 et 24px, créer un background.gif de 80 pixels de hauteur, votre dégradé sera calé nickel

Code : Tout sélectionner

#nav-bar
{
	max-height: 18px !important;
	min-height: 18px !important;
}
si vous voulez vous y retrouvez dans ces pages, commencez par la page... 1 du post-it, c'est à jour !

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

Message par AliaS93 » 17 déc. 2005, 14:11

Bonjour ;p

Bon, pour faire les arrondis j'ai utiliser le code du createur du site , à savoir :

Code : Tout sélectionner

/* ..... Rounded Address- and Searchbar with Blue Focus ..... */
@import url("chrome://global/skin/theme-options/rounded-url-and-searchbar-blue.css");
 
@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
Dispo sur son site : Brushed

Mais j'ai remarque quelque chose : lorsque j'utilise les coins carrés , la couleur de la selection ne me pose pas de prbl , des que j'arrondis les coins avec son code ; la selection merde , comme sur mon premier screen.

Sinon pour en revenir à l'extension Wellrounded , elle n'a pas l'air d'etre compatible avec "brushed" , et c'est le seul ^^ pas de bol -_- , sinon merci de m'avoir aidé .

Ciao , ALiaS93
Image Image
Sony Vaio C2Z/B - Sony Walkman S639 - HTC Tattoo

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

Message par ottomar » 17 déc. 2005, 15:51

c'est le même style que le rounded de mostlyCrystal, je suppose, enlève ta ligne import url et installe wellrounded après
??

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

Message par ottomar » 18 déc. 2005, 08:49

j'vous fais encore les téléchargements, pas le plus simple ça ! et après... ? en tous cas j'ferai pas le dom-inspecteur !!
pour les longs codes comme ça, n'oubliez pas l'astuce dans le userContent.css

Code : Tout sélectionner

/* Balises CODE */
/* Limiter la hauteur de la fenêtre associée aux balises CODE : Si le texte contenu dans la balise est plus long que la hauteur de la fenêtre, une barre de défilement verticale apparaîtra. */ 
td.postbody td.code 
{
	font-size: 120% !important;
	font-family: monospace !important! 
	width: 600px !important;
	max-height: 30em !important;
	overflow: auto !important;
}
!important : A PARTIR DU THÈME PAR DÉFAUT DE FIREFOX 1.5
!important : l'image de fond du "download" fait 12x64px !important pour certains réglages

Code : Tout sélectionner

/* le fond de la fenêtre */
#downloadManager 
{
	background-image: url("file:///D:/images/FF_ExtensionsBackground.png") !important;
}

/* le poignet et l'ascenseur cachés */
#downloadManager #windowResizer,
#downloadManager scrollbar[orient=vertical] 
{
	display: none !important;
}

/* le cadre des téléchargements */
#downloadView 
{
	-moz-appearance: none !important;
	margin: 0px !important;
	border-top: 3px solid !important;
	-moz-border-top-colors: dimgray !important;
	border-right: 3px solid !important;
	-moz-border-right-colors: gray !important;
	border-bottom: 3px solid!important;
	-moz-border-bottom-colors: lightgray !important;
	border-left: 3px solid!important;
	-moz-border-left-colors: white !important;

}
/* les 2 zones alternantes */  
.downloadViewInner2 
{
	  border: 0px !important;
	  padding: 0px!important;
}
.downloadViewInner1 {
	border: 0px !important;
}

/* la barre de commande */
#commandBar 
{
	padding: 6px !important;
	margin-left: 10px !important;
	background-image: url("file:///D:/images/FF_downloadCommandBar.png") !important;
}
#autodownloadInfo
{
	font-weight: bold !important;
}

/* calage des icônes de bouton */
#cleanUpButton .button-icon, 
#optionsButton .button-icon 
{
	margin: 0px 5px 0px 0px !important;
}

/* le bouton d'essorage */
#cleanUpButton .button-icon
{
	height: 48px !important;
	width: 48px !important;
}
#cleanUpButton 
{
	list-style-image: url("file:///D:/images/chat_myahoo90hover.png") !important;
	-moz-image-region: rect(0px, 90px, 90px, 0px) !important;
	font-size: 1em !important;
}
#cleanUpButton:hover
{
	list-style-image: url("file:///D:/images/chat_myahoo.png") !important;
}
#cleanUpButton[disabled="true"] 
{
	list-style-image: none !important;
	color: gray !important;
}

/* le séparateur vertical dans la barre de commande */
#commandBarSeparator 
{
	margin-left: 5px !important;
}

/* les téléchargements */
download 
{
	margin-top: 0 !important;
	max-height: 60px !important;
	min-height: 60px !important;
	font-size: 1em !important;
	/* l'image fait 12x64px !important pour certains réglages */
	background-image: url("file:///D:/images/FF_download.png")!important;
	background-repeat: repeat !important;
	color: lightgray !important;
	font-weight: bold !important;
	border-bottom: 2px solid white;
}
download[selected="true"] 
{
	background-image: url("file:///D:/images/FF_extensionsSelected.png") !important;
	border-bottom: 2px solid white;
	font-size: 1.1em !important;
	font-weight: bold !important;
	color: Papayawhip !important;
}

/* calage des labels et liens */
download > hbox > vbox
{
	margin-top: -12px !important;
}

/* le conteneur de la barre de progression */
.downloadContentBox[animated="true"] 
{
	-moz-appearance: none !important;
	-moz-opacity: 1.0;
	padding-top : 12px !important;
	padding-left : 12px !important;
	margin-top: -12px !important;
	background-image: url("file:///D:/images/FF_downloadContextBox.png") !important;
	color: black;
}

/* couleur des liens */
.text-link 
{
	-moz-appearance: none !important;
	color: Lemonchiffon !important;
}
.text-link:hover,
.text-link:hover:active 
{
	-moz-appearance: none !important;
	color: Peachpuff !important;
}
.text-link:focus 
{
	-moz-appearance: none !important;
	color: Moccasin !important;
}

/* le fond des boutons et du menu contextuel #downloadContextMenu */
#downloadManager .box-inherit
{
background-image: url("file:///D:/images/FF_extensionsButton.png")
}
Image

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

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

Message par AliaS93 » 18 déc. 2005, 12:56

Slt ;p

Bon j'ai essayé , mais comme je le pensais celui-i ne fonctionne pas ; comme l'indique le site , "Brushed" n'est pas compatible avec Wellrounded (voir le Theme Compatibility) > pas de bol hein ? ^^

Bon ben je vais ralentir mes recherches là-dessus , c'est à me rendre dingue ^^ , de toute maniere je vais bien tomber sur la soluce un jour ou l'autre ^^.
Merci de m'avoir aidé , Ciao ;p

AliaS93
Image Image
Sony Vaio C2Z/B - Sony Walkman S639 - HTC Tattoo

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

Message par AliaS93 » 18 déc. 2005, 18:40

Bon j'ai finallement trouvé une solution Ottomar ^^.
Apres une aprés midi passé sur Mozillazine , voilà le dimanche quoi ^^
Mais bon je voulais tellement trouver une parade pour changer la couleur de selection du #searchbar ;p

Donc voici ce fameux code :

Code : Tout sélectionner

::-moz-selection {
color: #FFFFFF !important;  /*Colour of text*/
background: #5C94B9 !important;  /*Highlighting colour*/
}

Certain diront que c'est aussi simple de faire un

Code : Tout sélectionner

#urlbar .textbox-input-box
{
   background: #800000 !important;
   color: yellow !important;
}
Mais pour le theme "Brushed" , comme l'arrondi est une commande qui differe des autre themes , et qu'il n'est pas compatible avec Wellrounded.
Et comme ce code bug pour le theme Brushed , il fallait trouver autre chose.

En tout cas je remercie Ottomar pour ces solutios et sa patience
Image Image
Sony Vaio C2Z/B - Sony Walkman S639 - HTC Tattoo

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

Message par ottomar » 18 déc. 2005, 18:45

ye te signale (gentiment) que le moz-selection est dans le post-it userContent, posté par... ottomar :D et je suis d'autant plus bête de ne pas y avoir pensé que je m'en sers dans le profil d'... Edith :lol:

Répondre

Qui est en ligne

Utilisateurs parcourant ce forum : Aucun utilisateur enregistré et 4 invités