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

Entire Calculator Form Container:

Container Background Color & Padding

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

Hide PDF box from Email Quote Form:

.df-scc-quote-pdf-name{
    display:none !important;
}

Contact our support if you want to learn more.

Updated on: 21/06/2024