In the last Thrive Theme 'Rise Theme' customization tutorial, I showed you how to personalize the header section of the theme. If you missed that post, click here to read it.
Important Notice: The 'Rise Theme' is a premium WordPress theme from Thrive Themes that is no longer available. If you are using the Rise Theme on your WordPress website, there is no guarantee that the tutorial below will continue to work.
In this tutorial post, I’m going to show you how to customize the footer section in Rise theme.
Once again, the purpose of these tutorials is to help you make the most of the Rise theme and to customize the theme just the way you want it.
I don’t claim to be an expert what so ever with theme development using Thrive Themes. However, I do have a lot of experience with these particular themes, especially when it comes to adding customization.
I have used many of the currently available themes created by Thrive Themes, both for personal use and client projects. The Rise theme (Affiliate link) is one particular theme that I tend to use a lot.
OK, let's get on with the tutorial, shall we?
Again, we’re going to be using some simple CSS to add some customization to the footer section of the Rise theme.
And again, as I said in the previous tutorial, any custom CSS you add to this theme needs to be placed in the Custom CSS box provided.
You can find this box by going to Thrive Dashboard > Rise Theme Options > Style And Layout Settings > Custom CSS. See image below.
If you want to know why this is important, and why you shouldn’t just place custom CSS inside the style.css file under Editor, refer to the last Rise theme tutorial here.
OK, let’s get cracking, finally.
I’ll assume that you've already placed some widgets inside the footer area of your WordPress site running Rise theme and that you have placed content inside of these widgets.
If you don’t yet have any footer widgets on your site, then please go to Appearance > Widgets and add some content to the Footer Column’s 1, 2 and 3.
Also, make sure that some of the content is in text form.
To change the footer background color, add the following CSS code into the custom CSS box in your Theme.
Once again, you’ll find this box by going to Thrive Dashboard > Rise Theme Options > Style & Layout Options.
footer .fmm {
background: #3F3F41 !important;
}
Don’t forget to change the value marked in red, with the desired HTML hex color code value of your choice. This could be a color to match your website’s brand identity, or whatever you want.
Use this tool to find and pick hex color codes for your site. If you’re using a Mac computer, you’ll find this app useful.
OK, so we’ve changed the actual footer area background color, next we’ll customize the very lower footer section.
To change the lower footer area background color, as well as the typography color, place the following CSS code inside your custom CSS box.
footer {
background-color: #3F3F41 !important;
background-image: -webkit-linear-gradient(#3F3F41 0%, #3F3F41 100%) !important;
background-image: linear-gradient(#3F3F41 0%, #3F3F41 100%) !important;
color: #fff !important;
}
Don’t forget to change the hex color values marked in red to whatever you want, again, maybe something to match the rest of your website’s look and feel.
If you leave the code above untouched it will change the footer section background color to gray. Whatever you change it to, be sure to make all the color codes the same, i.e background-image:
The last piece of hex color code (#fff) will change the font color to white.
You can actually change this to whatever color you want, however, remember that if you use a lighter background, for example, you might want to change this font color code to something like #000 for black.
You might have noticed that the typography or text inside the widgets appears to be slightly colored (pink shade), or whatever other color depending on the theme color setting you’re using in the 'Rise theme'.
Well, you can actually change this to whatever you want using the following CSS code placed inside the Custom CSS box:
footer .fmm p, footer .fmw p {
color: #fff !important;
}
The code above will change the font color to white, however as I said before, you can change this to whatever you want using hex color codes.
So there you have it, a short and hopefully useful tutorial on how to personalize and customize the footer section in the Rise theme from Thrive Themes.
With a bit of luck, you’ve added the codes correctly and have adjusted the values to your preference, and you’re ready to rock and roll.
You should see the changes take place immediately on your site when you refresh the page, however, if you're using a cache plugin, you might want to clear this first.
To learn more about the Rise theme from Thrive Themes, click here (Affiliate link).
More Thrive Themes tutorials coming soon.
