Most Common CSS Codes to Customize Thrive Rise Theme

Most Common CSS Codes to Customize Thrive Rise Theme

I've been using Thrive Themes and plugins since its early release in 2013. I've done a lot of websites using this tool and I watched it grow and change in all aspects. I've been helping a lot of people in customizing Thrive and members of the Thrive Community Facebook group requested to have a list of the most common CSS codes used. So here it is. I will start in Rise Theme. I will keep updating this post every time I will receive CSS-related questions.

Please note that these codes are using placeholder values. For instance, you can change the hex colors and the sizes. Also, if the code doesn't work, try adding !important before the semi-colon.

Where to put these CSS codes? For overall theme changes, just go to your Thrive Dashboard -- Theme Options -- Style & Layout Settings -- Custom CSS. Any codes you put here won't affect the landing pages because they are standalone. So for landing pages, just click the Settings (gear icon) on the top-left side of your Thrive Architect panel, then Custom CSS.

Changing Footer Color

footer .fmm {
    background: #6e252c;
}

Changing Footer Text Color & Size

footer .fmm p {
     color: #efefef;
     font-size: 15px;

}

Changing Footer Widget Area Color

footer .fmw {
    background: #6e252c;
}

Changing Active Menu Color

header nav > ul > li.current_page_item > a {
    color: #6e252c;
}

Adjusting Header Height

header .h-i {
    height: 120px;
}

Changing Navigation Menu Font Settings

header nav ul li a {
    font-family: 'Montserrat';
    color: #6e252c;
    font-weight: 600;
    font-size: 20px;

​}

Changing Navigation Menu Underline Effects Color

header nav>ul>li a:before {
    background: #6e252c;
}

Changing Mobile Hamburger Menu Background Color

header .hsm {
    background: #6e252c;
}

Changing Mobile Menu Items Background Color

@media only screen and (max-width: 768px) {
header nav ul li {
    background: #6e252c;

  }

​}

Changing Mobile Menu Items Hover Color

@media only screen and (max-width: 768px) {
header nav ul li a:hover {
    background: #c5523f;

  }

​}

Changing Mobile Menu Dropdown Top & Bottom Border Color

@media only screen and (max-width: 768px) {
header .m-si {
    background: #6e252c;

  }
}

Changing Sidebar Widget Background & Border Color

.sAsCont section .scn {
    background: #efefef;

    border: 1px solid #313131;
​}

Changing the Top Border Color in Sidebar Widget

.sAsCont section .scn:before {
    background: #6e252c;

}

Adjusting Sidebar Width

.sAsCont .sAs {
    width: 25%;
}

Adjusting Content Area Width

.bSeCont .bSe {
    width: 70%;
}

Removing Uppercase Formatting in Breadcrumbs

.brd ul li {
    text-transform: unset;

}

Adjusting Logo Size in Mobile View

@media only screen and (max-width: 940px) {
    header.side #logo img {
    max-width: 220px !important;
  }
}

Changing Blog Title Font Settings in Main Blog Page

.cnt .entry-title a {
    color: #fd5e60;
    font-size: 20px;
    font-family: 'montserrat';
}

Changing Blog Title Hover Color in Main Blog Page

.entry-title a:hover {
    color: #24447b;
}

Aligning Header Menu with the Logo

header.side .m-s {
    vertical-align: middle;
}

Adding a Border on the Header

header {
    border-bottom: solid 1px #ddd;
}

Center Align Footer Copyright Text

footer .fmm p {
    text-align: center;
}

Center Align Footer Menu

.ft-m ul {
    text-align: center;
}

Changing Footer Menu Link Color

footer a {
    color: #1b5246;
}


footer a:hover {
    color: #efefef;
}

Changing Background Color of Floating Header

header.side.adm.fbh {
    background: #efefef;
}


header.side.fbh {
    background: #efefef;
}

Removing the Gap between Header & First Element; and Gap between Last Element & Footer

.thrv_wrapper.tcb-window-width {
    margin-top: -50px !important;
    margin-bottom: -80px !important;
}

Changing Submenu Hover Font Color

header nav ul li > ul li a:hover {
    color: #a95f26;
}

Changing Sidebar Widget Title Font Settings

.sAsCont section .ttl {
    color: #144c29;
    font-family: 'Fjalla One';
    font-size: 27px;
    margin-bottom: 20px;
}

Removing Italic Formatting in Pullquote Shortcode Element

.bSe blockquote p {
    font-style: unset;
}

About the Author Kaila Sharlene

I am a freelance web designer, web developer and SEO specialist - one of the “Top Rated” web designers on Upwork. Living a digital nomad lifestyle, our family loves to explore the outdoors together while doing some freelance jobs in between. Know more about our family adventures at wyattmaktrav.com - named after my son Wyatt Maktrav.

follow me on:
  • Jennifer says:

    how to change the color of a hyperlink in my footer?

    • Kaila Sharlene says:

      Hi Jennifer! I have just updated the post. You can see under “Changing Footer Menu Link Color” 🙂

  • Alfonso says:

    Very helpful, thanks for sharing

  • >