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;
}
Changing Font Size of First Paragraph in Posts with Default WordPress Editor (Not Thrive Architect)
p.ifp {
font-size: 1em;
}
Removing Italic Formatting in Pullquote Shortcode Element
.bSe blockquote p {
font-style: unset;
}
how to change the color of a hyperlink in my footer?
Hi Jennifer! I have just updated the post. You can see under “Changing Footer Menu Link Color” 🙂
Very helpful, thanks for sharing