Most Common CSS Codes to Customize Thrive Pressive Theme

Most Common CSS Codes to Customize Thrive Pressive Theme

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;
}

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:
>