Mage Check Facebook iconFacebook MAGE CHECK Mage Check Linkedin iconLinkedin MAGE CHECK Mage Check Skype iconSkype MAGE CHECK

Magento How to add Css file from layout

$ In this tutorial we will describe how to add css file from layout in Magento.

$ We have just three steps, so let's folow them and in a couple of minutes, our Magento project will run a custom css file.

Step 1: Create Layout File

Magento 1

<?xml version='1.0'> <layout> <default> <reference name='head'> <action method='addCss'> <type>skin_css</type> <file>css/custom.css</file> </action> </reference> </default> </layout>

File path: skin/design/frontend/MageCheck/MCTheme/layout/local.xml

Magento 2

<?xml version='1.0'?> <page xmlns:xsi='http://www.w3.org/2001/XMLSchema-instance' layout='1column' xsi:noNamespaceSchemaLocation='../../../../../../../lib/internal/Magento/Framework/View/Layout/etc/page_configuration.xsd'> <head> <css src='MageCheck_Seasons::custom.css'/> </head> <referenceBlock name='content'> <block template='content.phtml' class='MageCheck\Seasons\Block\Main' name='magecheck_seasons_block_main' /> </referenceBlock> </page>

File path: app/code/MageCheck/Seasons/view/frontend/ magecheck_seasons_index_index.xml

Step 2: Create Css File

Magento 1

body { background-color:#f00; }

File path: skin/design/frontend/MageCheck/MCTheme/css/custom.css

Magento 2

body { background-color:#f00; }

File path: app/code/MageCheck/Seasons/view/frontend/web/custom.css

Step 3: Flush Cache

Magento 1

Log in to you Magento 1 Admin panel, go to System -> Cache management and flush your magento cache.

Magento 2

The last thing you have to do is to clean and flush your magento cache:

php bin/magento cache:clean
php bin/magento cache:flush

This is the simplest method to add Css file from layout in Magento!

Contact us

Have you decided on an online Business Plan website?