How to customize colors, font-size and padding in Hestia

This guide covers how to change colors, font-size, or padding(space) within the front page sections of Hestia Pro by using custom CSS code, in case there isn't an option in the theme for the section/element that you customize.

This code can be easily added on your website in Dashboard -> Appearance -> Customize -> Additional CSS editor.

What can I change

This section will showcase some of the CSS properties that can be used to customize the theme sections. In the next chapters of this document, you can find the appropriate selectors to target the desired section.

For more CSS properties please check this website.

Color

A color picker that generates the hex value is available on this page.

For targeting specific elements please check the next chapter of the guide.

example {
    color: #304ad4;
}

Background Color

A color picker that generates the hex value is available on this page.

For targeting specific elements please check the next chapter of the guide.

example {
    background-color: #4ac163;
}

Font-size

This will increase/decrease the text size. 

For targeting specific elements please check the next chapter of the guide.

example-1 {
    font-size: 36px; 
}
example-2 {
    font-size: 18px; 
}

Padding

The will change the space that you can see at the beginning and the end of the sections

For targeting specific elements please check the next chapter of the guide.

example {
    padding-top: 100px;
    padding-bottom: 50px;
}

Frontpage sections

In this section, you can find the appropriate selector to target the front page sections

Features

Section Padding

.hestia-features {
    padding-top: 75px;
    padding-bottom: 55px;
}

Section Background Color

.hestia-features {
    background-color: #dad1f5;
}

Section Title

.hestia-features .hestia-title {
    color: #3C4858;
    font-size: 37px;
}

Section Subtitle

.hestia-features .description {
    color: #999999;
    font-size: 18px;
}

Card Title

.hestia-features .hestia-features-content .feature-box .info-title {
    color: #3C4858;
    font-size: 18px;
}

Card Content

.hestia-features .hestia-features-content .feature-box p {
    color: #999999;
    font-size: 16px;
}

Team

Section Padding

.hestia-team {
    padding-top: 65px;
    padding-bottom: 20px;
}

Section Background Color

.hestia-team {
    background-color: #dad1f5;
}

Section Title

.hestia-team .hestia-title {
    color: #3C4858;
    font-size: 37px;
}

Section Subtitle

.hestia-team .description {
    color: #999999
    font-size: 18px;
}

Card Title

.hestia-team .hestia-team-content .card-profile .card-title {
    color: #3C4858;
    font-size: 18px;
}

Card subtitle

.hestia-team .hestia-team-content .card-profile .category {
    color: #777;
    font-size: 12px;
}

Card Content

.hestia-team .hestia-team-content .card-profile .card-description {
    color: #999999;
    font-size: 16px;
}

Testimonials

Section Padding

.hestia-testimonials {
    padding-top: 65px;
    padding-bottom: 20px;
}

Section Background Color

.hestia-testimonials {
    background-color: #dad1f5;
}

Section Title

.hestia-testimonials .hestia-title {
    color: #3C4858;
    font-size: 37px;
}

Section Subtitle

.hestia-testimonials .description {
    color: #999999
    font-size: 18px;
}

Card Title

.hestia-testimonials .hestia-testimonials-content .card-title {
    color: #3C4858;
    font-size: 18px;
}

Card Subtitle

.hestia-testimonials .hestia-testimonials-content .category {
    color: #777;
    font-size: 12px;
}

Card Content

.hestia-testimonials .hestia-testimonials-content .card-description {
    color: #999999;
    font-size: 16px;
}

Shop

Section Padding

.hestia-shop {
    padding-top: 65px;
    padding-bottom: 70px;
}

Section Background Color

.hestia-shop {
    background-color: #f0f0f0;
}

Section Title

.hestia-shop .hestia-title {
    color: #3C4858;
    font-size: 37px;
}

Section Subtitle

.hestia-shop .description {
    color: #999999
    font-size: 18px;
}

Card Category

.hestia-shop .hestia-shop-content .shop-item .card-product .content .category {
    color: #89229b;
    font-size: 12px;
}

Card Title

.hestia-shop .hestia-shop-content .shop-item .card-product .content .card-title {
    color: #00bcd4;
    font-size: 18px;
}

Card Description

.hestia-shop .hestia-shop-content .shop-item .card-product .content .card-description {
    color: #999999;
    font-size: 14px;
}

Card Price

.hestia-shop .hestia-shop-content .shop-item .card-product .content .footer .price h4 {
    color: #3C4858;
    font-size: 18px;
}

Card Cart Icon

.hestia-shop .hestia-shop-content .shop-item .card-product .content .footer .stats {
    color: #8e2cb5;
}

.hestia-shop .hestia-shop-content .shop-item .card-product .content .footer .stats i {
    font-size: 18px;
}

Pricing

Section Padding

.hestia-pricing {
    padding-top: 100px;
    padding-bottom: 70px;
}

Section Background Color

.hestia-pricing {
    background-color: #f0f0f0;
}

Section Title

.hestia-pricing .hestia-pricing-title-area .hestia-title {
    color: #3C4858;
    font-size: 37px;
}

Section Subtitle

.hestia-pricing .hestia-pricing-title-area p.text-gray {
    color: #999999
    font-size: 14px;
}

Raised Card Background Color

.hestia-pricing .hestia-table-one .card-pricing.card-raised {
    background-color: #ffffff;
}

Raised Card Name

.hestia-pricing .hestia-table-one .card-pricing.card-raised .category {
    font-size: 12px;
    color: #999999;
}

Raised Card Price

.hestia-pricing .hestia-table-one .card-pricing.card-raised .card-title {
     font-size: 60px;
     color: #2d3359;
}
.hestia-pricing .hestia-table-one .card-pricing.card-raised .card-title small {
     font-size: 26px;
     color: #777;
}

Raised Card Content

.hestia-pricing .hestia-table-one .card-pricing.card-raised ul li {
    color: #999999;
}
.hestia-pricing .hestia-table-one .card-pricing.card-raised ul li b {
    color: #3C4858;
}

Card Name

.hestia-pricing .hestia-table-one .card-pricing.card-plain .category {
    font-size: 12px;
    color: #999999;
}

Card Price

.hestia-pricing .hestia-table-one .card-pricing.card-plain .card-title {
     font-size: 60px;
     color: #2d3359;
}
.hestia-pricing .hestia-table-one .card-pricing.card-raised .card-title small {
     font-size: 26px;
     color: #777;
}

Card Content

.hestia-pricing .hestia-table-one .card-pricing.card-plain ul li {
    color: #999999;
}
.hestia-pricing .hestia-table-one .card-pricing.card-plain ul li b {
    color: #3C4858;
}

Ribbon

Section Padding

.hestia-ribbon {
    padding-top: 100px;
    padding-botton: 100px;
}

Section Title

.hestia-ribbon .hestia-title {
    font-size: 37px;
    color: #ffffff;
}

Subscribe

Section Padding

.hestia-subscribe {
    padding-top: 65px;
    padding-botto: 65px;
}

Section Title

.hestia-subscribe .title {
    color: #fff;
    font-size: 37px;
}

Section Subtitle

.hestia-subscribe .subscribe-description {
    color: #efefef;
    font-size: 18px;
}

Blog

Section Padding

.hestia-blogs {
    padding-top: 65px;
    padding-bottom: 70px;
}

Section Background Color

.hestia-blogs {
    background-color: #ffffff;
}

Section Title

.hestia-blogs .hestia-blogs-title-area .hestia-title {
    font-size: 37px;
    color: #3C4858;
}

Section Subtitle

.hestia-blogs .hestia-blogs-title-area .description {
    font-size: 18px;
    color: #999999;
}

Post Category

.hestia-blogs .hestia-blog-content .hestia-blog-item .card-blog .category {
    font-size: 12px;
    color: #00bcd4;
}

Post Title

.hestia-blogs .hestia-blog-content .hestia-blog-item .card-blog .card-title a {
    font-size: 18px;
    color: #9c27b0;
}

Post Summary

.hestia-blogs .hestia-blog-content .hestia-blog-item .card-blog .card-description {
    font-size: 14px;
    color: #999999;
}

Contact

Section Padding

.hestia-contact {
    padding-top: 90px;
    padding-bottom: 70px;
}

Section Title

.hestia-contact .hestia-title {
    font-size: 37px;
    color: #fff;
}

Section Subtitle

.hestia-contact .description {
    font-size: 18px;
    color: #ccc;
}

Section Content

.hestia-contact .hestia-description {
    font-size: 14px;
    color: #ccc;
}

Regular pages

Single Page Layout - Background Color and Text Color

.page .main {
    background-color: #000;
    color: #fff;
}

Single Post Layout - Background Color and Text color

.post .main {
    background-color: #000;
    color: #fff;
}
Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.