5

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

3 Answers 3

5

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

ADMIN > CONTENT > Design > CONFIGURATION

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
}
</style>

Click Save Configuration

Clear Cache

1
  • 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, 2017 at 21:04
1

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.

9
  • 1
    _module.less? this file is not part of web/css/source
    – roger
    Feb 16, 2016 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, 2016 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, 2016 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, 2016 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, 2016 at 17:08
0
.page-header { background-image: url("/logoimages/Violets_Bgnd2.png"); }

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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