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.
- Container Background - The color is applied for the Calculator Box and it can be set transparent with a blur effect.
Without Blur effect
With Blur effect
Container Background settings:
Container Background settings:
- Primary color - The color is applied for Calculator title, Total summary, and Labels of fields.
- Secondary Color - The color is applied for the background of input fields such as Quantity, Radio, and checkbox.
- Accent Color - Supplementary color that contrasts or complements the primary color.
- Error Color - The color of the error notifications when required fields are not filled out.
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
You can select the Preloader icon for your calculator:
You will see animation until the content of the calculator loads:
After finishing your customization do not forget to save your changes by clicking Save.
The result of the customized calculator is shown below:
