personnaliser Firefox avec le userChrome.css
Modérateurs : myahoo, nico@nc, Mori, jpj
Re: personnaliser Firefox avec le userChrome.css
J'ai beau chercher dans tout le post, mais je dois être une quiche pour ne pas avoir trouvé !
Sur la barre d'adresse, j'ai une espèce d'ombre grise qui me cache mon persona (il s'agit d'un persona animé qui plus est). Et elle rend le texte des icônes illisible qui plus est
=> Y aurait-il un moyen de supprimer cette surbarre grise qui cache le persona via le fichier userchrome.css ?
Merci d'avance
Re: personnaliser Firefox avec le userChrome.css
Je sais pas si c'est bien de ça dont tu parles mais je tente ma chance
Code : Tout sélectionner
#urlbar
{
background: transparent !important;
/* si tu veux aussi changer sa largeur ajoute la suite */
min-width: 550px !important;
max-width: 550px !important;
}
Si tu veux estomper +/- l'affichage de l'étoile
Code : Tout sélectionner
#urlbar-icons { opacity: 0.6 !important }
Si t'as conservé aussi la barre de recherche tu peux lui réserver le même sort:
Code : Tout sélectionner
.searchbar-textbox
{ background: transparent !important; }
Si c'est pas ta question, met une capture ou le lien de ton personas.
Re: personnaliser Firefox avec le userChrome.css
Merci de ta réponse.
Voici la capture d'écran de Firefox, avec la barre grise qui masque une partie du persona :
Note au passage que cette barre grise rend le texte des icônes illisible, en plus d'être franchement laide !!
Juste pour que tu aies une ch'tite idée du problème Parce que cette barre grise qui me cache une partie du Persona et rend le texte illisible, ça ne le fait pas vraiment
Merci encore de ton aide ______________________________@
Re: personnaliser Firefox avec le userChrome.css
brââ ! un persona, en principe, c'est le fond de tout !
mais Dieu ! quel est ce mystérieux mystère ?
c'est ta barre de nav qui sembla allergique, essaie
Code : Tout sélectionner
#nav-bar
{
-moz-appearance:none!important;
background:transparent !important;
}
tel Edith :
ça le fait avec n'importe lequel mécréant ?
edith moi :
ting ! j'ai perdu le combiné, haha !
Re: personnaliser Firefox avec le userChrome.css
A suivre, et si ça recommence, je testerai ton truc sur le fichier CSS.
Peut-être que c'est le profil de l'ancienne version qui est allergique à la nouvelle version. A suivre donc....
Re: personnaliser Firefox avec le userChrome.css
Je découvre avec enthousiasme les possibilités de personnalisation de firefox!
Mon souhait:
Barre personnelle-> Chaque répertoire possède une icône personnalisée et le nom du dossier est masqué
Au passage de la souris sur l’icône -> le nom du dossier s'affiche.
Seulement voilà je suis trèèèèèèèèèès très loin de maitriser les outils...
J'essaye d'utiliser DOM inspector pour trouver les attributs/id/label mais les dossiers de la barre personnelle ne s'affichent pas dans l’aperçu de chrome://browser/content/browser.xul... Y aurait-il une xul juste pour la barre personnelle?
Pour le premier répertoire nommé "Ziq"
Code : Tout sélectionner
.bookmark-item[container="true"][label="Ziq"]
{
/*Remplace l'icone du dosier*/
list-style-image: url('file:///I:/Profils/Firefox/Profils/Yann/chrome/img_dossiers/Ziq.png') !important;
-moz-image-region: rect(0px 16px 16px 0px) !important;
/*Cache le texte*/
display: none !important;
}
Ensuite je crois avoir compris que pour détecter le passage de la souris il faut utiliser ":hover" mais là encore comment ?
Ensuite le must serait qu'il cherche automatiquement l'image en fonction du label du dossier: dossier "Ziq" hop le chemin recherché pour l'image sera "...Ziq.png"
Voilà merci de m'avoir lu!
Yann.
Re: personnaliser Firefox avec le userChrome.css
Si, ils sont bien présents: une fois que tu as cliqué sur le bouton de sélection d'élément (voir le "1" de ma capture) → dans l'interface de FF tu cliques sur le dossier de ton choix qui doit alors être sélectionner en rouge → tu retournes à la fenêtre DOM et la ligne est directement surlignée.ROUGE XIII a écrit :J'essaye d'utiliser DOM inspector pour trouver les attributs/id/label mais les dossiers de la barre personnelle ne s'affichent pas dans l’aperçu de chrome://browser/content/browser.xul... Y aurait-il une xul juste pour la barre personnelle?
Tu peux ensuite cliquer sur la flèche (voir "2" sur capture) pour dérouler l'arborescence de la composition de cet élément.
Tiens pis je glisse ce lien http://www.geckozone.org/forum/viewtopi ... 4f#p601019, si il peut être utile à d'autres qu'à un fou
Et donc pour ce qui concerne le texte de tes dossiers, tu peux faire
Code : Tout sélectionner
.toolbarbutton-text[value="Ziq"]
{ display: none !important }
.bookmark-item:hover > .toolbarbutton-text
{ display: -moz-box !important; }
La solution serait de mettre un peu de delay pour éviter ça.
Et la bonne nouvelle c'est que maintenant avec FF4 (Gecko 2) on peut le faire
La mauvaise c'est que la propriété "display" n'est pas prise en compte pour faire ça avec "moz-transition"
C'est pas grave, pcq la bonne nouvelle c'est qu'on peut ruser et faire autrement; l'astuce peut consister à agir sur la largeur de la zone de texte plutôt que sur son affichage, ce qui donne par exemple:
Code : Tout sélectionner
.bookmark-item[container] > .toolbarbutton-text
{ width: 0 !important }
.bookmark-item[container]:hover > .toolbarbutton-text
{
width: 100% !important;
-moz-transition-property: width !important;
-moz-transition-delay: 300ms !important;
}
Et bien sûr tu mets ce que tu veux comme valeur de delay.
ça je sais pas si c'est faisable, du moins en css, en tout cas je sais pas encore faire...ROUGE XIII a écrit :Ensuite le must serait qu'il cherche automatiquement l'image en fonction du label du dossier: dossier "Ziq" hop le chemin recherché pour l'image sera "...Ziq.png"
Tout ce que je peux te dire, c'est que tu peux simplifier un peu la syntaxe, pour la position → "auto", et si comme dans ton cas tes images sont placées dans le dossier Chrome → tu peux indiquer plus simplement le chemin, ça donne:
Code : Tout sélectionner
.bookmark-item[label="Ziq"]
{
list-style-image: url('img_dossiers/Ziq.png') !important;
-moz-image-region: auto !important;
}
Re: personnaliser Firefox avec le userChrome.css
Tout d'abord un grand merci à toi Freddy pour cette réponse très détaillée qui m'a permis de faire ce que je voulais!
En fait je me suis peut-être mal exprimé, lorsque je navigue, les dossiers et adresses de la barre personnelle sont bien visible, mais lorsque je passe dans l'aperçu du DOM inspector, ils disparaissent :J'essaye d'utiliser DOM inspector pour trouver les attributs/id/label mais les dossiers de la barre personnelle ne s'affichent pas dans l’aperçu de chrome://browser/content/browser.xul... Y aurait-il une xul juste pour la barre personnelle?
http://img11.hostingpics.*net*/pics/616420Screen1.jpg ( enlever les * de .net)
=>Du coup j'avais du mal à retrouver le nom des éléments.
Néanmoins grâce à toi j'ai bien avancé:
Code : Tout sélectionner
/*opérations sur les dossiers de la barre personnelle*/
/*Cache le texte de tous les dossiers*/
.bookmark-item[container] > .toolbarbutton-text
{ width: 0 !important }
/*Remplace l'icone d'un dosier*/
.bookmark-item[container="true"][label="Musiques"]
{
list-style-image: url('img_dossiers/_Musiques.png') !important;
-moz-image-region: auto !important;
}
.bookmark-item[container="true"][label="Cameras"]
{
list-style-image: url('img_dossiers/_Cameras.png') !important;
-moz-image-region: auto !important;
}
.bookmark-item[container="true"][label="E-commerce"]
{
list-style-image: url('img_dossiers/_E-commerce.png') !important;
-moz-image-region: auto !important;
}
.bookmark-item[container="true"][label="Attente"]
{
list-style-image: url('img_dossiers/_Attente.png') !important;
-moz-image-region: auto !important;
}
/*Affiche le texte du dossier au passage de la souris*/
.bookmark-item[container="true"][label="Musiques"]:hover > .toolbarbutton-text
{
width: 100% !important;
-moz-transition-property: width !important;
/*-moz-transition-delay: 10ms !important;*/
}
.bookmark-item[container="true"][label="Cameras"]:hover > .toolbarbutton-text
{
width: 100% !important;
-moz-transition-property: width !important;
/*-moz-transition-delay: 10ms !important;*/
}
.bookmark-item[container="true"][label="E-commerce"]:hover > .toolbarbutton-text
{
width: 100% !important;
-moz-transition-property: width !important;
/*-moz-transition-delay: 10ms !important;*/
}
.bookmark-item[container="true"][label="Attente"]:hover > .toolbarbutton-text
{
width: 100% !important;
-moz-transition-property: width !important;
/*-moz-transition-delay: 10ms !important;*/
}
Merci!
Re: personnaliser Firefox avec le userChrome.css
Sinon tu peux alléger un peu ton code (c'est pas obligatoire mais c'est peut-être plus claire) en regroupant les sélecteurs qui ont exactement la même déclaration de style et en les séparant par une virgule:
Code : Tout sélectionner
/*Affiche le texte du dossier au passage de la souris*/
.bookmark-item[container="true"][label="Musiques"]:hover > .toolbarbutton-text,
.bookmark-item[container="true"][label="Cameras"]:hover > .toolbarbutton-text,
.bookmark-item[container="true"][label="E-commerce"]:hover > .toolbarbutton-text,
.bookmark-item[container="true"][label="Attente"]:hover > .toolbarbutton-text
{
width: 100% !important;
-moz-transition-property: width !important;
/*-moz-transition-delay: 10ms !important;*/
}
Re: personnaliser Firefox avec le userChrome.css
Je voudrais juste, dans ma barre perso, virer le texte "Marques-pages" entouré sur ma capture (icone du menu déroulant des marque-pages) et eventuellement changer cette icone.
Je n'arrives pas à passer de DomInspector où je trouve la ligne (que j'arrive à modifier avec clik D, éditer) à Stylish pour verifier et valider mes modifs, j'ai toujours des erreurs.
Quelqu'un de sympa pour me sortir ce ..$*)=-^ù:. de code ?
merci
Re: personnaliser Firefox avec le userChrome.css
Il aurait fallu que tu mettes ton code pour voir ce qui cloche.
Sinon apparemment ça roule avec ce code:
Code : Tout sélectionner
/* supprimer le texte */
#bookmarks-menu-button > label
{ display: none !important; }
/* changer l'icone */
#bookmarks-menu-button > image
{
list-style-image: url("file:/chemin_image_sur_ton_DD") !important;
-moz-image-region: auto !important;
}
Par contre
j'ai pas bien saisi...piero31 a écrit :Je n'arrives pas à passer de DomInspector où je trouve la ligne (que j'arrive à modifier avec clik D, éditer) à Stylish pour verifier et valider mes modifs, j'ai toujours des erreurs.
Re: personnaliser Firefox avec le userChrome.css
Alors, dans mon DomInspector, j'arrivais à identifier la ligne que je voulais modifier et dans le volet droit, quand je clik droit sur cette ligne, j'ai un menu "éditer" qui m'ouvre une fenêtre d’où je pouvais changer le texte. Par contre, je n'arrivais pas à copier ces codes vers styllish pour valider mes chgtsPar contre
piero31 a écrit:Je n'arrives pas à passer de DomInspector où je trouve la ligne (que j'arrive à modifier avec clik D, éditer) à Stylish pour verifier et valider mes modifs, j'ai toujours des erreurs.
j'ai pas bien saisi...
Re: personnaliser Firefox avec le userChrome.css
Re: personnaliser Firefox avec le userChrome.css
A plus
Re: personnaliser Firefox avec le userChrome.css
j'ai quelques questions concernant la personalisation :
1-j'ai trouvé ça pour pouvoir déplier la barre dans latérale au passage du curseur le côté de la fenêtre :
Code : Tout sélectionner
@namespace url("http://www.mozilla[point]org/keymaster/gatekeeper/there[point]is.only.xul");
#sidebar-box {min-width:0; max-width:1px!important; overflow-x: hidden !important;}
#sidebar,#sidebar-title,#sidebar-box .tabs-closebutton {visibility:hidden;}
#sidebar-box:hover {max-width:none!important;}
#sidebar-box:hover #sidebar,#sidebar-title,#sidebar-box .tabs-closebutton {visibility:visible;}
#sidebar-splitter {border-width: 0px!important; min-width: 0!important; max-width: 0!important;}
#sidebar-box:hover + #sidebar-splitter {border-width: 0 1px!important; min-width: 4px!important; max-width: 4px!important;}
pour regarder tous mes flux : je la laisse ouverte
quand je veux je veux jeter un rapide coup d'oeil pour voir les nouveaux, elle se déplie et se replie automatiquement
2-j'ai aussi ajouter l'ottocode (merci ) pour cacher les boutons suivant/précédent quand indisponibles
Code : Tout sélectionner
#back-button[disabled="true"],
#forward-button[disabled="true"]
{
display: none;
}
le bouton s'efface, mais les autres restent fixes
3- j'ai aussi piquer ça, pour avoir l'arrière des boutons rond,
Code : Tout sélectionner
/*
_________________________________________________________________________
| | |
| Title: | Rounded Toolbar Buttons (Circle or Custom) |
| Description: | Change the toolbar buttons to have a rounded radius |
| Author: | -=Ben=- |
| Date Created: | June 27, 2008 |
| Last Updated: | June 27, 2008 |
| Version: | 1.0.0.1 |
|__________________|______________________________________________________|
*/
@namespace url(http://www.mozilla[point]org/keymaster/gatekeeper/there[point]is.only.xul);
/* hide toolbar button impressions: */
toolbar:hover
{
-moz-border-radius: 20px !important; /* Change this to 5px to get nicely rounded buttons instead of round buttons - Code below: */
/* -moz-border-radius: 5px !important; */ /* This is the code to make the borders nice Rounded Edges - not circles */
}
merci d'avance du coup de main...
Qui est en ligne ?
Utilisateurs parcourant ce forum : Aucun utilisateur inscrit et 23 invités