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 :
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 :
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.
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:
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 !