Adding Custom CSS style to Magento 2 Theme

Today we will do a quick tutorial on extending a Magento 2 theme to include a custom CSS style on the frontend side.

You may browse the Frontend Developer guide from Magento 2 to learn more about theme integration.

Basically we are going to extend the Luma theme which itself extends the blank theme (default one on Magento2). The purpose of this extension here is to provide an external library : Bootstrap – so we can use the grid system (for example) into our home page layout or whatever pages.

The line to include between the head tags is :

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">

However we might need to apply some custom styles on top of this so we will import the bootstrap style within a new css file :

 @import url('https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css"); 

In Magento, css files are included in layout files, so we need to work on layouts :

New Layout for our CSS inclusion

If you need to apply the css file to all your project pages then there is only one file we need to create :

default_head_blocks.xml

That file sits inside the Magento_Theme module, you may browse the directories (different modules) under vendor/magento/theme-frontend-blank and theme-frontend-luma to analyse how things are implemented.

Magento 2 - Luma Theme - XML definition

Here is the content of the file for the Blank theme :


<?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">

<head>

<css src="css/styles-m.css"/>

<css src="css/styles-l.css" media="screen and (min-width: 768px)"/>

<css src="css/print.css" media="print"/>

</head>

</page>

To apply the file to our new theme, we need to put it under the same name inside the Theme_directory/Magento_Theme/layout/default_head_blocks.xml

I assume you’ve already created your theme along its files and directories, if not then do it now :

html/app/
       design
         frontend
           Yourname
              themename
                Magento_Theme
                     layout
                etc
                media
                web
                  css
                composer.json
                registration.php
                theme.xml

 

Now let’s add our brand new styles.css file into the theme as follow :


<?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">

<head>

<css src="css/styles.css"  />

</head>

</page>

Here is the content of the CSS file we are going to put in the ThemeDirectory/web/css location:


@import url("https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css");

We are only importing the Bootstrap library from MaxCDN here, but you may add any type of styles, beware of the classes you employ as you are extending 2 themes already.

The important thing is to respect the directory structure, your style sheet must be located within the web directory of your theme, you may also name it using the .less extension.

Updating your Magento Application

In order to launch the website with the changes, the recommended way is to be in developer mode so you just need to refresh the page and you will see, in case you are in production or default mode, switch mode or clean up the cache :

$ bin/./magento cache:clean

If that isn’t enough depending on your mode, you may need to issue the following :

$ rm -Rf /pub/static/frontend/*

Then issue the command :

$ php bin/magento setup:static-content:deploy us_US –theme=Yourname/yourtheme

If you still can’t see the changes, then one way is to apply a default theme as Luma and then apply again your new theme.

Anyway if you have a few changes to make, I highly recommend to get yourself into developer mode, you can switch back to production at any time. In case you are having difficulties about the developer mode, you can read the article on How to fix the speed of your Magento 2 site.

That was simple and quick ! So what’s next ? For now you can play a little bit on your new Magento 2 theme and apply different css styles to a page. If you have any question, hit me up !

Leave a Reply

Want more information?

Related links will be displayed here in this section for you to pick up another good spot to get more details about Web marketing and Search Engine Optimization. There will be some sites which we selected to ease the work of any webmaster or/and web marketer on the Internet.

%d bloggers like this: