Calculator Appearance
Last updated
Was this helpful?
Last updated
Was this helpful?
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 to the background of the fields.
Error сolor - The color of the error notifications when required fields are not filled out.
Apply Accent Colors to SVG icons - applies the accent color to the fields which has SVG images. These fields can be image radio, image dropdown, image checkbox, etc.
You can also customize the calculator's appearance for the mobile view.
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)
The changes will be applied to both Desktop and Mobile views.
You can set a 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 the height of the Fields & Buttons for Desktop and Mobile views individually. You can set the maximum container size for each Box style individually.
By changing the Spacing & Positions, you can set Paddings, Margins, and change the position for the description:
Description Position - choose the placement of the field descriptions against the field.
In the Others section, you can choose one of the available preloaders:
You will see an 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.
