Useful Thrive Themes Pressive CSS Code Snippets

Spread the love

Thrive Themes not only makes themes but also some powerful plugins too such as Thrive Architect, Thrive Leads etc. But as of this moment, they are only selling plugins. Their Themes are only available to Thrive members.

Pressive is one of their themes. Unlike the plugins from Thrive Themes, their themes are quite outdated in my opinion. They mentioned about releasing a theme builder in June 2018, but still after one year there are no signs of it yet.

The Pressive theme like their other  themes such as Rise, Ignition etc. does not have that much customization option. So when I work on my clients website who use Thrive Themes, I use quite a lot of code snippets to make adjustments. Such as changing colors, margins, padding etc.

So in this blog post, I am going to share with you some CSS code snippets which I have used to customize the Pressive theme from Thrive Themes. I have customized this website Chiro City.

I am providing the CSS codes below. If you have some idea about CSS then I hope you will be able to make sense out of it, and use it properly. Just copy and paste the code and the custom CSS field, and then change the values according to your needs.

Adjusting the padding around the logo

header.side #logo, header.side #text-logo {
padding-bottom: 5px;
padding-top: 10px;
}

Adjusting the header top and bottom padding, and margin

/*header top padding adjustment*/
header.side {
padding-top: 15px;
}

#floating_menu header {
padding: 15px 0 0px;
}

/*header adjustment*/
header .h-i {
margin-bottom: 0px;}

Header Color Adjustments

/*Header Search icon color adjustment*/
.d-i .s-b .s-bb, .c-o .s-b .s-bb, .d-o .s-b .s-bb, .b-i .s-b .s-bb, .c-t .s-b .s-bb {
color: #084CF9;
}

/*homepage header color adjustment*/
#floating_menu header {
background: #fff;
}

/*header part blue gradient*/
.b-tt.b-tl {
color: #fff; background: linear-gradient(90deg, rgba(6,76,249,1) 0%, rgba(8,166,244,1) 100%); }

Header Menu Items adjustments

/*Active Menu Item line color*/
header nav>ul.menu>li.current-menu-item>a:after, header nav>ul.menu>li.current_page_item>a:after, header nav>ul.menu>li.current-page-item>a:after, header nav>ul#menu>li.current-menu-item>a:after, header nav>ul#menu>li.current_page_item>a:after, header nav>ul#menu>li.current-page-item>a:after
{ background: #064CF9; }

/*Second line color of active menu item*/
header nav>ul.menu>li.current-menu-item>a:before, header nav>ul.menu>li.current_page_item>a:before, header nav>ul.menu>li.current-page-item>a:before, header nav>ul#menu>li.current-menu-item>a:before, header nav>ul#menu>li.current_page_item>a:before, header nav>ul#menu>li.current-page-item>a:before
{ background: #064CF9; }

/*header menu font-family*/
.t-c header nav>ul>li>a, .c-c header nav>ul>li>a
{ color: #333; font-family: montserrat; }

/*active menu item left line removal*/
header nav>ul.menu>li.current-menu-item>a:hover:before, header nav>ul.menu>li.current_page_item>a:hover:before, header nav>ul.menu>li.current-page-item>a:hover:before, header nav>ul#menu>li.current-menu-item>a:hover:before, header nav>ul#menu>li.current_page_item>a:hover:before, header nav>ul#menu>li.current-page-item>a:hover:before
{ display:none; }

/*active menu item right line removal*/ header nav>ul.menu>li.current-menu-item>a:hover:after, header nav>ul.menu>li.current_page_item>a:hover:after, header nav>ul.menu>li.current-page-item>a:hover:after, header nav>ul#menu>li.current-menu-item>a:hover:after, header nav>ul#menu>li.current_page_item>a:hover:after, header nav>ul#menu>li.current-page-item>a:hover:after
{ display:none; }

/*menu item hover color*/
header nav > ul.menu > li > a:hover { color: #064CF9!important; }

Header Search icon color adjustment or complete removal

/*Header Search icon color adjustment*/
.d-i .s-b .s-bb, .c-o .s-b .s-bb, .d-o .s-b .s-bb, .b-i .s-b .s-bb, .c-t .s-b .s-bb
{ color: #084CF9; }

/*removing search icon*/
.s-b .s-bb { display: none; }

Blog Page adjustments

/*blog page title hover color*/
.cnt article h2.entry-title a:hover
{ color: #064CF9; }

/*continue reading hover color*/
.bSe a, .cnt article a:hover
{ color: #064CF9; }

/*Blog image hover color*/
.ind .fwit:hover:after, .gin .fwit:hover:after, .mry .fwit:hover:after
{ background: #08A6F4;
opacity: .8; }

Changing Menu Icon color in mobile view

/*Mobile Menu Toggle Icon Color*/
@media only screen and (max-width: 774px){
header .hsm span:after { background: #064CF9; }
}

Leave a Reply

Your email address will not be published. Required fields are marked *