Customizing The Style Of The Calculator Form

Created by Mike B, Modified on Tue, 5 Dec, 2023 at 12:35 PM by Angel Mavare

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:


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.





Was this article helpful?

That’s Great!

Thank you for your feedback

Sorry! We couldn't be helpful

Thank you for your feedback

Let us know how can we improve this article!

Select at least one of the reasons
CAPTCHA verification is required.

Feedback sent

We appreciate your effort and will try to fix the article