Prestashop - Modification du CSS

Table des matières
Avec les feuilles de style ou CSS Nous pouvons réaliser presque tout dans l'environnement Web, les effets que nous obtenons sont appliqués à l'ensemble du site, donnant la possibilité de créer une identité homogène sur toute la page.
Heureusement Prestashop Il est construit selon cette norme, nous pouvons donc modifier son apparence très rapidement et si nous suivons les conventions, nous pouvons obtenir des effets qui sont appliqués dans tout notre magasin, créant ainsi notre identité graphique.
Connaître les fichiers CSS Prestashop
Comme toujours avant de commencer à modifier quelque chose dans notre magasin, la première chose que nous devons faire est de savoir où nous en sommes, dans ce cas nous devons nous familiariser avec la structure de Prestashop et où pouvons-nous obtenir les différents fichiers CSS.
Si nous ouvrons la structure de dossiers de notre installation de Prestashop nous devons aller dans le dossier thèmes, ce seront les différents thèmes disponibles pour notre magasin, grâce à cela, nous pouvons avoir différentes variantes de notre image.
Il est toujours important de se rappeler que si nous allons apporter des modifications, nous devons d'abord sauvegarder les données, pour cela nous pouvons copier le dossier du thème à modifier et l'enregistrer sous un autre nom, de cette façon nous pouvons revenir au version précédente si nécessaire.
Une fois dans le dossier thèmes et après avoir déjà entré le thème à modifier, il faut localiser le dossier cssVoyons l'image suivante pour illustrer le chemin que nous avons dû parcourir :

Très bien, une fois à l'intérieur de ce dossier nous devons avoir les fichiers suivants :
  • global.css
  • maintenance.css
  • scènes.css
Les archives CSS de Prestashop travailler avec le moteur de template Smarty (.tpl) qui se trouve par défaut dans le dossier modules, bien que travailler avec ce module ne soit pas strictement nécessaire pour le connaître en profondeur, cependant avoir quelques notions peut nous aider beaucoup.
Un autre aspect important est de connaître un peu la syntaxe de CSSBien que cela puisse être un peu écrasant, il est très important de savoir ce que signifie chaque élément de notre dossier afin que nous puissions agir en connaissance de cause à chaque fois que nous apportons un changement.
global.css
Il s'agit du fichier général, qui nous permet de modifier l'apparence générale de toutes les pages de notre boutique.
Les aspects que nous pouvons contrôler avec ce fichier sont les suivants :
  • Couleur de l'arrière plan
  • Taille de police
  • Type de police
  • Couleur
  • Alignement du texte
  • Format de paragraphe et de page
Comme on peut le voir, ces aspects sont essentiels dans notre image graphique, ce fichier est donc vital pour maintenir le flux de notre site.
Bien que nous puissions apporter de nombreuses modifications, au démarrage, il est recommandé de ne pas modifier la syntaxe existante, sinon ses valeurs, afin que nous puissions utiliser le fichier CSS comme base et ainsi apprendre quels changements se produisent à chaque modification des valeurs que nous apportons.
Nous avons déjà une base pour commencer à modifier l'apparence de notre magasin à travers ses fichiers de style et nous savons également déjà qu'il existe d'autres concepts que nous devons étudier et apprendre pour obtenir des résultats plus professionnels.Avez-vous aimé et aidé ce tutoriel ?Vous pouvez récompenser l'auteur en appuyant sur ce bouton pour lui donner un point positif

Vous contribuerez au développement du site, partager la page avec vos amis

wave wave wave wave wave