How to change color of footer? - html

Question

I'm new to HTML and CSS and can't figure out how I change the color of the footer that is found at http://materializecss.com/footer.html. Any help would be awesome, thanks!

Answer 1

If you want to use one of the Materialize colors, you can simply add red / orange / teal to your footer classes like this:
<footer class="page-footer pink lighten-1">

Answer 2

The class containing the colouring information about the footer is page-footer, so you can change the colour as shown below:
<style>
.page-footer {
background-color: blue;
}
</style>
Additionally you can set an ID to the footer and overwrite the existing settings, as shown:
HTML:
<footer id = "myFooter">...</footer>
CSS (inline):
<style>
#myFooter {
background-color: blue;
}
</style>
If the above doesn't work, try using !important to force the change like so:
<style>
#myFooter {
background-color: blue !important;
}
</style>
Check out this fiddle and the snippet below to see a live demonstration:
#myFooter {
background-color: blue;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/css/materialize.min.css" rel="stylesheet" type="text/css" />
<footer id="myFooter" class="page-footer">
<div class="container">
<div class="row">
<div class="col l6 s12">
<h5 class="white-text">Footer Content</h5>
<p class="grey-text text-lighten-4">You can use rows and columns here to organize your footer content.</p>
</div>
<div class="col l4 offset-l2 s12">
<h5 class="white-text">Links</h5>
<ul>
<li><a class="grey-text text-lighten-3" href="#!">Link 1</a>
</li>
<li><a class="grey-text text-lighten-3" href="#!">Link 2</a>
</li>
<li><a class="grey-text text-lighten-3" href="#!">Link 3</a>
</li>
<li><a class="grey-text text-lighten-3" href="#!">Link 4</a>
</li>
</ul>
</div>
</div>
</div>
<div class="footer-copyright">
<div class="container">
© 2014 Copyright Text
<a class="grey-text text-lighten-4 right" href="#!">More Links</a>
</div>
</div>
</footer>

Answer 3

Manual colors
As already mentioned, you can go by the class and create some CSS:
.page-footer{
background-color: your color here;
}
Or designate an ID for the footer, and set the background-color like that.
Material colors using classes
If you want to use the material colors (see the list here) you can use classes, or copy-paste the hex value. If you go with the hex value, see the first snippet under "manual colors" for implementing.
If you use the color classes, it's just like any other element:
<footer class = "page-footer your-color-class">
For an instance:
<footer class="page-footer amber darken-2">
(darken-2 isn't necessary though, it's just as an example. In this case, I used amber darken-2 as the color)
SASS/SCSS using material classes
NOTE: SASS/SCSS requires a ruby compiler, and compiles to regular CSS. If you're not using .scss or .sass, this will not work.
If you're using SASS, there's another way (this is SCSS, the same should apply to SASS, just slightly different syntax):
.page-footer{
#extend .your-color-class;
}
Using the same colors as earlier, this would be:
.page-footer{
#extend .amber, .darken-2;
}
This uses the inheritance feature of SASS/SCSS. Note that this is only possible if you've downloaded and #imported the SCSS version of materialize, which it does officially have and support.

Answer 4

just add the color code of the color you require to class of footer
example
<footer class="page-footer blue-grey darken-4">
<div class="container">
<div class="row">
<div class="col l6 s12">
<h5 class="white-text">Contacts Us</h5>
<p class="grey-text text-lighten-4">You can use rows and columns here to organize your footer content.</p>
</div>
<div class="col l4 offset-l2 s12">
<h5 class="white-text">Links</h5>
<ul>
<li><a class="grey-text text-lighten-3" href="#!">Link 1</a></li>
<li><a class="grey-text text-lighten-3" href="#!">Link 2</a></li>
<li><a class="grey-text text-lighten-3" href="#!">Link 3</a></li>
<li><a class="grey-text text-lighten-3" href="#!">Link 4</a></li>
</ul>
</div>
</div>
</div>
<div class="footer-copyright">
<div class="container">
© 2014 Copyright Gautham J
<a class="grey-text text-lighten-4 right" href="#!">More Links</a>
</div>
</div>
</footer>
color codes available here Color codes

Answer 5

CSS:
footer {
background-color: red;
}

Answer 6

i looked at the css and found the class colouring the footer.
footer.page-footer {
background-color: #333333;
}

Answer 7

In your own CSS document, which you'll need to put after the materialise.css document you will need to add:
background-color: #fff;
to the footer class.
(The #fff can be changed for different colours visit htmlcolorcodes.com for more information)
I hope they this helps...

Answer 8

Just select your footer element tag and put some CSS background on it. For example.
footer{background:red;}

Answer 9

I tried this and it worked
footer.page-footer {
background-color:hotpink;
}

Answer 10

Just add classes, example, changing nav color below:
<nav class="teal lighten-2">

Answer 11

You need to use materialize framework. If you think the cascade precendence would work... think twice. This is something Materialize needs to rethink. They should not overwrite cascade styling rules, but I guess they do with JS.
Need to add the class to the element you want to apply the color.
<span class="blue-text text-darken-2">This is a card panel with dark blue text</span>
And gray is grey before you try to hit your head on the wall.