Couleur ou image pour les dossiers marques-page

[Taz.]

Merci pour ton aide, il faut que je creuse le sujet. J'ai réussi à mettre en image comme toi. Néanmoins pour mon idée de base l'avantage serait de remplir l'intérieur et l'extérieur du dossier avec une couleur au choix.

Je continue de chercher. Merci à toi

[dmganges]

Bonjour,
J'ai amélioré l'image du dossier en passant en transparence le pourtour :
ImgBB déconne, je colle vers un espace perso : http://spinoza.texte.free.fr/Audio/FF.png

J'ai converti l'image en .svg :

Code : Tout sélectionner

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
 "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
 width="16.000000pt" height="16.000000pt" viewBox="0 0 16.000000 16.000000"
 preserveAspectRatio="xMidYMid meet">

<g transform="translate(0.000000,16.000000) scale(0.100000,-0.100000)"
fill="#FF0000" stroke="red">
<path d="M4 136 c-3 -7 -4 -35 -2 -62 l3 -49 70 0 70 0 0 50 c0 50 0 50 -35
53 -19 2 -39 8 -45 13 -14 14 -55 11 -61 -5z m61 -6 c3 -5 22 -10 41 -10 34 0
34 0 34 -45 l0 -45 -65 0 -65 0 0 55 c0 52 1 55 24 55 14 0 28 -4 31 -10z"/>
</g>
</svg>

Mais je n'arrive toujours qu'à colorier le pourtour :

Code : Tout sélectionner

.bookmark-item[container="true"] {
	list-style-image: url('FF.svg');
	fill: red !important;
}

Si tu trouves Taz, ou quelqu'un d'autre, ça m'intéresse

[Garou]

Bonjour,

La première chose a faire est de trouver une icône en .png
Exemple celle ci https://icon-icons.com/fr/icone/zip-dos ... ive/153880 (télécharger en 512px)
l'ouvrir avec un logiciel de dessin
Une fois ouverte avec le logiciel de dessin, prendre le pot de peinture et la couleur que l'on veut mettre
Changer la couleur:
- du trait du dossier (qui est actuellement bleu)
- la couleur du dossier (qui est actuellement jaune)
- la couleur extérieur du dossier (qui est actuellement blanc (transparent))
Une fois fini enregistrer l'image avec le nom du dossier que l'on veut lui donner ( Voyage / Emploi / Forum / etc...
Quand toutes les images sont prêtes, 2 solutions, soit ont redimensionnement les images en 32x32 px, soit on les laisse telles quelles.
On copie les images dans les dossier chrome (du profil de Firefox)
Dans le fichier userChrome.css

Exemple:
Avec trait du dossier en vert, la couleur du dossier en jaune, la couleur extérieur du dossier en violet.

Code : Tout sélectionner

/* ICÔNES des dossiers Marque-pages Barre Personnelle */
.bookmark-item[container="true"][label="Voyage"] { list-style-image: url('Voyage.png') !important;
}

(la couleur vert est celle de mon Windows)



Avec une couleur Violet de la case complète du marque-pages.

Code : Tout sélectionner

/* ICONES des dossiers Marque-pages Barre Personnelle */
.bookmark-item[container="true"][label="Voyage"] { list-style-image: url('Voyage.png') !important;
background: Violet !important;
}

Avec une couleur Violet de la case complète du marque-pages et une police légèrement de style gras.

Code : Tout sélectionner

/* ICONES des dossiers Marque-pages Barre Personnelle */
.bookmark-item[container="true"][label="Voyage"] { list-style-image: url('Voyage.png') !important;
background: Violet !important;
font-weight: 600
}

Il est aussi possible de prendre une autre icône qui ne soit pas un dossier.
Exemple ici avec l’icône Médical recolorer la couleur extérieur en rouge et la case complète du marque-pages en Aqua.


Icône trouver ici https://icon-icons.com/fr/
Amusez vous bien.

[dmganges]

Merci Garou !

J'étais en train de répondre, j'ai quelque chose de similaire.
Avec Taz on souhaitaient uniquement colorier l'intérieur de l'icône.
Il semble qu'on ne puisse pas modifier l'intérieur d'un .svg du moins en CSS.
Dans notre cas ça nous oblige à en créer plusieurs comme tu le fais.
Pour le moment j'en suis là :
Ici il y a une collection d’icônes dont [Folder] et dont peut modifier les couleurs, pour certains la taille, et à récupérer en .svg
On peut également modifier une icône perso en la poussant sur le site...
Ensuite :

Code : Tout sélectionner

.bookmark-item[container="true"][label="Util"] { list-style-image: url('Folder-16.svg') !important; }
.bookmark-item[container="true"][label="Docu"] { list-style-image: url('Folder.svg') !important; }
.bookmark-item[container="true"] { list-style-image: url('Folder_2.svg') !important; }

Ça donne :