3

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

  • 4
    Possible duplicate of magento 2 header – Qaisar Satti Nov 11 '16 at 12:02
  • @QaisarSatti the linked duplicate shows how to edit the Luma theme, not how to make changes in the child theme – Fabian Schmengler Nov 14 '16 at 9:31
  • @fschmengler work as a same that is reason i mention it. – Qaisar Satti Nov 14 '16 at 9:34
3

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.

1

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

0

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.

0

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

  • Do you mean source, rather than sources? – ACJ Feb 11 at 14:18
  • @ACJ yes, it was a typo, sorry about that – Vlad Patru Feb 11 at 15:16
  • Not a problem. I could not change the text myself, because edits need to be at least 6 characters. :) – ACJ Feb 11 at 15:33

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.