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 to your website in Dashboard > Appearance > Customize > Additional CSS editor.

What can I change?

  1. The color
  2. The background-color
  3. The font-size
  4. The padding

Where I can change it?
(front-page sections)

Regular Pages

Blog Page sections

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

The Big Title (Slider) section

The font size of the items within the Big Title section can be changed from the theme options in Dashboard -> Appearance -> Customize -> Appearance Settings -> Typography, the second tab called "Font Size".

By using the slider option for the Big Title section, the font size for all the elements available there will change proportionally. 

In case you want to control this individually for each item, this can be achieved by using the following code snippets.

Section Title 

#carousel-hestia-generic .page-header .container .hestia-title {
    font-size: 70px;
}<br>

Section Subtitle 

#carousel-hestia-generic .carousel span.sub-title {
    font-size: 35px;
}<br>

Section Buttons  

#carousel-hestia-generic .item .buttons .btn-left,
#carousel-hestia-generic .item .buttons .btn-right {
    font-size: 25px;
}<br>

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

Clients Bar

Section Background Color 

.hestia-clients-bar {<br>    background-color: #ff7f50;<br>}

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

The subscribe section of the Blog page

Hestia Blog - Subscribe section - default design

Hestia Blog - Subscribe section - custom design

Background: 

.blog #subscribe-on-blog {
    background-color: #fff;
}

Title: 

.blog #subscribe-on-blog .hestia-title {
    color: green;
    font-size: 36px;
}

Text: 

.blog #subscribe-on-blog .description {
    color: green;
    font-size: 12px;
}

Button: 

.blog #subscribe-on-blog .btn.btn-primary {
    background-color: green;
    box-shadow: 0 2px 2px 0 rgb(86 233 30 / 14%),0 3px 1px -2px rgb(30 233 101 / 20%),0 1px 5px 0 rgb(30 233 115 / 12%);
    color: white;
    font-size: 14px;
}
Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.

Still need help? Contact Us Contact Us