Changing the footer background color

Note : the following code snippet requires advanced WordPress developer skills. There's no guarantee that this snippet works as is with the latest version of our themes, and with the latest version of WordPress. That's why you need to always test any code snippets in a staging environment before implementing it in a production site.

1) Click on Customiz’it! button and open the Custom CSS panel.

2) Copy/paste the following code and replace #f0f0f0 by your wanted color


Related Snippets you may also like

13 thoughts on “Changing the footer background color

  • Utkarsh Wadhwa


    In the footer section of the site I want to change the black color to the white color and the Custom CSS code you gave is not working.

    Please help me

  • Carol

    I added

    footer#footer {
    background: none repeat scroll 0 0 #FFF !IMPORTANT;

    to the theme’s custom css AND Custom CSS stylesheet, but the color of the footer is still #FAFAFA, the default blue.min.css and won’t override.

  • Robin


    I just changed the footer background to white which worked fine. However, I am not able to change the color of the title of the text widget I placed in the footer area. How can I change the color of the text widget title within the footer?


  • Elisabeth Duckeck

    Hi Nicolas,

    Thank you for this post, as I was looking for to costumize the footer to the colors I want to use for my site.

    What I still do not like is the color of the titels on the pages. I want them to be the same color as I have set now for the footer.

    As I am total Newby and I do not have any idea of CSS coding (even though I understand what they mean) I would appreciate if you could give me a code for to change the title color aswell.

    Thanks a lots!

  • Rasmus Steen Rasmussen

    Awesome theme and thank you very much! I’ve search the internet for this aswell and haven’t founde a solution either yet. Would sure help 🙂

  • Nicolas Post author

    Hi Renaud, your code is fine, I just tested it and it worked.
    Check if there are no other CSS rules overrinding this one in your stylesheet.

    • Renaud Moignard

      Thanks for your answer, Nicolas.

      Unfortunately, I haven’t found what could overide my code. I have tried something to be sure that nothing overides the footer rules, I only let in my style.css this code :

      Theme Name: Customizr
      Theme URI:
      Description: Thème enfant pour le thème customizr
      Author: Renaud Moignard
      Author URI:
      Template: customizr
      Version: 0.1.0

      @import url(“../customizr/style.css”);

      footer#footer {
      border-top: none;
      background: black;
      But, it still doesn’t work : the footer background is desesperatly white.

      If you have any another idea to test…



  • Renaud Moignard

    Hi all,

    I desesperatly try to change the background color of the footer of my website. I have inserted in the style.css file of my child theme the code :

    footer#footer {
    border-top: none;
    background: black;

    It is ok for the removing of the border on the top of the footer but unfortunately it doesn’t work for the background color.
    Can somebody help me ?



  • Michael Campos

    Thank you Nicolas! This theme is PERFECT for my new client and his needs! Thanks for this particular tip as well. Any advice on inserting navigation links in the footer? Thanks.

Comments are closed.