0item(s)

You have no items in your shopping cart.

Product was successfully added to your shopping cart.

Adding Custom CSS files in Magento 2

Adding Custom CSS files in Magento 2

We see many developers try to rely on their knowledge of easy css inclusions from magento 1, but when it comes to Magento 2 you need to understand the structure before you can create your custom css flle.

First example we will look at is creating a css that is ONLY for specific page. Let's say you want to add css that is only be applied to home page.

CUSTOM CSS FOR INDIVIDUAL PAGE
We all came into situation that we want to adjust specific css ONLY for one page. When you think about home page it is necessary in so many ways due to constant changes, offers, promotions, etc. So let's see how you can achieve this and more importantly - make it load fast.

STEP 1:
Open a page you want to add css to. CONTENT - PAGES - Open your page.
Inside your page under DESIGN tab, you will see area called Layout Update XML.
This is the area where you will add simple call out like this:

<head>
  <css src="Vendor_Module::css/customcss.css"/>
</head>

But simply adding this will not do any good. You need to change it a bit to make sure it is connecting properly. So let's look at what you need to do next:

STEP 2:
Create your file in this location:
app/code/vendor/modulename/view/frontend/web/css/customcss.css
But before you do that the key folder is called "modulename". This is usually your theme or you can choose any other module you have in there. For this example we have a folder vendor called Lifetime (it is a theme but it really doesn't have to be theme. You can choose any Vendor. Once you do that make sure you follow the rest of your path and create that custom css file.
So in this case our path would be:
app/code/vendor/Lifetime/view/frontend/web/css/customcss.css
(notice how module name is changed to lifetime)

STEP 3:
Go back to your page and update your Layout Update XML to say:
<head>
  <css src="Lifetime_Module::css/lmg.css"/>
</head>

Notice how Lifetime is placed instead of initial Vendor.

STEP 4.
You must deploy new static resource after. To do that log into your site via SSH and go into your root folder.
Run this command wand wait until it is done:
php bin/magento setup:static-content:deploy
Refresh cache and you are good to go!

CUSTOM CSS FOR ENTIRE SITE
For entire site custom css it is not that difficult at all. You will need to create a layout file and a css file. In this case please be aware of your theme structure because custom css will always be placed within your custom theme you are using.

Step 1.:
Locate these two paths on your site via FTP:
app / design / frontend / [vendor] / [theme] / Magento_Theme / layout
app / design / frontend / [vendor] / [theme] / web / css

In both of these location you will create one file like so:
app / design / frontend / [vendor] / [theme] / Magento_Theme / layout / default_head_blocks.xml
app / design / frontend / [vendor] / [theme] / web / css / customcss.css

So basically you are creating default_head_blocks.xml in layout and customcss.css in css folder.

STEP 2:
Open and add this code in your default_head_blocks.xml

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="../../../../../vendor/magento/framework/Module/etc/module.xsd">
  <head>
    <css src="css/customcss.css" />
  </head>
</page>

STEP 3.
You must deploy new static resource after. To do that log into your site via SSH and go into your root folder.
Run this command wand wait until it is done:
php bin/magento setup:static-content:deploy
Refresh cache and you are good to go!

Topic: Magento 2

Category: Magento 2 Help