Demande d'aide sur personnalisation

[FKB33000]

Bonjour à tous

Depuis quinze jours je planche sur une personnalisation de mon interface

et rencontre un soucis au niveau de la boite de téléchargement. ( pas celui du popup )
mais du panneau

j'ai réussi à trouver quelque lignes dans l’outil du navigateur mais je ne trouve pas ou se trouve le HOVER (#5e798a ) qui indique la surbrillance du téléchargement
Lorsque j'utilise ce code

richlistitem {
-moz-binding: url('chrome://global/content/bindings/richlistbox.xml#richlistitem');
background-color:green!important;
}

Tout mon panneau se met en vert de même que la partie concernant le HOVER
entouré en jaune sur cette image


Ou alors en plus grande


J'ai essayé différents codes mais je n'obtiens aucun résultats

Pourriez vous me dire ou le problème se trouve ?


Ce que je souhaite faire c'est pouvoir donner une couleur au HOVER et de mettre un cadre tout autour de celui-ci
Cette possibilité est elle possible ?



Autre question

Y'a t'il une possibilité de coloriser les Box indiquées en rouge sur cette image et de pouvoir changer la couleur des icones






j'ai essayé d'utiliser ce code

.downloadIconSubviewArrow > .button-box > .button-icon {
list-style-image: url("chrome://browser/skin/panel-icon-arrow-right.svg");
}

.downloadIconSubviewArrow > .button-box > .button-icon:-moz-locale-dir(rtl) {
list-style-image: url("chrome://browser/skin/panel-icon-arrow-left.svg");
}

code en supprimant
les lignes suivantes

list-style-image: url("chrome://browser/skin/panel-icon-arrow-right.svg
list-style-image: url("chrome://browser/skin/panel-icon-arrow-left.svg

et en les remplaçant par une couleur mais cela ne fonctionne pas

fill: #007FFF !important;}


Je remercie par avance les personnes qui m'aideront à trouver la solution

[Cucurbitacé]

richlistitem {
-moz-binding: url('chrome://global/content/bindings/richlistbox.xml#richlistitem');

Bonjour FKB33000,

Peut-être que je me trompe, mais j’ai lu à plusieurs reprises que depuis la version 65, cette ligne n’est plus nécessaire.

Il me semble qu’il faut mettre le code de la partie concernée et à la fin plus deux point et hover, puis ensuite mettre la couleur. Votre fenêtre en anglais s’appel : Library => https://www.ghacks.net/wp-content/uploa ... ptions.png

Vous pouvez tenter de repiquer les codes qui sont ici => https://github.com/Aris-t2/CustomCSSfor ... oads&type=

Bien à vous.

[FKB33000]

Bonjour Cucurbitacé
Je te remercie de ta réponse
J'avais déja effectué une recherche sur les code de Aris-t2 mais n'avait pas trouvé. En tous cas beaucoup de choses m'ont aidé dans ses fichiers
et cela permets aussi d'apprendre pas mal de trucs

Bon hé bien je vais voir ce que je peux faire avec les infos que tu m'as donnés

Bien à toi

Cdlt

[Cucurbitacé]

Bonsoir FKB33000,

C’est par mimétisme que je reproduis mes userChromes.css et userContent.css.
Car c’est très mal expliqué ; c’est le propre des informaticiens, je n’ai jamais vu des personnes avec aussi peu de notion de pédagogie et incapacités à la vulgarisation.

Donc j’observe ce qui se fait sur plusieurs sites ou comptes, je lance des recherches sur ces sites et comptes, le problème, c’est qu’il faut savoir comment ils appellent cela en anglais.

Je vous en propos d’autres qui font du css sur Firefox.

=> https://www.reddit.com/r/FirefoxCSS/ ; je vous conseille de cliquer sur l’icône 3 traits en haut à droite (view).

=> https://github.com/Timvde/UserChrome-Tweaks

=> https://github.com/MrOtherGuy/firefox-csshacks

=> https://gitlab.com/brudolp/userChrome/b ... les/hm.css

=> https://userstyles.org/categories/app ; hélas lui, il n’est pas souvent à jour.


Comme vous cherchez les couleurs, voilà ce que j’utilise sur la fenêtre Library.
Peut-être que cela vous aidera à comprendre et à trouver le truc.

Code : Tout sélectionner

/* Change la couleur des dossiers (icônes) de l'affichage des marque-pages, la partie droite de la fenêtre (library) */
#PlacesToolbarItems toolbarbutton[container="true"] .toolbarbutton-icon,
:-moz-any(
#PlacesToolbarItems,
#PlacesChevronPopup,
#BMB_bookmarksPopup,
#bookmarksMenu) menu[container="true"] > .menu-iconic-left > .menu-iconic-icon {
  fill: #F09993 !important;
}


/* Change la couleur des dossiers (icônes) de la partie gauche de la fenêtre (library)*/
:-moz-any(
#bookmarks-view, 
#editBMPanel_folderTree, 
#placesList, 
#placeContent) treechildren::-moz-tree-image(container), 
#editBMPanel_folderMenuList > .menulist-label-box > .menulist-icon,
#editBMPanel_folderMenuList menupopup menuitem {
  fill: #e8bb00 !important;
}

Puisque vous travaillez sur la fenêtre Library, savez-vous comment ils appellent la partie où il y a les boutons : Tags et History, je cherche à les retirer, je pense qu’ils appellent cela Treechildren, mais ...

=> https://www.ghacks.net/wp-content/uploa ... ptions.png <=

Bien à vous.

[Freddy]

bonjour,
voilà ce qui fonctionne d'après mes essais (et si j'ai bien compris ta demande)

Pour ce qui est du "hover"

Code : Tout sélectionner

#downloadsRichListBox > richlistitem:hover {
  background-color: green !important;
  outline: 1px solid yellow !important;
}

Pour la couleur des boutons:

Code : Tout sélectionner

#placesToolbox #organizeButton,
#placesToolbox #clearDownloadsButton { 
  -moz-appearance: none !important;
  background-color:  rgba(20%,50%,80%,0.7) !important;
  border: 1px solid yellow !important;
  border-radius: 5px;
}

et pour les boutons "avance/retour" de page:

Code : Tout sélectionner

#placesToolbox #back-button > .toolbarbutton-icon,
#placesToolbox #forward-button > .toolbarbutton-icon {
  color: red;
}

Bien entendu, à toi de choisir tes propres valeurs.

Puisque vous travaillez sur la fenêtre Library, savez-vous comment ils appellent la partie où il y a les boutons : Tags et History, je cherche à les retirer, je pense qu’ils appellent cela Treechildren, mais ...

j'ai bien peur que ça dépende d'autre chose que du css, j'ai pas trop de temps pour décortiquer tout ça mais, tout au mieux j'arrive à changer la couleur de fond (pour me montrer que j'interviens bien sur les bons éléments, mais les faire disparaitre...

Code : Tout sélectionner

treechildren::-moz-tree-cell(query, OrganizerQuery_tags_______v),
treechildren::-moz-tree-cell(query, OrganizerQuery_history____v){
  display: none !important;
  visibility:hidden !important;
  max-height: 0px !important; min-height: 0px !important;
  background: red !important;
}

[Cucurbitacé]

j'ai bien peur que ça dépende d'autre chose que du css, j'ai pas trop de temps pour décortiquer tout ça mais, tout au mieux j'arrive à changer la couleur de fond (pour me montrer que j'interviens bien sur les bons éléments, mais les faire disparaitre...

Code : Tout sélectionner

treechildren::-moz-tree-cell(query, OrganizerQuery_tags_______v),
treechildren::-moz-tree-cell(query, OrganizerQuery_history____v){
  display: none !important;
  visibility:hidden !important;
  max-height: 0px !important; min-height: 0px !important;
  background: red !important;
}

Bonjour,

Monsieur Freddy je vous remercie beaucoup, je vais m’amuser avec ça.

Mais juste comme ça, savez-vous si Mozilla a un site, un fichier où il montre tout l’habillage en images, à la J2m06, et désigne comme s’appelle chaque partie ?
Ou alors l’on clique sur une partie et cela nous dit : que la ligne css, c’est ça.

Bien à vous.

[Freddy]

Il y a quelques années j'avais trouvé les noms des sélecteurs en fouillant dans les fichiers de firefox, mais là ...
Pour cette fois je m'y suis pris en passant par la "boite à outils du navigateur" --> onglet "éditeur de style" --> dans la colonne de gauche j'ai ouvert le fichier "tree-icons.css" et j'ai trouvé les différents noms des sélecteurs pour "treechildren::-moz-tree-image".

Ensuite j'ai ajuster pour appliquer à l'élément concerné en utilisant la documentation de cette page https://developer.mozilla.org/fr/docs/M ... r_un_arbre

Par exemple en appliquant ce code:

Code : Tout sélectionner

#placesList treechildren::-moz-tree-cell-text(query, OrganizerQuery_history____v){
  color: transparent !important;
}

#placesList treechildren::-moz-tree-image(query, OrganizerQuery_history____v),
#placesList treechildren::-moz-tree-twisty(query, OrganizerQuery_history____v) {
  list-style-image: none !important;
}

on rend l'entrée "historique" invisible, mais elle est toujours présente

[Cucurbitacé]

Bonjour Freddy,

Ben merci.
En fait, c’est pour gagner de la place, pas pour cacher quelque chose, ne me servant jamais de History et de Tags et ayant beaucoup de signets et de dossiers, je voulais qu'ils apparaissent tous à l'écran et ne pas avoir à me servir des barres latérales pour monter et descendre.

J’avais déjà réussi à réduire l’espace entre les signets et dossiers.

Code : Tout sélectionner

/* agit sur la taille de la police et sur l'interligne entre les icônes dans la partie de gauche de la fenêtre : Afficher les signets */

#placesList treechildren::-moz-tree-cell-text {
  font-size: 11px !important; 
}

#placesList treechildren::-moz-tree-row {
  max-height: 18px !important; 
  padding-bottom: 0px !important;
  margin-bottom: -3px !important
}

Cordialement.

[FKB33000]

Bonjour Freddy

Merci pour les infos que tu as données j’espère pouvoir me débrouiller avec ça

Par contre

bonjour,
voilà ce qui fonctionne d'après mes essais (et si j'ai bien compris ta demande)

Pour ce qui est du "hover"

#downloadsRichListBox > richlistitem:hover {
background-color: green !important;
outline: 1px solid yellow !important;
}

J'ai essayé ce que tu m'as donné effectivement il y'a bien le Hover mais celui de l’arrière plan est toujours la et ne change pas de couleur
je vais continuer à chercher puisque tu m'as donné une piste

Cdlt

[Freddy]

Salut,

J'ai pas trop compris le problème, faudrait que tu détails plus ou mieux parce-que d'après ça:

Ce que je souhaite faire c'est pouvoir donner une couleur au HOVER et de mettre un cadre tout autour de celui-ci
Cette possibilité est elle possible ?

Donc quel arrière-plan ?

[FKB33000]

Bonjour Freddy

Le code que tu m'as donné donne un hover sur l'ensemble celui que je cherche a changer c'est celui qui est en bleu-gris sur cette image




Si je me mets dessus celui-ci devient vert


mais reste en bleu-gris derrière


Merci de ton retour

[Freddy]

bonjour,

Ah ben je sais pas si je vais pouvoir t'aider, pcq ma fenêtre n'a pas la même apparence que chez toi, je sais pas quel OS tu as, mais avec windows7 je n'ai pas cette zone grise supplémentaire:

[FKB33000]

Bonjour Freddy

Je suis aussi sous Win 7
Mais peut être que je me suis mal exprimé
Dans la config normal de Firefox si tu déplaces ta souris sur les fichiers téléchargés la zone se colore en bleu gris
et c'est cette zone la que je souhaite changer

En tous cas merci pour ton intervention je vais continuer à chercher de mon coté