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,
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.
Update variable value in your _theme.less file:
@header-panel__background-color: red;
if you want add custom .less file refer this How do I add a custom CSS file
Assuming you have custom theme setup and configured properly and are able to override parent theme (that's a whole different topic so won't go in too details about that here, you can check this tutorial => a good run through on setting up theme), your custom style sheets will go under app/design/frontend/Vendor/theme/web/css/source. You can add _extend.less file and _theme.less file as a start. In your _theme.less file you can define css that overrides Luma styles e.g.
.panel.wrapper {
background: tomato;
@media screen and (min-width: @screen__m) {
position: fixed;
width: 100%;
z-index: 102;
}
}
Next step is compiling CSS files which depends on whether you're using client side or server side less compilation. Issue command bin/magento setup:static-content:deploy or if grunt is setup you can use grunt specific commands to deploy your theme files.
Check if the path to the _extend.less it's the good one, it should be in Magento_Theme/web/css/source/_extend.less , this worked for me every time
for the header the variable is : @header-panel__background-color and for the footer @copyright__background-color
