Magento2 : How to change the footer background color in luma-theme?

Question

I am working on magento-2 version with Luma theme.

I would like to change the footer background color from #f4f4f4 to my desired color.

I found the path is

app\design\frontend\Magento\luma\Magento_Theme\web\css\source\_module.less 
line 616

I found the property here that .page-footer default background is #f4f4f4.

at line 616:

.page-footer { i added the new background color }

But this did not work. am I in the right area?

How do I change the color?

Answer 1

I made changes in _variables.less file i.e (/app/design/frontend/web/css/source/_variables.less)

@footer__background-color: #ff0000; (RED)

Please try below command:

php bin/magento clear:cache
php bin/magento cache:flush
php bin/magento setup:static-content:deploy

I hope your changes will be reflect.

Answer 2

Try it by giving background: #f4f4f4 !important

Answer 3

I changed it by adding the following to _theme.less in my theme.

/app/design/frontend///web/css/source/_theme.less add the following (change #ffffff to your desired color)

@footer__background-color: #ffffff;

After you move that file to your server, you need to flush your static files cache (easiest way is in admin: System > Cache Management and scroll down to "Flush Static Files Cache")

Worked for me.. hopefully this helps!

Answer 4

Add the following css at your css file:

.page-footer 
{ 
  background: #f4f4f4 !important;
}

After this please clear the cache.

Answer 5

Please try below command:

php bin/magento s:s:d -f
php bin/magento c:f

Answer 6

Install grunt delete view_preprocessed under var directory after that run

• grunt clean:<theme_name>
• grunt less:<them_name>