Css Personnalisé

Fonctionnalités

Css Personnalisé

Ce tutoriel s'applique à la version la plus récente du Phantom Thème. Veillez à mettre à jour votre thème en suivant le tutoriel vidéo disponible sur votre Espace Client.

Chaque paramètre énoncé dans le pack Classique se retrouvera dans le Pack Premium et Master +.

Chaque paramètre énoncé dans le Pack Premium se retrouvera dans le Pack Master +.

 


Classique & Premium & Master +

 1°) Introduction

Il faut savoir que ce paramètre est présent sur toutes les sections et types de page du thème. 

Pour expliquer simplement, celui-ci vous permet de personnaliser votre page ou votre section sans jamais avoir besoin de vous rendre dans le code du thème (ce que je déconseille fortement de toute façon).

Ainsi, vous pourrez définir vos css dans ce paramètre, ce qui sera sauvegardé dans le fichier settings_data.json que vous aurez à copier/coller à chaque mise à jour, ce qui vous permet de ne jamais avoir à remettre votre ligne de code !

Mais comment fonctionne-t-il ?

2°) Bases à connaître

Tout d'abord avant de procéder à des changements pour personnaliser encore plus votre thème, il faut connaître quelques bases dans le language css. Je vais tâcher de vous en transmettre quelques une ici afin de pouvoir vous exercer. Bien sûr afin de parfaire vos connaissances, je vous invite à vous rendre sur le site W3 Schools.

Premièrement, afin de personnaliser un élément HTML en css, vous devez connaître comment appliquer ces css à cet élément. Pour cela plusieurs manières sont possibles, combinez les afin de cibler correctement cet élément :

  • Par balise: 

div { text-align: center }

Ici nous appliquerons à toutes les balises div de la page le fait que le text-center contenu dans celles-ci soit centré.

  • Par classe :

.maclasse { text-align: center }

Ici nous appliquerons ce même paramètre, mais celui-ci ne sera que mis en place sur les balises comportant la classe maclasse. Appelé une classe se fait par l'intermédiaire d'un "." avant le nom de celle-ci.

  • Par identifiant : 

#monidentifiant { text-align: center }

Ici nous appliquerons ce même paramètre, mais celui-ci ne sera que mis en place sur les balises comportant l'identifiant monidentifiant. Appelé un identifiant se fait par l'intermédiaire d'un "#" avant le nom de celui-ci. 

Attention : Un identifiant a pour but d'être unique, profitez donc d'appliquer vos css aux identifiants déjà existants dans les balises Html du thème !

Voici donc les 3 principales méthodes pour définir un élément en css sur un élément html. Bien sûr, d'autres méthodes plus poussées permettent d'obtenir une précision plus accrue !

Désormais voyons comment les imbriquer entre eux :

Ici nous avons plusieurs choses :

  • Un div comportant un id
  • Un p comportant une class imbriqué dans le div
  • Un p ne comportant ni class ni id, imbriqué dans le div

Si nous souhaitons appliqué un alignement centré à "Un texte", voici comment procéder:

#monidentifiant p.maclasse { color: red }

Notez ici qu'il y a un espace entre la déclaration de l'id et de la class mais que la balise p est collée à maclasse. Ceci permet d'indiquer que nous souhaitons appliquer ce css à la balise comportant la classe maclasse, le tout imbriqué dans un élément possédant l'id monidentifiant. Nous aurons donc ce résultat :

Si vous ne souhaitez appliqué ce paramètre qu'au texte "Deuxième texte" mais que celui-ci ne comporte ni classe ni id, faites comme-ceci :

#monidentifiant p:not(.maclasse) { color: red }

À titre d'exemple concernant le thème, lorsque vous souhaitez modifier un élément précis d'une section de votre page d'acceuil sans pour autant que les autres sections similaires ne soit impactées, relevez l'identifiant de la section en élément parent :

Capture d'écran de l'inspecteur sur la page d'accueil, la ligne surligné est une section à part entière

Repérez ici l'identifiant de votre section, si nous prenons en exemple la 1ère, nous aurons donc :#shopify-section-1588429076054

Coder ensuite votre css en notifiant cet élément en parent : 

#shopify-section-1588429076054 p.maclasse { text-color: red }

Ainsi toutes les balises p comportant maclasse uniquement pour cette section seront en rouge. À vous de jouer !

Ici nous définissons ce paramètre en expliquant qu'il faut afficher ce css sur tout les imbriqué dans monidentifiant, sauf les p comportant maclasse.

 

3°) Liens utiles

D'autres manières sont encore possibles bien sûr, pour cela voici les quelques références utiles :

Pour des personnalisations plus accrues, je vous invite bien sûr à en apprendre plus sur la manière de coder en css !