Bandeau

Site de démonstration du jeu de squelettes ESCAL fonctionnant sous SPIP3 et mis à la disposition des Etablissements SColaires de l’Académie de Lyon... et de qui veut.

Icônes SVG

Yann
le 1er mars 2019
à 21:15
Rappel du sujet :

Bonsoir,

Avec le changement des icônes en SVG nous avons des icônes trop grandes par rapport à ce qu’il y avait avant. Je souhaite les redimensionner. Pour certaines j’ai trouvé, mais d’autres pour la barre d’icônes dans les articles comme Facebook, Twitter, email je ne trouve pas ces images. Où sont-elles ?
Merci.

Yann

Icônes SVG

Hello

Avec les icones SVG, une simple règle css permet de dimensionner les icônes très facilement sans pixellisation. Pour ceux qui t’intéressent, tu colles ce code dans /squelettes/styles/perso.css et tu mets la valeur que tu souhaites.

#outils-article img, #outils-article .article-pdf, #diminuer img, #augmenter img {
    height: 32px;
}

et hop !

Icônes SVG

Merci.

Je je pense que le code change pour chaque image ? Je veux dire le nom de l’image.
Dans ton exemple tu mets article-PDFs, mais pour Facebook, Twitter, e-mail, etc. ?
yann

Icônes SVG

Toutes les images qui sont dans #outils-articles seront impactées. En effet, la souci est que les images de socialstags ne sont pas en SVGndonc si on les agrandit, ça pixellise.

Icônes SVG

Donc je colle juste le code que tu as mis et je donne la dimension que je veux et ça l’appkique Sur toutes les icônes ?
yann

Icônes SVG

Oui, essaye tu verras, c’est magique !

Icônes SVG

J’essaie demain matin...là je fatigue 😂

merci.

Yann

Icônes SVG

Tout marche. Il me reste juste l’icône RSS dans le pied de page que je ne sais pas réduire en taille et les 2 flèches (>>) à côté de recherche que j’aimerais adapter à la couleur d’ensemble de mon site.

Où puis trouver tout ça ?
Merci.
Yann

Icônes SVG

Pour les 2 modifs qu’il me restait (icône RSS et flèches >> de soumission du formulaire recherche), un peu de modif dans perso css et c’est bon. 🙂

icones SVG

En revanche, faut que je revoie ma copie pour les forums car les smiley sonu un chouille trop gros ^^

Icônes SVG

😉 Ce n’est pas dramatique !

Merci pour tout ce travail.

Yann

Icônes SVG

c’est corrigé !
Et du coup, ton souci m’a interpellé et j’ai rajouté dans la config d’Escal le choix de la taille des icônes de la barre d’outils des articles et celle des icônes du pied de page... livré à l’instant.

Icônes SVG

Au fait, j’y pense, pour les flèches >> de soumission du formulaire recherche, que souhaitais -tu et qu’as-tu fait ?

Je suis toujours intéressé par les idées des utilisateurs, ce sont eux mes muses !

Icônes SVG

Super ! Et merci d’avoir ajouté dans la config d’Escal.
Pour les flèches >> j’ai ajouté ceci dans mon fichier perso.css :

.formulaire_recherche input.submit:hover{
        color: #dd8806;
}
Icônes SVG

ok on est dans le détail là.

A noter que

.submit:hover {
    color: #dd8806;
}

permettrait de colorier tous les "submits" du site et donc de gagner en cohét=rence graphique

Icônes SVG

Merci pour cette info. J’avoue que le css n’est pas mon point fort. 😉
Yann

Couleur des icônes

Bonjour,
C’est en doublons avec ma questions dans "Couleur de la barre d’outils light" mais je pense que c’est mieux ici.
Donc je reformule :
Comment on peut modifier la couleur de certaines icônes ?

Couleur des icônes

Bonjour,
Il faut modifier les couleurs des icônes concernées qui se trouvent dans escal/images puis une fois modifiées les placer dans squelettes/images.
Yann

Couleur des icônes

Les icones sont dans le fichier "1-icones-escal.svg".
C’est lui que je modifie et que je place ensuite dans squelettes/images ?

Couleur des icônes

Non ! Ce fichier svg liste les icônes svg utilisées par Escal. Il faut modifier chaque icône séparément.

Couleur des icônes

OK
Merci

Couleur des icônes

Et pour repérer le nom du fichier à copier, il faut regarder dans le fichier 2-liste-icones-svg.ods

Couleur des icônes

Merci à tous pour votre aide !
ça marche comme je veux, les couleurs sont dans le ton du site !

Couleur des icônes

Hmm, j’ai comme l’impression que tu as enregistré tes images en png puis que tu les as renommées en svg car là si on les agrandit, elles pixellisent bien !

Couleur des icônes

C’est pour moi ou pour Sylvain ?

Couleur des icônes

Pour le webmestre de https://maisondesprovinces.fr/ (j’avoue que je m’y perds en passant d’un problème à l’autre ...)

Couleur des icônes

J’avoue que je n’ai pas trouvé comment changer de couleur sur un fichier svg dans Inkscape. Je ne connais pas trop ce logiciel. 🙁

Couleur des icônes

Alors c’est le moment de s’y mettre !

Une fois ton fichier ouvert, tu choisis l’outil "sélectionner et transformer des objets" et tu cliques sur l’image.
Ensuite dans le menu "objets" tu cliques sur "fond et contours".
Enfin, tu choisis la couleur du fond et/ou des contours pour mettre la couleur que tu veux.
Pour certaines images, il vaut mieux utiliser l’outil "Editer les noeuds ..." pour changer la couleur des différents éléments de l’image.

Et si tu n’y arrives pas, donne-moi le code couleur que tu veux pour quelle image et je te fais ça.

Couleur des icônes

J’ai fait un essai. L’icône est nettement mieux 🙂. Par contre pour remplir avec la couleur choisie je dois cliquer de nombreuses fois jusqu’obtenir la couleur souhaitée. Il n’y a pas moyen comme dans Photoshop de remplir d’un seul clic avec le pot de peinture ?
Yann

Couleur des icônes

C’est sympa. Mon code couleur est : 623b70

yann

Couleur des icônes

Ah si l’outil "Remplir une zone bornée" correspond à l’outil "pot de peinture" et fonctionne aussi.
Rappelle-moi ton mail que je t’envoie le fichier imprimer.svg recolorisé car les fichiers .svg ne passent pas ici

Couleur des icônes

Mon e-mail est : yannick.boschel chez gmail.com

Réagir au sujet
Qui êtes-vous ?
Votre message

Pour créer des paragraphes, laissez simplement des lignes vides.
Attention ! Si votre message contient un lien, il devra être validé par le webmestre. Inutile de le poster à nouveau ;-)

Ajouter un document

Plan du site Contact Mentions légales Données personnelles et cookies Espace privé squelette RSS

2009-2025 © Escal - Tous droits réservés
Haut de page
Réalisé sous SPIP
Habillage ESCAL 5.2.14