# 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.
## Themes
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:
## Layout
In **Layout** settings you can choose the orientation of your calculator – **Vertical, Horizontal,** or **Two columns** for **desktop view:**
{% tabs %}
{% tab title="Vertical view" %}
{% endtab %}
{% tab title="Horizontal view" %}
{% endtab %}
{% tab title="Two columns view" %}
{% endtab %}
{% endtabs %}
## **Colors**
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.
{% tabs %}
{% tab title="Without Blur effect" %}
Container Background settings:
{% endtab %}
{% tab title="With Blur effect" %}
Container Background settings:
{% endtab %}
{% endtabs %}
* **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.
{% tabs %}
{% tab title="Default Color of SVG icons" %}
{% endtab %}
{% tab title="Applied Accent Color to SVG icons" %}
{% endtab %}
{% endtabs %}
You can also customize the calculator's appearance for the mobile view.
{% hint style="info" %}
Some of the following settings for the mobile view are inherited from the desktop view: Colors, Borders & shadows, Spacing & positions, and Others.
{% endhint %}
## Typography
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.
{% tabs %}
{% tab title="Desktop view" %}
{% endtab %}
{% tab title="Mobile view" %}
{% endtab %}
{% endtabs %}
## Borders
* **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)**
{% hint style="success" %}
The changes will be applied to both **Desktop** and **Mobile** views.
{% endhint %}
## Shadows
You can set a box shadow for a container, it will be applied for both **Desktop** and **Mobile** views.
## Sizes
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.
{% tabs %}
{% tab title="Desktop view" %}
{% endtab %}
{% tab title="Mobile view" %}
{% endtab %}
{% endtabs %}
## Spacing & Positions
By changing the Spacing & Positions, you can set Paddings, Margins, and change the position for the description:
{% tabs %}
{% tab title="Desktop view" %}
{% endtab %}
{% tab title="Mobile view" %}
{% endtab %}
{% endtabs %}
* Description Position - choose the placement of the field descriptions against the field.
{% tabs %}
{% tab title="Before Field" %}
{% endtab %}
{% tab title="Second Tab" %}
{% endtab %}
{% endtabs %}
{% hint style="info" %}
*Padding* settings are changed by 40px from all sides: top, below, right, and left for the Desktop view. *Padding* settings are changed by 25px from all sides: top, below, right, and left for Mobile view.
{% endhint %}
## Others
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.**
