Calculator Customization

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 work to look unique and stylish change it by customizing.

The list of customization elements is taken dynamically from the calculator form elements. Elements added to the calculator form only can be changed in the customization option.

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.

If you want to customize your calculator, it is recommended to do it after finishing the creation of it since the style will not be affected by the structure.

On this page, you can specify the orientation of your calculator – Horizontal or Vertical.

Horizontal View:

Vertical View:

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. so you have to decide the necessary customize elements properly. For example: if there is no toggle button in your calculator, what is the point of customizing toggle button elements relatively.

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 the Quantity element of a calculator follows font-settings and border changes:

Let's see the changes on the Range button element. 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: