Calculator Appearance
Cost Calculator allows you to customize your calculators. Go to Existing Calculators, choose the calculator you need, and go to Appearance.
By clicking on Appearance you will open the Appearance Page. If you want your calculator to look unique you can customize it.

In Box style settings you can specify the orientation of your calculator – Vertical, Horizontal, or Two columns for desktop view:
Vertical view
Horizontal view
Two columns view

On the right side of the page, there are Presets of the color options that are available. Among them, you can select and apply a global color scheme:
By selecting different Presets you can change the global appearance of the Calculator:
You can create a unique color scheme through the Colors section and save it by clicking
icon.
The color setting is the same for both Desktop and Mobile views.

You can edit the typography settings of the Elements for Desktop and Mobile views individually.
Desktop view
Mobile view

You can set different border styles for a container and elements individually. The changes will be applied for both Desktop and Mobile views.
Desktop view
Mobile view

You can set box shadow for a container it will be applied for both Desktop and Mobile views.
Desktop view
Mobile view

You can edit the size of the elements by changing Fields & Buttons height for Desktop and Mobile views individually. There you can set the maximum container size for each Box style individually.
Desktop view
Mobile view

By changing the Spacing & Positions you can set Paddings, Margins and change position for the description:
Desktop view
Mobile view
Padding settings are changed by 40px from all sides: top, below, right, left for Desktop view.
Padding settings are changed by 25px from all sides: top, below, right, left for Mobile view.

In the Others section, you can change the default view of the Checkbox, Radio, and Toggle elements into a horizontal view for both Desktop and Mobile views and choose one of the available preloaders:
Desktop view
Mobile view
Untitled
After finishing your customization do not forget to save your changes by clicking Save.
The result of the customized calculator is shown below:
Copy link
On this page
Box style
Colors
Typography
Borders
Shadows
Elements Sizes
Spacing & Positions
Others