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
Add a comment
|
3 Answers
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
-
1And 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>– dawhooApr 26, 2017 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
-
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– rogerFeb 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 ?– rogerFeb 17, 2016 at 15:21
-
i tried this to _module.less, background-image: url("@{base-url}/images/bg.png"); it didnt work - any suggestions– rogerFeb 17, 2016 at 17:08
.page-header {
background-image: url("/logoimages/Violets_Bgnd2.png");
}
