Introduction

Elevate your website's visual appeal and align it seamlessly with your brand identity using our Custom CSS feature for the Stylish Cost Calculator. This powerful functionality allows you to delve deep into customization, offering you complete control over the appearance and style of your calculator forms.

You can do it through your Calculator menu > Calculator Settings > Custom Styles Settings 

Look for the Custom Style Settings section

Some examples

Section Titles:

Section Background Title Color

.scc-title-s{
    color: white;
    background: blue;
    border-radius: 5px;
}

If it doesn't work, add the id of your form, e.g:

#scc_form_2 .scc-title-s{
    color:white;
    background: blue;
    border-radius: 5px;
}

Section Description / Subtitle:

.description_section_preview{

    color: white !important;

      background: blue;

      border-radius: 5px;

      padding: 10px;

}

User Action Buttons:

• Full Tutorial Here

Container Background Color & Padding

.calc-wrapper {
   background: aliceblue;
   padding: 10px;
}

.df-scc-quote-pdf-name{

    display:none !important;

}

Contact our support if you want to learn more.