We will see how to add some CSS on our module. The CSS will be put inside the module folder, so it’s not a theme creation. I will explain the creation of a Magento theme later on this training.
Layout creation and CSS adding
Our CSS will be called on the jobs display page only, so we will modify the following layout file :
app/code/Maxime/Jobs/view/frontend/layout/jobs_job_index.xml
Change your XML like this :
<?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>
If you want to add a stylesheet on every page of your website, you have to create this layout :
app/code/Maxime/Jobs/view/frontend/layout/default.xml
The layout might look like this :
<?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>
If I want to add some CSS on the module Helloworld, I can do it with the layout file
app/code/Maxime/Jobs/view/frontend/layout/helloworld_say_hello.xml. Generaly, you can choose the page with the layout name. But it’s better to create the Helloworld layout and CSS on the Helloworld module 😉
We declare a path for a css file, we will create it (with the .less extension !) :
app/code/Maxime/Jobs/view/frontend/web/jobs.less
You can put this CSS (with Less syntax) :
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;
}
}
You will have this render :
Less and Magento
Why we create a .less file ?
It’s a new feature of Magento 2, the implementation of Less. I will not explain it, there is a lot of articles on the web for that. (for example : LESS CSS for beginners)
Magento will search a CSS file, if it can’t find it, it will search a less file. The best practice is to always use less file.
If you load your page the first time, you will see the CSS changes. If you change the CSS, and you refresh the page, you will not see the new styles, even if caches are disabled.
Magento “precompile” CSS file and save it in two folders :
var/view_preprocessed
pub/static/frontend/Magento/luma/fr_FR/Maxime_Jobs
You can delete these two folders, and your changes will be displayed.
You can change some configuration on Magento to “avoid” the problem.
You have to be on “developper” mode on your serveur (cf. Chapitre 1-C), so it’s not available on a production environment. With it, you can choose the use less on client side, not server side. Your page will ba displayed without CSS during few milliseconds, and CSS is generated after :
You can find this field on this configuration section : Stores > Configuration > Advanced > Developer
With the configuration, you still have to delete this folder :
pub/static/frontend/Magento/luma/fr_FR/Maxime_Jobs
When I deploy on production ?
There is a Magento command line to deploy this type of contents :
php bin/magento setup:static-content:deploy
You know how to add CSS on your module, next time, I will explain how to add translations !