How to change color of footer?

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>