Pressive Theme is one of the most used themes in Thrive. Here are some of the CSS codes that you can use to customize the look of your site using Pressive 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
.fmm {
background: #7e7798;
}
Changing Footer Text Color & Size
.fmm p {
color: #efefef;
font-size: 15px;
}
Changing Footer Widget Area Color
.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;
}
Removing the Line in the Header
header .h-i {
border-bottom: none;
}
Changing Navigation Menu Font Settings
header nav ul li a {
font-family: 'Montserrat';
color: #6e252c;
font-weight: 600;
font-size: 20px;
}
Removing the Gap between the Header & Title Section
header .h-i {
margin-bottom: -20px;
}
Changing Navigation Menu Hover Effects Color
header nav>ul.menu>li.current-menu-item>a:before, header nav>ul.menu>li.current-menu-item>a:after {
background: #6e252c;
}
Changing Mobile Menu Background Color
header .hsm {
background: #6e252c;
}
Making Mobile Menu Background Transparent
header .hsm {
background: transparent;
}
Removing Mobile Menu Borders
header .hsm {
border-left: none;
border-right: none;
}
Adjusting Sidebar Width
.sAsCont .sAs {
width: 25%;
}
Adjusting Content Area Width
.bSeCont .bSe {
width: 70%;
}
Changing Mobile Menu Items Background Color
@media only screen and (max-width: 774px) {
header nav ul li a {
background: #efefef;
}
}
Changing Mobile Menu Items Hover Color
@media only screen and (max-width: 774px) {
header nav ul>li>a:hover {
background: #387fc8;
}
}
Adjusting Logo Size in Mobile View
@media only screen and (max-width: 940px) {
header.side #logo img {
max-width: 220px !important;
}
}
Changing Button Color in the Title Section
if you loaded the default Pressive template, you can see that there is a button there on top of the image. You can customize it using this CSS code.
.btn>span, .btn {
color: #ffffff;
background-color: transparent;
border-color: #F8B914;
}
Changing Button Hover Color in the Title Section
.btn>span:hover, .btn:hover {
color: #ffffff;
background-color: #f8b914;
border-color: #f8b914;
}
Aligning Header Menu with the Logo
header.side .m-s {
vertical-align: middle;
}
Changing the Hover Effects on the Post Gallery Shortcode Element
.scbg .scc .scc-t {
background:#38342c;
}
.scbg .scc:hover .scc-t:before {
border-color: transparent transparent #38342c #38342c;
}
Center Align Website Logo
@media only screen and (min-width: 775px) {
.tve-woo-minicart header .wrp {
padding-right: 0px;
}
}
Changing Blog Title Font Settings in Main Blog Page
.cnt article h2.entry-title a {
color: #167ac6;
font-size: 23px;
font-family: 'montserrat';
}
Removing the Title Section
.b-tt.b-tl {
display: none;
}
Changing Blog Title Hover Color in Main Blog Page
.cnt .entry-title a:hover {
color: #47525d;
}