personnaliser Firefox avec le userChrome.css

[Giulia]

Bonjour à tous,
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

[Freddy]

Bonjour,


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

à régler suivant tes envies bien sûr.


Si tu veux estomper +/- l'affichage de l'étoile

Code : Tout sélectionner

#urlbar-icons { opacity: 0.6 !important }

(valeur de 0 à 1 ou 100%)


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

sa largeur étant réglable directement par un clic-gauche sur son bord gauche.



Si c'est pas ta question, met une capture ou le lien de ton personas.

[Giulia]

Salut,
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 ______________________________@

[ottomar]

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

tu n'as rien dans ton userChrome qui obliblibitèrerait le bon fonctionnement du persona ?

tel Edith :
ça le fait avec n'importe lequel mécréant ?

edith moi :
ting ! j'ai perdu le combiné, haha !

[Giulia]

Je touche du bois, mais il semble qu'en virant l'ancien profil et en en mettant un nouveau, ça ait résolu le problème.
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....

[ROUGE XIII]

Bonjour,

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

Alors évidement le display: none cache tout et pas seulement le texte ^^ je suppose qu'il faut affecter l'attribut -text... mais comment ?!

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.

[Freddy]

Bonjour,

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?

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

Par contre y a peut-être une chose de pas top, c'est qu'à chaque passage de la souris sur les icones-dossiers le nom va s'afficher, même si tu vas en fait ailleurs dans l'interface mais que tu es obligé de passer dessus.

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

Là c'est pour tous les Dossiers, si tu veux le faire que pour certain tu sais comment le faire je crois (en ajoutant label[...]) et si tu veux que se soit valable aussi pour tes marque-pages simple (pas que les dossiers) → tu supprimes [container].
Et bien sûr tu mets ce que tu veux comme valeur de delay.

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"

ça je sais pas si c'est faisable, du moins en css, en tout cas je sais pas encore faire...
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;
}

[ROUGE XIII]

Bonjour,

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!

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?

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 :
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!

[Freddy]

Ok d'accord, j'avais pas compris ça, en fait j'utilise pas l'aperçu dans la fenêtre DOM, je regarde directement l'interface.

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

[piero31]

Bonsoir, un petit coup de main serait le bienvenue, j'y suis depuis hier soir, je lis et relis , je teste et j'y arrive pô
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

[Freddy]

bonsoir,

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

(si l'image vient directement du web, tu colles simplement son adresse)


Par contre

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...

[piero31]

Ca roule, merci.

Par 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...

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 chgts

[Freddy]

Pour l'utilisation de Dom-inspector peut-être que parcourir ce topic pourra t'aider, d'autant que si tu utilises Stylish, par le clic-droit sur la ligne sélectionnée [mais en restant dans le volet gauche] tu disposes dans le menu de l'entrée "Sélecteur pour la copie" qui est bien pratique (voir la capture) Faut parfois adapter manuellement le nom du sélecteur suivant ce qu'on veut faire, mais ça reste plus pratique/rapide.

[piero31]

Salut, bon, ça vas mieux, le fait que tu m'a gentiment pondu mon code ma permis de refaire le procédés à l'envers et de comprendre le cheminement, et c'est vrais que j'avais lu ce topic 'à l'arrache" en sautant sur les buts et en zappant la méthode, je vais me relire tout ça tranquillous et me concocter un Firefox aux ptits oignons (c'est la saison).
A plus

[Invité]

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

ça fonctionne très bien, mais est-t-il possible d'avoir le choix de la bloquer ouverte, avec un bouton par exemple? :

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

mais comment empêcher les autres boutons de la barre de piquer leur place? :
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  */
}

mais ça ne fonctionne que sur certains : précédent, suivant, actualiser dans la barre de navigation, et sur aucun dans la barre personnelle, c'est "réparable"??

merci d'avance du coup de main...