personnaliser Firefox avec le userChrome.css
Modérateurs : myahoo, nico@nc, Mori, jpj
Re: personnaliser Firefox avec le userChrome.css
pour before et after j'ai testé ça n'a rien changer je pense que les élément doivent être à la suite et non imbriquè comme dans mon cas
navigator-toolbox c'est l'ensemble des barre du haut et j'aimerais mettre mettre une bordure en bas car j'ai les onglets en haut et donc il n'y a pas de transition entre les barres et la page .
Freddy j'avais testé border image mais je narrive pas à le faire fonctionner alors que border tout seul marche pourrait tu mettre le code que tu utilise .
Re: personnaliser Firefox avec le userChrome.css
voilà ce que ça donne avec mes images ( ça marche que si votre theme n'a pas déjà des images comme fond de bar)
Code : Tout sélectionner
/*bordure du bas */
#navigator-toolbox {
background: transparent url("http://i.imgur.com/E9ZVv.png") repeat-x bottom/* mettre top pour faire une bordure en haut*/;
}
/*fond*/
window{
-moz-appearance : none !important;
background-image : url("http://i.imgur.com/bHuAy.jpg") !important;
background-position: top left !important;
background-repeat : repeat-x !important;
background-color : #FFFFFF !important;
}
voilà ce que ça donne http://i.imgur.com/YVaya.png
Re: personnaliser Firefox avec le userChrome.css
Chez moi ça marche pas ton code, je vois que l'image de fond, même sous un profil pas parsonnalisé (en plus c'est pas une image qui ce vois beaucoup)
J'ai essayé de regardé de plus près, et voilà le compte-rendu de mes expériences :
Exemple 1:
Avec "inspecteur DOM" je regarde la taille exact de navigator-toolbox, donc chez moi ça donne 1440 x 68.
Ensuite avec Gimp je bricole une image que je redimensionne à la même taille et j'évide l'intérieur en donnant aux bordures restantes la valeur de 10px par exemple, j'obtiens ça:
Ce qui fait qu'ensuite avec le code pour n'avoir que la bordure du bas, ça donne:
Code : Tout sélectionner
#navigator-toolbox
{ -moz-border-image: url(http://img10.hostingpics.net/pics/390178bordure10.png) 10 10 10 10 / 0 0 10px 0 !important; }
Si je met les 4 première valeurs à 0, j'ai un cadre tout autour.
Si je met la 1° à 10 ça supprime la bordure du haut, la 2°à 10 pour supprimer la bordure de droite, ...
Et avec les 4 autres valeurs, je règle la largeur de la bordure.
Exemple 2:
En bricolant une image avec des dimensions moins ajustées:
j'applique ensuite le code suivant:
Code : Tout sélectionner
#navigator-toolbox
{ -moz-border-image: url(http://img10.hostingpics.net/pics/732578bordure20.png) 22 22 22 22 / 0 0 10px 0 !important; }
Avec ton image, j'arrive à obtenir qqchose de correct avec ça:
Code : Tout sélectionner
#navigator-toolbox
{ -moz-border-image: url("http://i.imgur.com/E9ZVv.png") 5 / 0 0 10px 0 !important; }
Re: personnaliser Firefox avec le userChrome.css
super ça marcheFreddy a écrit :Mince, j'espérais plutôt que ce soit toi qui m'éclaire un peu plus.
Chez moi ça marche pas ton code, je vois que l'image de fond, même sous un profil pas parsonnalisé (en plus c'est pas une image qui ce vois beaucoup)
J'ai essayé de regardé de plus près, et voilà le compte-rendu de mes expériences :
Exemple 1:
Avec "inspecteur DOM" je regarde la taille exact de navigator-toolbox, donc chez moi ça donne 1440 x 68.
Ensuite avec Gimp je bricole une image que je redimensionne à la même taille et j'évide l'intérieur en donnant aux bordures restantes la valeur de 10px par exemple, j'obtiens ça:
Ce qui fait qu'ensuite avec le code pour n'avoir que la bordure du bas, ça donne:(bon je laisse l'url de l'image au cas où, mais chez moi ça marche pas, ça va bien avec la même qui est sur mon DD, je me demande si ça vient pas des popup bloquées; toute façon c'est pour exemple)Code : Tout sélectionner
#navigator-toolbox { -moz-border-image: url(http://www.hostingpics.net/viewer.php?id=390178bordure10.png) 10 10 10 10 / 0 0 10px 0 !important; }
Si je met les 4 première valeurs à 0, j'ai un cadre tout autour.
Si je met la 1° à 10 ça supprime la bordure du haut, la 2°à 10 pour supprimer la bordure de droite, ...
Et avec les 4 autres valeurs, je règle la largeur de la bordure.
Exemple 2:
En bricolant une image avec des dimensions moins ajustées:
j'applique ensuite le code suivant:J'ai pas utilisé l'option: round - stretch - repeat , pcq par défaut le stretch est pris en compte, et donc cette fois l'image n'ayant pas la dimension exact de la box, elle s'adapte en s'étirant.Code : Tout sélectionner
#navigator-toolbox { -moz-border-image: url("http://www.hostingpics.net/viewer.php?id=732578bordure20.png") 22 22 22 22 / 0 0 10px 0 !important; }
Avec ton image, j'arrive à obtenir qqchose de correct avec ça:En plus, ces codes présentent l'avantage pour les bordures d'être réglables.Code : Tout sélectionner
#navigator-toolbox { -moz-border-image: url("http://i.imgur.com/E9ZVv.png") 5 / 0 0 10px 0 !important; }
les images avec les url marchent c'est juste que tu n'a pas mis le lien vers l'image mais vers la page qui affiche l'image
j'ai plus qu' a comprendre comment marche les chiffre à la fin pour que la bordure ne soit pas élargi ou compressé
demain j'ai pas accès à l'ordi donc je refairais des test dimanche
Re: personnaliser Firefox avec le userChrome.css
Après refroidissement, ça m'a permis aussi d'avoir l'idée d'essayer ton image avec un fond blanc, ce qui est plus pratique pour observer le résultat. (ça m'a permis de remarquer que le thème par défaut bloque l'utilisation de Stylish )
Donc avec ton image, vu qu'une bonne moitié de sa hauteur est transparente, j'obtiens qqchose de bien avec ce code:
Code : Tout sélectionner
#navigator-toolbox
{ -moz-border-image: url("http://i.imgur.com/E9ZVv.png") 3 0 7 0 / 0 0 10px 0 round !important; }
- pour le 3°chiffre du deuxième groupe, largeur de la bordure du bas, toujours d'après ce que je comprend, vu que ton image fait 10px de haut, si sa valeur est < 10 alors l'image est compressée, si >10 → image étirée.
Si tu veux une bordure plus grande sans déformer l'image, il faut augmenter les deux chiffres mais pas forcément de la même valeur (vu que % et px) par exemple: ...url(...) 3 0 10 0 / 0 0 15px 0 ...
Par contre, d'après mes essais, si tu diminues la bordure, ça oblige soit à compresser, soit à perdre une partie du dégradé foncé de l'image.
- en rajoutant "round" ça évite que l'image soit étirée sur toute la largeur de la box (chose que j'avais pas vu avec mon autre fond ). Ça marche aussi avec "repeat".
Re: personnaliser Firefox avec le userChrome.css
si je comprend bien ça correspond à border width ou height alors pourquoi je ne pourrais pas mettre 0 à la place du 3 ?
j'ai remplacé le 7 par 10 pour pas la compressé comme tu l'a dis, avec ce code j'obtient le meme résultat que sur la capture d'écran précédente donc ça me va
Code : Tout sélectionner
#navigator-toolbox
{ -moz-border-image: url("http://i.imgur.com/E9ZVv.png") 0 0 10 0 / 0 0 10px 0 round !important; }
Re: personnaliser Firefox avec le userChrome.css
En fait, pour le premier groupe de chiffre c'est peut-être plus parlant avec des pourcentages plutôt que des pixels.
Il représente la portion de l'image qui devra s'afficher dans la bordure.
C'est le deuxième groupe qui correspond à border-width. D'ailleurs on peut aussi écrire pour ton code:
Code : Tout sélectionner
#navigator-toolbox
{ border-width: 0 0 10px 0 !important;
-moz-border-image: url("http://i.imgur.com/E9ZVv.png") 0 0 10 0 round !important; }
exemple pour faire un cadre:
J'ai choisi des valeurs pour les dimensions de l'image qui sont volontairement simple pour le calcul des portions à afficher:
•dimension totale de l'image = 100 px
•dimension des motifs (chaque côtés de l'image) = 10 px
→ donc pour afficher correctement chaque côtés (largeur du motif en entier = 10 px) il faut faire afficher 10 px sur 100 px, soit 10%
Re: personnaliser Firefox avec le userChrome.css
sinon pour faire remonter la bordure il y a un code ?
car si je met un margin-top ça va tout me déplacer
edit:j'ai compris pourquoi le milieu est remplit ça marche que pourles cadre vide à l'interieur ce que n'est pas ma bordure
au fait sur l'exemple que tu m'a donné http://www.lrbabe.com/sdoms/borderImage/index.html
il mettent le round 2 fois il en faut un pour le vertical et l'autre l'horizontal ?
Re: personnaliser Firefox avec le userChrome.css
Tu veux dire au lieu de ça:bormat a écrit :je comprend mais il y a un bug quand je met 1 à la palce du 100 l'image se répète sur toute la hauteur alors que j'ai changer que la partie de l'image à mettre ne bord ?
#navigator-toolbox
{ -moz-border-image: url("http://i.imgur.com/E9ZVv.png") 0 0 100% 0 / 0 0 10px 0 round !important; }
si tu mets ça:
#navigator-toolbox
{ -moz-border-image: url("http://i.imgur.com/E9ZVv.png") 0 0 1% 0 / 0 0 10px 0 round !important; }
Ouai, ça me le fait aussi. Apparemment ça se résout en indiquant d'afficher entièrement l'image aussi dans la bordure du haut, mais comme tu n'en veux pas, tu laisse la valeur de cette bordure à 0px, soit le code:
Code : Tout sélectionner
#navigator-toolbox
{ -moz-border-image: url("http://i.imgur.com/E9ZVv.png") 100% 0 1% 0 / 0 0 10px 0 round !important; }
• 50% de la hauteur de ton image dans une bordure de 10px → url( ) 100% 0 50% 0 / 0 0 10px 0 round
• 70% de la hauteur de ton image dans une bordure de 5px → url( ) 100% 0 70% 0 / 0 0 5px 0 round
bormat a écrit :au fait sur l'exemple que tu m'a donné http://www.lrbabe.com/sdoms/borderImage/index.html
il mettent le round 2 fois il en faut un pour le vertical et l'autre l'horizontal ?
Oui exactement, c'est précisé dans ce lien ou dans celui de mozilla, qui si je traduis bien mon traducteur automatique doit vouloir dire ceci:
"Le premier mot décrit comment afficher les images du haut, du milieu et du bas, tandis que le second décrit les bordures gauche et droite. Si le second est absent, il est supposé être le même que le premier. Si les deux sont absents, la valeur par défaut "stretch" est utilisée."
C'est ce j'ai montré dans ma dernière capture de mon post précédent.
Je sais pas si j'ai bien saisi: tu veux faire remonter que la bordure sans que ça remonte tes autres barres ?bormat a écrit :sinon pour faire remonter la bordure il y a un code ?
car si je met un margin-top ça va tout me déplacer
D'après ta capture, j'ai l'impression qu'elle va se retrouver sur tes m-page
Enfin si c'est bien ça, ça à l'air de pouvoir se faire en agissant sur la hauteur de navigator-toolbox:
(par exemple chez moi elle est de 68px)
Code : Tout sélectionner
#navigator-toolbox
{ -moz-border-image: url("http://i.imgur.com/E9ZVv.png") 0 0 100% 0 / 0 0 10px 0 round !important;
min-height: 60px !important;
max-height: 68px !important; }
Re: personnaliser Firefox avec le userChrome.css
tampis pour' la bordure (ton code me coupe les bars et donc cache la barre personnel)Freddy a écrit :Tu veux dire au lieu de ça:bormat a écrit :je comprend mais il y a un bug quand je met 1 à la palce du 100 l'image se répète sur toute la hauteur alors que j'ai changer que la partie de l'image à mettre ne bord ?
#navigator-toolbox
{ -moz-border-image: url("http://i.imgur.com/E9ZVv.png") 0 0 100% 0 / 0 0 10px 0 round !important; }
si tu mets ça:
#navigator-toolbox
{ -moz-border-image: url("http://i.imgur.com/E9ZVv.png") 0 0 1% 0 / 0 0 10px 0 round !important; }
Ouai, ça me le fait aussi. Apparemment ça se résout en indiquant d'afficher entièrement l'image aussi dans la bordure du haut, mais comme tu n'en veux pas, tu laisse la valeur de cette bordure à 0px, soit le code:Avec ce code tu peux afficher la portion (le poucentage) de ton image que tu veux, toujours pour une largeur de bordure désirée, par exemple:Code : Tout sélectionner
#navigator-toolbox { -moz-border-image: url("http://i.imgur.com/E9ZVv.png") 100% 0 1% 0 / 0 0 10px 0 round !important; }
• 50% de la hauteur de ton image dans une bordure de 10px → url( ) 100% 0 50% 0 / 0 0 10px 0 round
• 70% de la hauteur de ton image dans une bordure de 5px → url( ) 100% 0 70% 0 / 0 0 5px 0 round
bormat a écrit :au fait sur l'exemple que tu m'a donné http://www.lrbabe.com/sdoms/borderImage/index.html
il mettent le round 2 fois il en faut un pour le vertical et l'autre l'horizontal ?
Oui exactement, c'est précisé dans ce lien ou dans celui de mozilla, qui si je traduis bien mon traducteur automatique doit vouloir dire ceci:
"Le premier mot décrit comment afficher les images du haut, du milieu et du bas, tandis que le second décrit les bordures gauche et droite. Si le second est absent, il est supposé être le même que le premier. Si les deux sont absents, la valeur par défaut "stretch" est utilisée."
C'est ce j'ai montré dans ma dernière capture de mon post précédent.
Je sais pas si j'ai bien saisi: tu veux faire remonter que la bordure sans que ça remonte tes autres barres ?bormat a écrit :sinon pour faire remonter la bordure il y a un code ?
car si je met un margin-top ça va tout me déplacer
D'après ta capture, j'ai l'impression qu'elle va se retrouver sur tes m-page
Enfin si c'est bien ça, ça à l'air de pouvoir se faire en agissant sur la hauteur de navigator-toolbox:
(par exemple chez moi elle est de 68px)avec 0 < min-height < max-height , et ensuite tu agis sur max-height pour régler la position de ta bordure.Code : Tout sélectionner
#navigator-toolbox { -moz-border-image: url("http://i.imgur.com/E9ZVv.png") 0 0 100% 0 / 0 0 10px 0 round !important; min-height: 60px !important; max-height: 68px !important; }
en tout cas merci la bordure marche bien
Re: personnaliser Firefox avec le userChrome.css
C'est bien ce que j'ai décris que tu veux faire ? :bormat a écrit :tampis pour' la bordure (ton code me coupe les bars et donc cache la barre personnel)
Si oui, tu choisis bien ta propre valeur pour max-height ?Freddy a écrit :Je sais pas si j'ai bien saisi: tu veux faire remonter que la bordure sans que ça remonte tes autres barres ?bormat a écrit :sinon pour faire remonter la bordure il y a un code ?
car si je met un margin-top ça va tout me déplacer
D'après ta capture, j'ai l'impression qu'elle va se retrouver sur tes m-page
Je veux dire, il faut que tu adapte cette valeur à ta config: "navigator-toolbox" chez toi est sûrement plus haut que mes 68px.
Avec ce code, chez moi j'arrive à placer la bordure au pixel près, et sans que le reste bouge.
Bien-sûr, quand max-height devient trop petit, ça rogne la barre perso.
Re: personnaliser Firefox avec le userChrome.css
voici ma derniere capture la bordure prend plus de place http://i.imgur.com/718xF.pngFreddy a écrit :C'est bien ce que j'ai décris que tu veux faire ? :bormat a écrit :tampis pour' la bordure (ton code me coupe les bars et donc cache la barre personnel)Si oui, tu choisis bien ta propre valeur pour max-height ?Freddy a écrit :Je sais pas si j'ai bien saisi: tu veux faire remonter que la bordure sans que ça remonte tes autres barres ?bormat a écrit :sinon pour faire remonter la bordure il y a un code ?
car si je met un margin-top ça va tout me déplacer
D'après ta capture, j'ai l'impression qu'elle va se retrouver sur tes m-page
Je veux dire, il faut que tu adapte cette valeur à ta config: "navigator-toolbox" chez toi est sûrement plus haut que mes 68px.
Avec ce code, chez moi j'arrive à placer la bordure au pixel près, et sans que le reste bouge.
Bien-sûr, quand max-height devient trop petit, ça rogne la barre perso.
je ne peux pas mettre un code qui marche que pour ma configuration vu que c'est pour faire un theme
Re: personnaliser Firefox avec le userChrome.css
sorry, j'avais pas saisi.bormat a écrit :je ne peux pas mettre un code qui marche que pour ma configuration vu que c'est pour faire un theme
Et si tu reviens à ton idée de départ,
mais en t'y prenant plutôt comme ça:bormat a écrit :c'est bon j'ai trouvé en utilisant "window" comme fond et navigator-toolbox comme bordure
voilà ce que ça donne avec mes images ( ça marche que si votre theme n'a pas déjà des images comme fond de bar)/*bordure du bas */Code : Tout sélectionner
/*bordure du bas */ #navigator-toolbox { background: transparent url("http://i.imgur.com/E9ZVv.png") repeat-x bottom/* mettre top pour faire une bordure en haut*/; } /*fond*/ window{ -moz-appearance : none !important; background-image : url("http://i.imgur.com/bHuAy.jpg") !important; background-position: top left !important; background-repeat : repeat-x !important; background-color : #FFFFFF !important; }
#navigator-toolbox {
background: transparent url("http://i.imgur.com/E9ZVv.png") repeat-x bottom/* mettre top pour faire une bordure en haut*/; ← J'ai trouvé pourquoi ça marchait pas chez moi: ... !important;
}
si vous avez un code plus propre qui necessite pas window ça m'interresse
voilà ce que ça donne http://i.imgur.com/YVaya.png
Code : Tout sélectionner
#navigator-toolbox
{ -moz-appearance : none !important;
background-image : url("http://i.imgur.com/bHuAy.jpg") !important;
}
#PersonalToolbar
{ background: transparent url("http://i.imgur.com/E9ZVv.png") repeat-x bottom !important; }
Bon je me suis pas occupé de la barre d'onglet vu que c'est pas pareil (pour moi elle est pas en haut) ,apparemment tu la traite à part.
Re: personnaliser Firefox avec le userChrome.css
ok je vais revenir au 1er code ;au moins ça m'aura appris à me servir de border-image .Freddy a écrit :sorry, j'avais pas saisi.bormat a écrit :je ne peux pas mettre un code qui marche que pour ma configuration vu que c'est pour faire un theme
Et si tu reviens à ton idée de départ,mais en t'y prenant plutôt comme ça:bormat a écrit :c'est bon j'ai trouvé en utilisant "window" comme fond et navigator-toolbox comme bordure
voilà ce que ça donne avec mes images ( ça marche que si votre theme n'a pas déjà des images comme fond de bar)/*bordure du bas */Code : Tout sélectionner
/*bordure du bas */ #navigator-toolbox { background: transparent url("http://i.imgur.com/E9ZVv.png") repeat-x bottom/* mettre top pour faire une bordure en haut*/; } /*fond*/ window{ -moz-appearance : none !important; background-image : url("http://i.imgur.com/bHuAy.jpg") !important; background-position: top left !important; background-repeat : repeat-x !important; background-color : #FFFFFF !important; }
#navigator-toolbox {
background: transparent url("http://i.imgur.com/E9ZVv.png") repeat-x bottom/* mettre top pour faire une bordure en haut*/; ← J'ai trouvé pourquoi ça marchait pas chez moi: ... !important;
}
si vous avez un code plus propre qui necessite pas window ça m'interresse
voilà ce que ça donne http://i.imgur.com/YVaya.pngChez moi ça à l'air d'être correct cette affaire.Code : Tout sélectionner
#navigator-toolbox { -moz-appearance : none !important; background-image : url("http://i.imgur.com/bHuAy.jpg") !important; } #PersonalToolbar { background: transparent url("http://i.imgur.com/E9ZVv.png") repeat-x bottom !important; }
Bon je me suis pas occupé de la barre d'onglet vu que c'est pas pareil (pour moi elle est pas en haut) ,apparemment tu la traite à part.
il vaut mieux pas que je mette la bordure à personnal toolbar car si quelqu'un à une barre en dessous ça risque de faire bizarre
ok pour le !important
pour ma barre d'onglet je met ça
Code : Tout sélectionner
.tabbrowser-strip {
top:0 !important;
position:fixed !important;
width:100%;
background:url("chrome://browser/skin/tabbrowser/tabbar.png") !important;
height:22px !important;
}
tab[selected="true"],tab:hover:active[selected="true"] {
background:transparent url("chrome://global/skin/toolbar/t5.png") fixed top left !important;
}
l'apparence est bonne on va dire que c'est résolu
Re: personnaliser Firefox avec le userChrome.css
Suite à une demande en privé, autant répondre ici, et j'en profite pour me permettre de rajouter une petite précision:
Il s'agit donc de comment mettre une image de fond dans les menus, la réponse se trouve à la première page de ce topic, voir au chapitre Menu → "&40 Photo ou image perso en fond de menus".
Mais si on veut changer d'image suivant les différents menus, on peut retrouver la liste à l'aide d "inspecteur DOM" à cette endroit:
voilà pour cette question
Je vais aussi en profiter pour poser une question qui me turlupine suite au sujet précédent, c'est un peu hors sujet, mais ça à quand même avoir avec l'apparence, et je pense que ça va être vite fait vu les membres qui fréquentent ce forum:
Voilà, j'ai de plus en plus ma ptite curiosité qui s'agite pour ce qui est de découvrir Linux, mais je vois souvent dans les captures (comme celle de bormat: http://i.imgur.com/YVaya.png ) une barre supplémentaire - tout en haut -par rapport à windows.
C'est obligatoire ce genre d'affichage avec Linux je trouve que ça fait beaucoup.
Qui est en ligne ?
Utilisateurs parcourant ce forum : Bing [Bot] et 15 invités