personnaliser Firefox avec le userChrome.css

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

silverskin en 6 lignes et 5 images

background.gif

background2.gif

background5.gif

background6.gif

footer.png

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; }

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

)

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

ottomar · 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

ottomar · 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 · 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 :

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 :

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

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

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

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/ ?

ottomar · 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 !

ottomar · 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 · 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

ottomar · 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
??

ottomar · 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")
}

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

AliaS93 · 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

AliaS93 · 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

ottomar · 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

et je suis d'autant plus bête de ne pas y avoir pensé que je m'en sers dans le profil d'... Edith

Geckozone

personnaliser Firefox avec le userChrome.css

Qui est en ligne ?