I want to change the background color to black on luma theme page-header. i am using luma as my default template - what is the best way to go about? - I am using github version fresh Magento 2 install, the templates are store in frontend/Magento/Luma - firebug directs me to {.page-header} pub/static/frontend/Magento/luma/en_US/css/styles-l.css


The easiest way to add simple styling to a magento 2 store is to add your code here:


Click Edit for the appropriate view (global, website or store) and Theme (in your case Luma):

Open tab HTML Head, under Scripts and Style Sheets, you can add the following:

<style type="text/css">
@media (min-width: 768px), print {
 .page-header {
   background-color: black

Click Save Configuration

Clear Cache

  • 1
    And if you only want to change the grey bar at the top <style type="text/css">@media (min-width: 768px), print {.page-header .panel.wrapper {background-color: #39c} </style>
    – dawhoo
    Apr 26 '17 at 21:04

For the sake of simplicity you can try to change the color in app/design/frontend/Magento/luma/Magento_Theme/web/css/source/_module.less:

@header__background-color: @color-black;
@header-panel__background-color: @color-black;

then clear pub/static and var/view_preprocessed directories and subdirectories, except for pub/static/.htaccess.

though this direct change is obviously discouraged. You need to create a custom theme.

  • 1
    _module.less? this file is not part of web/css/source
    – roger
    Feb 16 '16 at 22:48
  • github.com/magento/magento2/blob/develop/app/design/frontend/…. this less file will be used to create css. Have you already tried to change it? Feb 16 '16 at 22:52
  • found the _module.less - it did not work.. deleted var/view_preprocessed, cache and pub/static/ also php bin/magento setup:static-content:deploy
    – roger
    Feb 17 '16 at 2:00
  • I was able to achieve by adding background-color: #000; under .page-header { ....the above method didnt work. is it possible to call in image as my background from there ?
    – roger
    Feb 17 '16 at 15:21
  • i tried this to _module.less, background-image: url("@{base-url}/images/bg.png"); it didnt work - any suggestions
    – roger
    Feb 17 '16 at 17:08
.page-header { background-image: url("/logoimages/Violets_Bgnd2.png"); }

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.