Calculator Appearance
Last updated
Last updated
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.
The Appearance section has pre-made themes: Default, Orange, Sky, Black and Dark blue.
You can create your own custom theme or customize the current theme.
This window will open after clicking on the button.
In Layout settings you can choose the orientation of your calculator – Vertical, Horizontal, or Two columns for desktop view:
On the left side of the page, there are available color options.
Container - The color is applied for the calculator background and you can set the transparency level and a blur effect.
Container Background settings:
Text color - The color is applied to the calculator title, Total summary, and names of fields.
Accent (buttons & picks) - This color will be applied to the buttons and sliders.
Form fields - The color is applied for the background of the fields.
Error сolor - The color of the error notifications when required fields are not filled out.
You can also customize the calculator's appearance for the mobile view.
Some of the following settings for the mobile view are inherited from the desktop view: Colors, Borders & shadows, Spacing & positions and Others.
The Typography section lets you set up the font size and weight of the calculator text.
Header text - Set up the font size and weight for the headers of the calculator: calculator name and Summary. (1)
Label text (form labels) - Set up the font size and weight for the field names. (2)
Description - Set up the font size and weight for the field description. (3)
Summary header - Set up the font size and weight for the Name and Total in the Summary section. (4)
Summary text - Set up the font size and weight for the summary texts. (5)
Grand totals - Set up the font size and weight for the Total in the Grand Total section. (6)
Fields & buttons text - Set the font size and weight for the field options and button texts. (7)
Here is a picture of where these settings will be applied.
You can edit the typography settings of the Elements for Desktop and Mobile views individually.
Container border - Choose the type of border, size and corner rounding radius for the calculator and summary sections. (1)
Fields border - Choose the type of border, size and corner rounding radius for the calculator fields. (2)
Button border - Choose the type of border, size and corner rounding radius for the buttons. (3)
Here is a picture of where these settings will be applied.
The changes will be applied for both Desktop and Mobile views.
You can set box shadow for a container it will be applied for both Desktop and Mobile views.
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.
By changing the Spacing & Positions you can set Paddings, Margins and change position for the description:
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 choose one of the available preloaders:
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 theme and then Save.
The result of the custom created calculator is shown below:
