Page 10 sur 92
Publié : 15 déc. 2005, 15:39
par ottomar
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;
}
Publié : 15 déc. 2005, 16:08
par ottomar
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 !
Publié : 16 déc. 2005, 00:42
par Invité
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
Publié : 16 déc. 2005, 17:32
par ottomar
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 !
Publié : 16 déc. 2005, 19:24
par AliaS93
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
Publié : 17 déc. 2005, 05:05
par ottomar
salut !
avec quoi tu as arrondi tes boites ? brushed ?
Publié : 17 déc. 2005, 08:49
par Mori
ottomar a écrit :salut !
avec quoi tu as arrondi tes boites ? brushed ?
avec ça peut-être
http://wellrounded.mozdev.org/ ?
Publié : 17 déc. 2005, 09:04
par ottomar
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 !
Publié : 17 déc. 2005, 09:16
par ottomar
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;
}
Publié : 17 déc. 2005, 14:11
par AliaS93
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
Publié : 17 déc. 2005, 15:51
par ottomar
c'est le même style que le rounded de mostlyCrystal, je suppose, enlève ta ligne import url et installe wellrounded après
??
Publié : 18 déc. 2005, 08:49
par ottomar
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;
}
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 !
Publié : 18 déc. 2005, 12:56
par AliaS93
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
Publié : 18 déc. 2005, 18:40
par AliaS93
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
Publié : 18 déc. 2005, 18:45
par ottomar
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
