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.
footer .fmm {
background: #6e252c;
}
footer .fmm p {
color: #efefef;
font-size: 15px;
}
footer .fmw {
background: #6e252c;
}
header nav > ul > li.current_page_item > a {
color: #6e252c;
}
header .h-i {
height: 120px;
}
header nav ul li a {
font-family: 'Montserrat';
color: #6e252c;
font-weight: 600;
font-size: 20px;
}
header nav>ul>li a:before {
background: #6e252c;
}
header .hsm {
background: #6e252c;
}
@media only screen and (max-width: 768px) {
header nav ul li {
background: #6e252c;
}
}
@media only screen and (max-width: 768px) {
header nav ul li a:hover {
background: #c5523f;
}
}
@media only screen and (max-width: 768px) {
header .m-si {
background: #6e252c;
}
}
.sAsCont section .scn {
background: #efefef;
border: 1px solid #313131;
}
.sAsCont section .scn:before {
background: #6e252c;
}
.sAsCont .sAs {
width: 25%;
}
.bSeCont .bSe {
width: 70%;
}
.brd ul li {
text-transform: unset;
}
@media only screen and (max-width: 940px) {
header.side #logo img {
max-width: 220px !important;
}
}
.cnt .entry-title a {
color: #fd5e60;
font-size: 20px;
font-family: 'montserrat';
}
.entry-title a:hover {
color: #24447b;
}
header.side .m-s {
vertical-align: middle;
}
header {
border-bottom: solid 1px #ddd;
}
footer .fmm p {
text-align: center;
}
.ft-m ul {
text-align: center;
}
footer a {
color: #1b5246;
}
footer a:hover {
color: #efefef;
}
header.side.adm.fbh {
background: #efefef;
}
header.side.fbh {
background: #efefef;
}
.thrv_wrapper.tcb-window-width {
margin-top: -50px !important;
margin-bottom: -80px !important;
}
header nav ul li > ul li a:hover {
color: #a95f26;
}
.sAsCont section .ttl {
color: #144c29;
font-family: 'Fjalla One';
font-size: 27px;
margin-bottom: 20px;
}
p.ifp {
font-size: 1em;
}
.bSe blockquote p {
font-style: unset;
}
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.
Session expired
Please log in again. The login page will open in a new tab. After logging in you can close it and return to this page.
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