How To Customize The Footer Section In Rise Theme - Thrive Themes Tutorial

Last Updated On

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.

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, both for personal use and client projects. The Rise theme is one particular theme that I tend to use a lot.

OK, let's get on with the tutorial, shall we?

Using Custom CSS to customize the footer section in Rise Theme

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.

How To Customise The Footer Section In Rise Theme - Thrive Themes Tutorial
  • Save

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.

Changing the footer background color in Rise Theme

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.

Changing the lower footer background color and font-color in Rise Theme

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.

Changing the color of the 'typography' inside the custom footer widgets

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.

Not seeing the changes on your site?

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.

If you require assistance, however, or if you run into any problems with this tutorial, I will try my absolute best to help you out, that’s what I’m here for, remember.

To learn more about the Rise theme from Thrive Themes, click here.

More Thrive Themes tutorials coming soon.

Psst! Need a professional custom built WordPress website for your business, or a personal blog? Click here to get started.

Enjoyed reading this post?

Hey! Thanks a bunch for reading this post, I hope it was of value to you. I publish new posts every week, so be sure to check back soon, or hit the button below to subscribe.
subscribe to updates

11 comments on “How To Customize The Footer Section In Rise Theme - Thrive Themes Tutorial”

  1. Hello Fabrizio,
    Awesome post!
    People who can code are awesome ones because you can create something new.

    Thanks for adding this post. Very timely help. 🙂
    Remember, I had asked you about the sidebar customization. I asked the same to thrive themes forum and they solved it. I wanted to customize the footer and see you've the post ready!

    Fabrizio, buddy I applied your codes and still my footer (the lowermost one) is of the original color. Any idea what went wrong. my site is http://www.digitalgyd.com. Can we remove this lowermost footer?

    Thanks for this and keep writing awesome articles. 🙂
    -Swadhin

    1. Hi Swadhin, thanks for your comment, glad the Thrive Team was able to help with the sidebar. I've just finished writing the sidebar customisation post to go live this week.

      s for the footer color, I think I made a mistake. The code should start with: footer.fmm instead of footer.fm I missed out an extra m.

      I've now corrected this in the post itself, try it and let me know how you get on 🙂

      Fabrizio

      1. Hi, the above code for changing the footer colour doesn't seem to work for me? Has this changed? Thank you

  2. Hello Fabrizio,
    Awesome post!
    People who can code are awesome ones because you can create something new.

    Thanks for adding this post. Very timely help. 🙂
    Remember, I had asked you about the sidebar customization. I asked the same to thrive themes forum and they solved it. I wanted to customize the footer and see you've the post ready!

    Fabrizio, buddy I applied your codes and still my footer (the lowermost one) is of the original color. Any idea what went wrong. my site is http://www.digitalgyd.com. Can we remove this lowermost footer?

    Thanks for this and keep writing awesome articles. 🙂
    -Swadhin

  3. How can I change the header color, you have grey with you logo. Thanx for your feedback. Great to read your post!

    1. Hi Marian,

      go to STYLE AND LAYOUT SETTINGS in the Rise Theme. Then click on THEME CUSTOMIZER at the bottom of the page. Then scroll down to HEADER TYPE, then select CUSTOM COLOR under the drop down menu. You'll now have a new option to add a custom colour of your choice.

      Hope this helps 🙂

  4. Really useful post - thanks! I was wondering if there was a way of coding the colour to have opacity? I am creating a site for a musician and it has a funky background and I would like have an opaque footer.
    I tried
    footer .fmm {
    background: #000 !important;
    opacity: 0.6;
    }
    But it overlayed this opacity over the orange default colour but didn't over-ride the orange.
    Thanks!

    1. Hi Suze ,

      Thanks and I'm glad you found the post useful. That's interesting, have you tried finding the CSS code for the orange part and changing it to white? What is your website address so that I can take a look if possible 🙂

      Fabrizio

Read Commenting Policy

Start Planning Your Blogging Strategy For 2020 Today!

linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram
Share via
Copy link