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.

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.

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.

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.

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.

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.

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

welcome to sharing your passion calm I

am chill and my goal is to help people

create an online business which can also

be called digital or online marketing to

do so I'll be teaching you how to create

your own website using WordPress to

email automation make online courses add

membership access earn through affiliate

marketing and lots more subscribe and

hit the notification bell if you are

interested in any or all of these thank

you corgis are my favorite dogs in the

world whoa okay in this video we are

going to change the header background

color and the footer background color of

this theme this theme is called rise

it's by thrive themes and this theme is

good for blogging selling things online

marketing affiliate marketing almost

anything because it's easy to work with

it's simple and clean okay to change the

color of the header which is a different

process than changing the color of the

footer there's a little tricky part to

the footer first let's go to our

WordPress dashboard and appearance

customize okay let's go to header and

the default color for this theme is blue

there's 60 there six colors to choose

from and because we picked blue in the

Thrive dashboard it populates these

colors appropriately for the blue theme

and if you picked red these will be red

so it's going by the theme default you

just pick one color out of the Thrive

options area and it will control all

these automatically but we want to

customize this one to a specific color I

want myung a little darker I want Myung

like a navy blue to match this yellow

color habit as the current logo okay

so to change this to a custom color just

go down here header type theme default

it was what we had but we changed that

to custom color and click this select

color you can choose colors from this

what do you call this grid or this

palette you can click anywhere here and

it'll update so easy that's kind of neat

I like that

blues greens excuse me okay but you know

what I have a particular color and I

have the hex code for that the hex code

is just a 6 character code for your

color and this is my color it's a navy

blue see that okay and all we have to do

is publish that and if we go to our

website and refresh the page and there

we have it

updated color is navy blue but the thing

is the footer is separate this is still

the default blue color it's not this

navy blue color so the thing with this

theme you have to do a special trick

let's go to the Thrive dashboard theme

options and go to style and layout

settings and this is where you control

the basic colors blue green orange

purple red teal the way to change the

footer is to add custom CSS and this is

the section where you can add it and I'm

going to copy and paste my code

right here and this is the comments

section of the code II could add any

notes you want to tell you when you

created this code why you did it and so

this is the actual code it's just a

snippet of code and all you need to

customize your footer color is update

this with your hex color code that's my

navy blue color so I'll just save all

changes and update this page and this

footer should match the top one as soon

as I press reload

there you go it's now navy blue so

that's how you change Rhys themes header

and footer colors and that concludes our

video thanks I hope you found this

useful and if so please give the video a

like and even share it with others who

you know will find it useful let me know

down on the comments section below if

you have other questions I haven't

addressed and I'll certainly get back to

you as soon as I can to get more

information on how to use great

productivity tools and ideas you can

pause the video and check the

description section below to stay

updated with new valuable lessons

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