• Home
  • /
  • Blog
  • /
  • How to Change Background Color of Header and Footer for Thrive Rise Theme

How to Change Background Color of Header and Footer for Thrive Rise Theme

It's quite easy to change the background colors of the Header and Footer of Thrive's Rise Theme. The theme comes with 6 preset colors to choose from, Blue, Green, Orange, Purple, Red, and Teal. These are global settings which can be edited at WordPress dashboard, Thrive Dashboard, Theme Options, Style and Layout Settings. 

Change background color for header and footer for Thrive Rise Theme

You can try each Color Scheme to see if you like any of these preset colors. I didn't like any of them enough so I had to customize the colors manually.

First to change the Header manually, go to WordPress dashboard, Appearance, Customize, Header, then set the Header type to Custom Color and click on the Select Color button under Header color.

Change background color for header and footer for Thrive Rise Theme
Change background color for header and footer for Thrive Rise Theme

You will now see the color palette. You can click anywhere in the palette to test that specific color, and when you do, the Header will change each time you click a new color. 

Change background color for header and footer for Thrive Rise Theme

Here I clicked a magenta type color and the header background changed to that color. It's so easy and quick to test different colors. 

Change background color for header and footer for Thrive Rise Theme

Here I clicked on a bright shade of yellow. When you've found the perfect color and you are ready to go with it, just click on the blue Publish button on the upper left. And that's it your Header will display your chosen color in all pages across your site.

Change background color for header and footer for Thrive Rise Theme

So that was simple. The tricky part with this theme though, is editing the footer background color if you don't like any of the 6 colors presented to you in the Thrive Dashboard, Theme Options, Style and Layout Settings page. There is no Footer section in the Appearance, Customize where we edited the Header. 

But don't worry there is a way to do it. We have to use Custom CSS. CSS is the language that controls how a website looks especially for colors, layout and fonts. It also allows the website to adapt the presentation to different types of devices such as large PC/laptop screens, medium tablet screens or small mobile screens.

We won't be touching the theme's CSS because we might break something or any changes we make in the theme's CSS will be wiped out when the theme comes out with a newer version. 

So what we have to do is introduce code in the Custom Css field found at Thrive Dashboard, Theme Options, Style and Layout Settings.

Change background color for header and footer for Thrive Rise Theme

Not to fear, there really is no coding needed. All you have to do is copy and paste the following piece of code into the Custom Css field.

/* 20190623 custom rise theme's footer background */
footer .fmm {
background: #F5D76E !important; /*yellow*/
}

Things inside the dash asterisk symbols are comments and don't affect the code. I like to give comments regarding the date the code was added and a short description of what the following code does.

In order to change the footer to any color you want or to match what you selected for the Header you need to get the hex code of that color. In my case, my hex color for the exact yellow shade I liked is #F5D76E. 

If you don't know your Header's hex code, go to WordPress dashboard, Appearance, Customize, Header, click the Select Color button, then you can copy the code there which starts with a number/pound sign. Use that to substitute for the #F5D76E part of my code and click Save All Changes button on the bottom of the Style settings page and you've got your footer background matching your header. 

Change background color for header and footer for Thrive Rise Theme

These custom colors will remain even if Thrive Rise has a new version and you update to it.

Have fun changing the colors of you website!

For more tips to help you with your Online Business Skills and turn your Passion into Success, Subscribe Here.

What are the 3 things you need to start an Online Business? Click Here to find out.

If you liked this video, please πŸ‘ Like and πŸ’Œ Share it. It would be much appreciated. 😍

Did you know you can create your own website with 1 click of a button. Start yours now with Bluehost. Up to 66% off!

Transcript of Video

Tags: change header and footer background color,thrive theme,rise theme,thrive rise,change rise theme color,custom css color footer,customize thrive rise wordpress,wordpress thrive,thrive rise theme

{"email":"Email address invalid","url":"Website address invalid","required":"Required field missing"}