Nous allons désormais voir comment ajouter du CSS à notre template. Notez que le CSS que nous allons créer est situé dans le module. Il ne s’agit pas ici de la création d’un thème Magento. Cette partie de création de thème sera abordée par la suite dans cette formation.
Layout, et ajout du CSS
Notre CSS doit-être appelé uniquement sur la page d’affichage des jobs, nous allons donc mettre l’instruction d’ajout du CSS dans le layout :
app/code/Maxime/Jobs/view/frontend/layout/jobs_job_index.xml
Modifiez votre layout de la sorte :
<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd" layout="2columns-right">
<head>
<css src="Maxime_Jobs::jobs.css"/>
</head>
<body>
<referenceContainer name="content">
<block class="Maxime\Jobs\Block\Job\ListJob" name="jobs_list" template="jobs/list.phtml" />
</referenceContainer>
</body>
</page>
Si vous désirez ajouter un CSS à toutes les pages de votre site, vous pouvez créer le fichier suivant :
app/code/Maxime/Jobs/view/frontend/layout/default.xml
Le layout serait le suivant :
<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd" layout="2columns-right">
<head>
<css src="Maxime_Jobs::jobs.css"/>
</head>
</page>
Notez que si je veux ajouter mon CSS à mon module Helloworld, je peux le faire via le layout
app/code/Maxime/Jobs/view/frontend/layout/helloworld_say_hello.xml! Globalement vous pouvez cibler vos pages via l’ajout d’un layout. Sachez que c’est possible mais dans ce cas, il vaut mieux mettre le layout et le CSS dans le module Helloworld 😉
Nous déclarons dans le layout un fichier CSS nommé « jobs.css », nous allons le créer (avec l’extension less !) :
app/code/Maxime/Jobs/view/frontend/web/jobs.less
Vous pouvez insérer le CSS suivant (au format Less) :
ol.jobs {
list-style-type: none;
padding: 0;
margin : 0;
.item {
border-bottom : 1px solid black;
margin-bottom : 2rem;
padding-bottom : 2rem;
.title {
font-size: 1.3em;
margin-bottom: 1rem;
}
}
.item.last {
border-bottom : none;
}
}
Voici le rendu que vous devriez avoir :
Less et Magento
Pourquoi défini-t-on un fichier .less ?
C’est une nouveauté dans Magento 2, l’implémentation de Less. Je ne ferai pas de tutoriel là dessus, car il en existe des tonnes sur la toile. Je ne peux vous conseiller de lire cet article simple et efficace sur OpenClassRooms : Simplifiez-vous la vie avec LESS
Magento va tout d’abord chercher un fichier CSS, s’il n’en trouve pas il cherchera un fichier Less. Globalement, il vaut mieux utiliser du less tout le temps.
Si vous affichez votre page, la première fois vous risquez de voir vos changements. Si vous éditez le CSS et que vous actualisez la page, cette-ci rien ne sera pris en compte, même si nos caches sont désactivés.
En effet, Magento « pré-compile » ses fichiers CSS et les stocke dans deux endroits :
var/view_preprocessed
pub/static/frontend/Magento/luma/fr_FR/Maxime_Jobs
Vous pouvez supprimer ces deux dossiers et actualiser. Vos changements apparaîtront alors.
Il est possible d’effectuer une manipulation dans le backoffice Magento pour « contourner » le problème.
Cette configuration est possible uniquement si vous êtes en mode « développeur » (cf. Chapitre 1-C), et donc non disponible en production. Elle permet de gérer l’intégration de less côté client, et non côté serveur. De ce fait votre page apparaît un court instant sans CSS, puis le CSS est calculé quelques dixièmes de secondes après :
Cette configuration se trouve dans Stores > Configuration > Advanced > Developer
Avec cette manipulation, il vous faudra quand même supprimer le dossier
pub/static/frontend/Magento/luma/fr_FR/Maxime_Jobs
Et lors de la mise en production ?
Magento a prévu une commande pour déployer ce genre de modifications sur vos serveurs de production. Il vous faudra lancer la commande suivante :
php bin/magento setup:static-content:deploy
Vous savez désormais comment ajouter du CSS à votre module, prochaine étape, nous allons créer nos fichiers de traductions !
Dans l’extrait :
« Vous remarquez ici que l’on ajoute un CSS qui sera nommé jobs.css, nous allons maintenant le créer :
app/code/Maxime/Jobs/view/frontend/web/jobs.less »
Le fichier a créer est-il un fichier jobs.less ou jobs.css ? 🙂
Oui en effet c’est pas clair. Du coup, j’ai repris ce que j’avais mis en anglais qui était plus facilement compréhensible 😉