Les fichiers TPL de Prestashop (ce fameux « super HTML »), déterminent le contenu à afficher, mais nullement le design de ces pages. Sans CSS (en français « feuilles de style en cascade »), il n’y a pas de possibilité d’appliquer une couleur à un élément. Les CSS sont donc le « coup de peinture » sur une page web. Fort heureusement, le thème default-bootstrap dispose déjà de CSS, que l’on peut retrouver aisément dans le dossier /themes/default-bootstrap/css. La première chose que l’on peut remarquer est donc cette séparation des CSS selon la page affichée, et là-dessus Prestashop est clair : nous disposons d’emblée d’un fichier global.css (le seul à être généré sur chaque page du site, d’un grand atout), et de différents fichiers CSS portant tout simplement le nom de la page affichée, pour une meilleure facilité d’adaptation.
Attention, la structure des CSS a changée sur Prestashop 1.7. Désormais vous disposez d’un fichier custom.css se trouvant dans /themes/votretheme/assets/css, vous permettant de réaliser vos modifications.
Nous pouvons donc imaginer que la feuille de style my-account.css correspond à la page « Mon Compte » du client sur le site. Il suffira de la modifier et/ou l’adapter pour en changer la mise en page.
Ouvrons donc le fichier global.css, qui est certainement le plus important de Prestashop.
Pour cela, il est utile d’utiliser un logiciel d’édition de code, comme Notepad++, SublimeText (ou autre). Le gros avantage de ces logiciels est qu’ils effectuent ce qu’on appelle la « coloration syntaxique », c’est-à-dire qu’ils vont mettre de couleurs différentes les éléments sur lesquels nous allons travailler (très utile pour avoir de la clarté lorsque l’on travaille !).
Vous noterez au passage les différentes couleurs affichées sur l’image ci-dessus (mais les couleurs dépendent intégralement du logiciel que vous aurez choisi, Notepad++ étant très utilisé pour les CSS).
Les CSS
Une CSS est donc un style, un design que l’on applique à un élément du code html. Les CSS sont un standard mondial déterminé par la W3C, organisme régissant les mises en page web. Vous avez peut-être récemment entendu parler des CSS3, qui sont la dernière version des feuilles de style, apportant davantage de fonctionnalités, comme l’ajout de dégradés, d’animations, etc. Un webdesigner ne peut donc exister sans savoir ce qu’est une CSS (« Cascade StyleSheet »).
Une CSS se décrit comme ceci :
MonElementHTML{
MaRègle : LaValeurDeMaRègle;
}
Notez donc qu’il est extrêmement important de respecter les crochets { }, tout comme il est autant capital de mettre un point-virgule à la fin d’une valeur d’une règle.
Voici un exemple concret, permettant de mettre une couleur de fond à un élément HTML (en l’occurrence un fond de page web) :
body{
background-color : #000000;
}
Dans le cas présent, nous déclarons que le « body » (le corps de la page web) a pour règle « background-color » (une couleur de fond) qui a pour valeur #000000 (et en hexadécimal il s’agit de noir).
Il est possible d’enchaîner les règles et leurs valeurs pour un même élément HTML, de manière à appliquer un maximum de choses en saisissant le moins de texte, comme ceci :
body{
background-color : #000000;
color : #FFFFFF;
line-height : 25px;
}
Et ici nous venons d’ajouter au corps de notre page une couleur de texte «(« color »), et une hauteur de ligne par défaut (« line-height »).
Comment savoir sur quel élément travailler ?
Rien de plus simple ! Tous les navigateurs web disposent de ce qu’on appelle « l’outil de développement », qui permet d’analyser le code et les CSS. Cela va même encore plus loin, puisque les navigateurs précisent même le fichier concerné (s’agit-il de global.css ou de category.css ?) et ajoutant la ligne exacte où la CSS est écrite.
Il vous suffit simplement d’effectuer un clic-droit sur votre élément, dans votre page web, puis de cliquer sur « inspecter l’élément ». La fenêtre qui s’ouvre vous permet de déterminer avec grande précision quelle est la CSS appliquée, sur quel élément. Facile !
Ici j’utilise Google Chrome, je vous conseille également d’utiliser Mozilla Firefox, mais pas internet Explorer si ce n’est pour regarder ce qui ne fonctionne pas comme CSS sur ce « navigateur de #?!@& ».
Il est très important de bien déterminer sur quel élément vous souhaiter effectuer une modification. Afin de ne pas perdre de temps en CSS inutiles, n’hésitez pas à tester votre code avant de le saisir définitivement ! Regardons à présent quels sont les différents éléments que nous pouvons mettre en forme via les CSS.
Balises, classes et identifiants
Le code HTML s’écrit d’une manière très précise (un peu comme une langue), interprétée par les navigateurs. Cela s’appelle du code « orienté client », c’est-à-dire que c’est véritablement le navigateur du visiteur qui interprète le code HTML (tout comme les CSS). Le HTML s’écrit avec ce qu’on appelle des « balises ». Cela détermine avec précision quel est le type d’élément. Est-ce un paragraphe ? Est-ce un bloc ? Les balises sont très nombreuses, mais les plus connues sont les titres (h1, h2, h3, h4, h5 et h6) ainsi que les blocs (div ou span). Une balise HTML s’ouvre et se ferme comme ceci :
Ou encore (pour les paragraphes) :
Et là mon texte de paragraphe
Vous comprendrez donc qu’entre les balises, nous y insérons du contenu. En CSS, si vous saisissez ceci : div{ background-color : #000000 ; } Vous préciserez au navigateur que toutes vos balises « div » (vos blocs donc) auront un fond de couleur noire. Mais comment faire en sorte que la CSS s’applique sur certains éléments uniquement ?
Les classes
Une classe est un nom que l’on attribue à plusieurs éléments dans le code HTML. Si vous souhaitez travailler sur des blocs précis (comme tous les boutons sur un Prestashop), il faudra donc préciser dans le HTML (ou le TPL dans le cadre de Prestashop) ceci :
Vous venez de donner un nom à votre div ! Notez qu’il est nécessaire de donner un nom clair, précis et compréhensible, de manière à savoir ce sur quoi vous travaillez. Pour vous dire, une fois je suis tombé sur un site dont les balises HTML portaient les noms « test », « caca », « popo »… 
COMMENT VOULEZ-VOUS SAVOIR A QUOI CELA FAIT REFERENCE ? Les boutons de Prestashop portent quasiment tout la même class, nommée « button ». Les boutons ressemblent donc peu ou prou à ceci :
Tous vos boutons (ou presque) auront ce nom-là. En CSS, il vous suffira d’écrire ceci : .button{ background-color : #000000 ; } Et tous vos éléments portant la class « button » auront un fond noir. Gardez bien à l’esprit que la class a été créée pour travailler sur plusieurs éléments en même temps, ce afin de gagner un temps non négligeable ! Vous pouvez bien évidemment ajouter vos propres class à vos éléments, sans aucune contrainte. Il est probable que vous tombiez sur les éléments possédant plusieurs class, comme ceci :
Ce qui signifie que la div en question peut être modifiée à la fois en saisissant en CSS .button mais également .ajax_add_to_cart_button.
Les identifiants : soyez uniques !
Les class sont très pratiques pour gagner du temps, mais il arrive très vite que l’on souhaite travailler sur un élément précis et seulement cet élément dans notre code. Les class ne sont donc pas très adaptées à ce genre de chose… Heureusement, le HTML ainsi que les CSS disposent de ce qu’on appelle les identifiants. Il s’agit d’un nom unique et précis que l’on attribue à un élément, de manière à ne travailler que sur celui-ci. Cela s’écrit comme ceci :
Et en CSS, cela s’interprète comme ceci : #MonIdentifiant{ MaRègle : MaValeurDeRègle ; } Notez-vous bien par conséquent que si en CSS une class commence par un point, un identifiant commence par un dièse. Gardez également à l’esprit qu’un identifiant est censé être unique (comme vous non ?) !! Pour travailler vos CSS, rien ne vaut un bon moteur de recherche ! Lorsque vous souhaitez modifier un élément dans une feuille de style, il vous suffit de saisir sur votre moteur de recherche préféré « CSS MonElément CeQueJeVeuxFaire ». Et n’hésitez pas à chercher sur le site de la W3School, qui vous proposera toutes les CSS imaginables, avec la possibilité de tester toutes les valeurs possibles ! Deux derniers points avant de terminer cette partie sur les CSS : le principe d’héritage et la hiérarchisation des balises, class et identifiants.
Le principe d’héritage
Si vous avez géré un stock, peut-être connaissez-vous le principe FIFO (« First In First Out »). En CSS, la dernière règle lue par le navigateur pour un élément écrase toutes les précédentes. Cela signifie que si vous mettez à la fin de votre fichier CSS de nouvelles règles (et même si elles existent déjà), elles seront prioritaires par rapport à celles déjà existantes. Si vous dites que toutes vos div ont un fond noir, puis que toutes vos div ont un fond rouge, le navigateur ignorera le noir pour ne traiter que la couleur rouge. Mais évitez autant que possible d’avoir des règles inutiles, car cela agrandit le temps de chargement des pages… Et votre temps de travail à terme !
La hiérarchisation
Dans le code HTML, les éléments sont imbriqués les uns dans les autres. Vous aurez donc très certainement des div, dans des div, dans des div… A ne plus savoir qu’en faire ! Et toutes porteront classs et ID (du moins je vous le souhaite très sincèrement , et c’est d’ailleurs le cas sur default-bootstrap). Vous pouvez donc être encore plus précis en saisissant ceci : .MaClass1 .Maclass2 #MonID1{ MaRègle : MaValeur ; } Et dans le cas présent, vous préciser ceci : « Dans MaClass1 se trouve un élément nommé MaClass2 dans lequel se trouve un élément MonID1, on va jouer dessus ». Cela s’appelle la concaténation (mot compte double au scrabble 
). Si avec ceci vous ne parvenez pas à être précis…
Pour finir
Les CSS sont un métier à part entière, c’est celui de webdesigner/intégrateur. De très nombreux sites proposent d’emblée des CSS innovantes, créatives, et il s’agit clairement de l’expression d’un art au travers du web. Consultez les sites de la W3C, W3School, et vous comprendrez qu’avec de l’imagination il est possible de dessiner des personnages, simplement avec des CSS ! Et avec l’arrivée du CSS3, nous pouvons désormais créer des animations… Votre imagination peut donc donner libre cours, exprimez-vous !
Imprimer
Laisser un commentaire