Magento 2.1 Luma Theme – How to Edit CSS

cssluma-thememagento-2.1magento2.1.0

I am trying to change css of Magento 2.1 Luma theme but its not working.

What will be the better way to modify css in Magento 2.1 Luma theme ?

Best Answer

First go through previous answer steps and go to and edit module wise css given path below

project/vendor/magento/theme-frontend-luma/module_name/web/css/source

and edit common style given path below

project/vendor/magento/theme-frontend-luma/web/css/source

Related Solutions

Magento 2.0 Theme Not Working in 2.1

I was facing the same problem and did the following steps to fix it

First make a backup of your theme from app/design/frontend/theme
Set the blank theme from admin->content->configurations for your store
delete the theme from admin->themes->your-theme
also delete it form folder app/design/frontend/theme
then run upgrade and deploy commands.
then place your theme again in folder app/design/frontend/theme
run upgrade command.
select your theme from admin->content->configurations->your-theme for your store.
and run deploy command.

Hope it will work for you also.

Magento – Magento 2 and change CSS styles – in LUMA – as a child theme

If you have created child theme of luma theme then create file with name default_head_blocks.xml in following path :

{magento root path} \app\design\frontend\ {vendor} \ {your theme} \Magento_Theme\layout

default_head_blocks.xml code :

<?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/custom.css" />
    <css src="css/custom_mobile.css" media="screen and (min-width: 768px)"/>
  </head>
</page>

Now create above called css files inside following path :

{magento root path} \app\design\frontend\ {vendor} \ {your theme} \web\css

Now you can add your css in above created custom.css file.

Best Answer

Related Solutions

Magento 2.0 Theme Not Working in 2.1

Magento – Magento 2 and change CSS styles – in LUMA – as a child theme

Related Topic