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

cssless-cssluma-thememagento2

We have created a Luma child theme, and trying to figure out, how to make some CSS-changes?! For instance, change the footer and header background color? The _extend.less doesn't work, and adding a custom css-file to include on all pages, doesn't work either. The first problem, is to find the class somewhere. Anybody who can shed some light on this, just to get us started, if that simple?

Thanks in advance,

enter image description here

Best Answer

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.

Related Topic