Magento 2 Training : Unit 6 – Lesson C

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 :
rendupagecss

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 :

lessconfig

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 !

Continue training
Return to previous lesson
Add CSS on your Magento 2 module
Share on FacebookTweet about this on TwitterShare on Google+Email this to someone
Tagged on:     

Leave a Reply

Your email address will not be published. Required fields are marked *

We use cookies to ensure that we give you the best experience on our website.
Ok