Cost Calculator allows you to customize your calculators. Go to Existing Calculators, choose the calculator you need, and go to Customize.
By clicking on Customize you will open the Customize Page. If you want your calculator to look unique you can customize it.
As you can see, there are only labels, quantity elements and the customization option shows those elements with some general elements such as total-summary, total, submit button, descriptions, headers, v-container.
The list of customization elements depends on calculator form elements.
It is recommended to customize your calculator after finishing it's structure.
From the right side of the page, there are all the customize options that are available. Among them, you can find fields as a range button, checkbox, drop-down, descriptions, and others. You can set up each field separately.
There are all CSS attributes to design. However, your element may not need all attributes.
For example: if there is no toggle button in your calculator, what is the point of customizing toggle button elements.
Now, to understand the customization better, let's see an example below:
Changing the container background of the calculator form:
Margin settings are changed by 5 px from all sides: top, bellow, right, left:
Font-settings of Total-Summary, Labels, Descriptions, Titles block are changed as follows with text-color, font-weight, text position, and font size:
Changing theQuantityelement of a calculator follows font-settings and border changes:
Let's see the changes on theRange buttonelement. We changed ranged-color with circle-color:
After finishing your customization do not forget to save your changes by click Save Changes.
The result of the customized calculator is shown below: