Salut à toi, c’est Pascal.
Aujourd’hui, je vais te montrer comment gérer différentes couleurs d’icônes.
Là par exemple, j’ai la couleur verte, la couleur or, mais aussi comment gérer encore plus pour aller encore plus loin différents symboles d’icônes et leur donner la couleur que tu le souhaites comme par exemple je l’ai fait ici avec un système de check vert et de croix rouge.
Souvent dans beaucoup de thèmes, je vois que les personnes ont remplacé leurs listes à puces par ce petit check qui est très esthétique.
J’utilise sur, absolument, tous mes shops, mais c’est vrai que parfois on est limité par ce réglage unique, parce qu’on ne veut pas forcément utiliser toujours la même couleur, utiliser toujours le même symbole.
Il y a eu pas mal de demandes à ce sujet, je me suis dit : « Je vais quand même faire une vidéo, ça va être une vidéo sur le HTML, sur le CSS, c’est un excellent cas d’étude, un cas d’école pour voir comment on va travailler dessus ».
Tu vas voir que c’est par rapport aux réglages à unicolore que tu as pu voir, ce n’est pas forcément plus complexe.
C’est un exercice qui va te permettre de comprendre comment définir une classe, comment t’organiser entre le HTML et le CSS.
Ensuite, tu verras que tu peux faire absolument tout ce que tu veux.
Une Bibliothèque d’Icônes Disponible sur Internet
Dans le cadre de cet exercice, on va utiliser ce qui s’appelle les FontAwesome.
C’est un site qui te recense absolument tous les symboles que tu peux ajouter avant ta petite liste.
Là, j’ai mis un check, je n’ai pas cherché à mettre des symboles hyper complexes, il ne faut pas non plus aller chercher midi à 14 heures.
Mais sache que tous ces symboles existent, ils sont définis par un identifiant que l’on retrouve ici. Tu peux tout à fait les utiliser.
Après, dans le cas du E-Commerce, il ne faut pas non plus chercher à intégrer n’importe quel symbole, mais il y en a qui sont quand même intéressants.
Là par exemple, pour le colis et le petit cadeau pour une promotion, la vue pour faire un compteur et dire tant de personnes voient actuellement ceci.
Il y a plein de petits exemples comme ça.
Mais actuellement, on va surtout se baser sur le petit check et sur la croix.
C’est le nom par lequel ils sont définis dans le HTML et dans le CSS.
Ça, c’est vraiment la valeur de cet identifiant.
C’est parti.
On va regarder tout de suite comment ça marche.
Du Code Personnalisé à votre Disposition
Je t’ai fait un petit fichier avec Notepad ++.
J’ai mis le langage sur CSS pour voir les différentes couleurs et avoir une lecture plus facile.
Là, ce sera le code que je vais te transmettre dans le cadre de cette vidéo.
Il te suffira d’écrire « check ». Je te mettrai le lien dans la description si ce n’est pas clair.
Je vais te donner le code.
Normalement, il n’y a pas besoin d’écrire plus de choses pour cette vidéo.
Là, c’est ce que tu as pour une seule couleur, là le « content f00c », c’est le check que l’on voit ici.
Là, avec la couleur qu’on a, tu vois je peux aller par exemple ici, je copie-colle le code hexadécimal et là on est sur le rose que j’utilise dans le cadre de mon site Tout Chapinou.
Là, tu as les checks que j’utilise, c’est le code que j’ai écrit sur le site.
À la fin de cette vidéo, je vais te montrer comment faire des checks d’autres couleurs et également intégrer des croix rouges par exemple.
Le code a plusieurs couleurs, voici comment on va le gérer.
Le premier élément, c’est un peu le même, c’est complètement le même.
Ce qui change, c’est qu’ici dans ce code, on ne définit pas de classe.
Pour toutes les listes qui sont par défaut des listes à puces, on lui dit de remplacer le symbole de la liste à puces par ce check de telle couleur avec tel espace entre le check et le texte.
Il est mis sous une certaine taille de police, il n’est pas mis en gras. Toutes ces lignes, c’est ça que ça veut dire.
Par contre, important, font family, on définit le FontAwesome. Ça veut dire que le langage comprend qu’il va aller piocher dans cette bibliothèque-là.
Qu’est-ce qui change quand on se met avec un système de plusieurs couleurs ? Ce sera toute cette partie de code.
Il va falloir définir des classes.
Pour chaque classe, moi, je l’ai fait simple, j’ai défini trois éléments.
J’ai défini un check vert, ce sera « li.vert » il revient ici, « li.rose » le check rose qu’on avait par défaut dans ce premier système.
Dans mon cas, c’est rose, parce que ma couleur primaire c’est rose, mais toi par exemple tu pourras mettre ta couleur primaire. « li.rose » ma couleur rose hexadécimal, c’est celle-ci, mais toi, si tu as du rouge, tu mettras du rouge, si tu as du bleu, tu mettras du bleu.
C’est pour reprendre la couleur primaire et ajouter plus de Branding.
Ensuite, la croix. J’ai bien mis le « f00d » pour importer la croix et ensuite en couleurs j’ai mis du rouge.
Le rouge, si tu te souviens, c’est assez facile à retenir, c’est « ff0000 », c’est le rouge pur.
Je t’avais fait un petit cours à l’époque sur les codes hexadécimaux.
Le « ff00 » c’est-à-dire que ça prend toute la teinte rouge, mais rien en vert et en bleu.
Si je fais par contre « 00ff » tu vois que c’est du vert pur et enfin « 000ff » c’est du bleu.
C’était le petit rappel. Nous, on est sur du rouge pur.
Ce code, où est-ce que tu l’intègres ?
Pour passer du système d’une couleur à plusieurs couleurs, il faut remplacer le code que tu avais ici avant par celui-ci.
C’est-ce que je vais te montrer tout de suite. Je vais aller dans l’éditeur de Fastlane, dans Theme settings, dans General, je me pousse un petit peu. On va dans Custom CSS.
Là, je vais faire une recherche de cet élément.
On a le système à une couleur, ça je vais le supprimer pour être sûr de ne pas avoir de doublon et d’avoir un conflit.
Là, je vais copier-coller le nouveau système à plusieurs couleurs.
Là, c’est bon. J’ai tout intégré correctement.
D’ailleurs, c’est pour l’organisation.
Essaie toujours d’avoir un Word ou un Notepad ++ avec l’intégralité de ton code, ça te permet de te repérer quand tu commences à avoir pas mal de codes.
Si je commence à chercher, à me souvenir qu’est-ce que ça désigne ci ou ça, je ne m’en sors plus du tout.
C’est un conseil d’organisation personnelle.
Là, j’ai remplacé le CSS, mais dans le cadre de mon texte de description produit, là où il y avait ces checks de plusieurs couleurs, je n’ai rien changé.
En fait, j’ai changé quelque chose, puisque là les checks n’apparaissent plus.
La Définition de Classes en HTML & CSS
Comme je te l’ai dit, j’ai défini des classes.
Maintenant, j’ai dit que c’est seulement une fois que j’aurai défini ces classes-là que les réglages interviendront.
Comme les classes n’étaient pas définies, il a perdu ce fameux check rose.
Maintenant, je vais aller en description produit et je vais définir les classes telles que je les ai nommées dans le CSS.
Je rappelle les classes, c’est vert, rose, croix.
Ces noms, c’est complètement arbitraires.
Si tu le souhaites, tu aurais pu écrire « check-vert », « check-rose » et « croix-rouge » pour être sûr.
Après, bien évidemment, tu les changes ici à nouveau.
L’essentiel, c’est d’être cohérent, mais si tu veux, tu peux l’appeler toto, ça serait la même chose.
Maintenant, je vais aller dans ma description produit.
Là, tu retrouves absolument tout le contenu qui est là. Je vais passer en mode HTML.
C’est vrai que ce n’est pas très facile de lire le contenu HTML directement dans cet éditeur Shopify, parce que ce n’est pas très lisible, il met des erreurs de partout parce qu’il ne reconnaît pas le mot.
Ce qui peut être sympa, c’est de prendre Notepad ++, tu crées un nouveau document, tu copies-colles tout le code, là c’est encore tout blanc, mais ensuite tu passes en mode HTML et le code devient beaucoup plus facilement lisible avec un système de couleurs où le blanc c’est le texte qui apparaîtra sur la description, le rose définit toutes les balises HTML, le vert : la définition des attributs et le jaune : la valeur de ces attributs.
Ici, il y a une classe qui a été définie pour l’un de mes titres, je lui ai donné le nom de « titlepr ». C’est ça qui permet de gérer sur Tout Chapinou ces fameuses petites bandes, parce que dans le CCS, j’ai dit que pour tous les titres qui s’appelaient « titlepr » il fallait afficher ça.
C’est exactement le même principe qu’on va faire, c’est-à-dire on va dire pour toutes les listes à puces dans le CSS, j’ai défini dans ce réglage-là, je vais définir cette classe-là pour que ce soit pris en compte.
C’est parti, c’est ce qu’on va faire tout de suite.
Je vais intervenir par exemple au niveau de cette garantie-là.
Pour te repérer, je vais intervenir sur ces 3 dernières lignes, comme ça je vais t’en faire un de chaque et après tu pourras voir la différence.
Dans le réglage de base, comme tu l’as compris, il n’y avait pas besoin de définir des classes sur ces différentes listes, c’est-à-dire c’était le réglage par défaut et remplacer toutes les listes à puces par ce petit check.
Avantages vs Inconvénients de cette Méthode
Maintenant, il va falloir définir des classes.
L’inconvénient de cette méthode, c’est que ça demande à chaque fois de redéfinir la classe sur ton élément et ça ce sera partout sur ton site.
C’est vrai que par rapport à ça souvent, ça peut rebuter pas mal de personnes d’avoir à redéfinir des classes, elles ne sont pas bien à l’aise avec le HTML, elles vont devoir faire ça et définir la classe etc. et c’est un peu long.
Alors qu’avant, il suffisait d’avoir une liste et elle était systématiquement remplacée.
Par contre, l’avantage de cette méthode, c’est que maintenant tu peux prendre n’importe quel symbole que tu veux, lui définir n’importe quelle couleur que tu veux et ensuite tu as la liberté complète et totale.
C’est toujours ça, c’est plus tu vas en avant dans le HTML, plus il faut s’y connaître, mais plus après tu as de liberté et tu fais ce que tu veux.
Première étude de cas : les icones dans des listes à puce
Là, je vais reprendre ces trois éléments là.
Ici, en CSS, le before ce n’est pas quelque chose dont tu dois tenir compte dans le HTML, ça veut dire que tout ce qui est avant la liste verte, il va prendre un réglage en compte.
Ici, le before, c’est parce que ce sera avant la liste, il va mettre le fameux petit check, mais le vrai nom c’est ce qu’il y avait ici, c’est le « li.vert » « li.rose » « li.croix »
Ici, comment je vais faire ?
Là, je vais définir la classe et je vais l’appeler « vert », là je vais l’appeler « rose » et là je vais l’appeler…
D’ailleurs, un avantage de notre page, les répéter plusieurs fois, mais ça permet de ne pas faire d’erreur.
Par exemple, imagine, tu ne sais pas qu’il faut écrire égal ou qu’il faut mettre les petits guillemets, tu vas voir que les couleurs vont s’afficher de manière incorrecte et tu vas immédiatement détecter l’erreur.
Par exemple, si j’écris « croix », tu vois que le « croix » apparaît en rose et ça sonne faux immédiatement.
Si par exemple, je fais ça, ça reste en vert, c’est quelque chose qui ne va pas.
Là, on voit directement que le code est okay et que c’est tout bon.
Je vais regarder si ç’a bien été pris en compte.
Là, je supprime, je vais faire un copier-coller.
Dans l’éditeur, tu ne vois pas de différences, c’est une liste à puces complète, mais après on va voir si ça a marché correctement.
Si ça n’a pas marché, je regarderai.
Là, on fait View.
Ça a correctement marché, le réglage a été pris en compte correctement.
Tu as un check vert ici, un check rose et une croix rouge.
Maintenant, tu peux faire tout ce que tu veux.
Ça n’a pas été pris en compte-là par rapport à la première version.
Cette partie-là, j’avais les checks rose également, il faut qu’à chaque fois qu’il y a un « li » que je redéfinisse la classe pour dire ce que je veux.
Si par exemple, avant je voulais les checks rose, il faut que je redéfinisse la classe etc.
Une bonne façon de faire pour être sûr de ne rien louper, tu peux faire un petit Control F, tu cherches les éléments qui ont une liste, tu les cherches, tu fermes l’élément, comme ça tu es sûr qu’il n’y a pas eu de classe définie, parce que là il y a une classe qui a été définie avant que je ferme l’élément ici.
Là, tu les cherches, tu fais suivant, suivant et là ils apparaissent tous, comme ça tu es sûr de ne pas les louper.
Mais encore une fois l’avantage de Notepad, c’est que tu vois directement les éléments qui ont des listes.
En plus de ça, je me suis amusé.
À l’intérieur de ces éléments listes, j’ai pu définir des couleurs pour le texte qui étaient plus sombres pour mieux mettre en avant les mots qui désignaient des bénéfices.
Après, tu peux aussi définir en gras là, c’est le cas des balises Strong.
Au final, tu peux faire tout ce que tu veux avec le HTML.
Deuxième étude de cas : les icônes dans un tableur
Dans ce cas-là, de toute façon, ça ne servira à rien de s’amuser avec ce système de trois éléments, ça m’allait très bien comme c’était avant.
Mais par exemple dans le cas de ce tableur HTML, la croix rouge, le check vert, pour définir mon offre, c’est quelque chose qui est compréhensible directement avec de la symbolique de base, de la colorimétrie de base, ce sont quand même des codes qui sont bien sympas à utiliser.
Idem, les checks, ça peut être utilisé d’une manière différente.
Par exemple, les checks verts peuvent être utilisés pour tous les systèmes de Trust pour rassurer le client et après tu peux utiliser ta couleur primaire pour par exemple tes fiches produits où tu mets des bénéfices clients, des choses comme ça.
Bilan
Pour résumer, tu as bien vu la différence entre un système à une couleur où tu peux définir un élément de la bibliothèque FontAwesome.
Je t’ai mis le lien ici, si tu veux t’y retrouver. Tu mets une couleur là, tu écris le code hexadécimal de la couleur souhaitée.
Mais dans un système à plusieurs couleurs, tu peux définir autant d’éléments que tu souhaites. Là, ce n’est pas fini.
Si je veux, je pourrais écrire « le.bitcoin before » et ensuite dans la bibliothèque, je vais récupérer le code qui fait le bitcoin, c’est « f15a » et après je peux choisir de l’écrire en couleur dorée si je le souhaite.
C’est quelque chose qui ressemblerait à ça « li.bitcoin » on a dit c’était « f15a » et la couleur, si je veux une couleur dorée, je vais sur cet élément-là, je fais quelque chose comme ça.
Je récupère cette couleur-là et je la mets ici.
Ensuite les deux dernières lignes, je ne t’en ai pas parlé, c’est que des fois entre certains symboles, il y a des tailles qui peuvent différer.
Si je veux garder une homogénéité, j’adapte la taille de police et la hauteur de la ligne.
Ce sont des réglages avec des nombres.
Tu peux les ajuster en les augmentant, en les diminuant à ta convenance.
Voilà pour l’exemple. Je vais te montrer qu’on peut faire tout ce qu’on veut.
Là, je vais revenir sur les réglages CSS que j’avais.
Là, je peux ajouter à la suite mon réglage Bitcoin.
Je sauvegarde et je reviens dans la description produit.
Comme je l’ai appelé bitcoin, là, à la place de croix, j’écris « bitcoin ».
Je sauvegarde. Je regarde si ç’a bien été pris en compte.
Là, on a un Bitcoin jaune qui d’ailleurs n’est pas très lisible.
Après, tu peux faire tout ce que tu veux.
Conclusion
C’était tout pour ce tutoriel.
J’espère qu’il t’a aidé, j’espère qu’il t’a permis de mieux comprendre comment fonctionnait la synergie entre le HTML et le CSS, comment on pouvait définir des classes et ensuite définir le style que tu voulais avec le CSS.
C’est un exemple tout bête.
Tu peux faire ça avec n’importe quel élément du site par la suite.
Tu as une liberté totale, c’est l’avantage.
J’espère que ce tip t’a intéressé.
Si c’est le cas, n’hésite pas à t’abonner, à consulter les autres vidéos qui sont concernées par le HTML pour en savoir encore plus sur ces langages informatiques qui te permettent d’avoir une liberté totale.
À partir de là, si tu es intéressé par une prestation Webdesign complète pour avoir un site optimisé qui optimise tes conversions, fais appel à mes services, démarre par un audit gratuit. Sinon, considère mes différentes offres de prestations Webdesign.
C’était Pascal. Je te dis à bientôt.
Salut !
Recherches utilisées pour trouver cet article :
- Liste Personnaliser En Html Css
