> For the complete documentation index, see [llms.txt](https://docs.stylemixthemes.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.stylemixthemes.com/cost-calculator-builder/plugin-features/calculator-customization.md).

# Calculator Appearance

**Cost Calculator** gives you full control over how your calculator looks on the front end, so you can match the design of the calculator to your branding. It can be customized in two tabs: [**Layout** ](#layout)and [**Theme**](#theme), each managing a different visual layer of the calculator.

## Layout

The Layout tab controls the overall structural arrangement of the calculator on the page: how wide it is, where the order summary sits relative to the input fields, and how space is distributed between the two panels.

<figure><img src="/files/OEZTvPqtX6SvW5YzEC6u" alt=""><figcaption></figcaption></figure>

* [**Summary Position**](#summary-position-left) - The Summary Position setting determines where the order summary (totals panel) is rendered relative to the input fields section.
  * **Left** - Places the summary panel to the left of the input fields.
  * **Right** - Places the summary panel to the right of the input fields (side-by-side layout).
  * **Bottom** - Stacks the summary panel below the input fields in a single-column layout.
* **Max Width (px)** - Sets the maximum total width of the entire calculator widget in pixels. The calculator will not exceed this width even on wide screens. The calculator stretches up to this width and centers itself within its parent container.
* **Calculator Width (%)** - Controls what percentage of the total calculator width is occupied by the input fields panel (left/main column). The remaining percentage is automatically assigned to the Summary panel.
* **Summary Width (%)** - Controls what percentage of the total calculator width is occupied by the summary/totals panel. This slider is linked to the Calculator Width slider — they always sum to 100%.

{% tabs %}
{% tab title="Summary Position - Left" %}

<figure><img src="/files/0o2D7Tb2MwBNYL7FjDae" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Summary Position - Right" %}

<figure><img src="/files/pm1VpovlyMQqqGxmhuIP" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Sumary Position - Bottom" %}

<figure><img src="/files/EqCplTSpIsl5h82wj0i7" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

Additionally, you can use your cursor and drag to adjust the calculator width while you are in a **Layout Tab:**

<figure><img src="/files/XkkM32L8i76wfXcoatDU" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
The Reset button at the top-right of the Layout tab restores all layout settings to their factory defaults: Summary Position = Right, Max Width = 970 px, Calculator Width = 60%, Summary Width = 40%.
{% endhint %}

<figure><img src="/files/gU1WpXPSsxkuZhveLUeW" alt=""><figcaption></figcaption></figure>

## Theme

The Theme tab provides two levels of customization: Brand Themes (pre-built color palettes you can select and then optionally customize) and the full Theme Editor (six sub-tabs covering Colors, Typography, Borders, Shadows, Spacing, and Preloader).

### Brand Themes

The **Brand Themes** section displays a grid of pre-built color schemes. Each theme is represented by 5 color swatches (background, accent, error, etc.). Clicking a theme applies it instantly to the calculator preview.

<figure><img src="/files/bgIHtzfe1XyP0xxUJPCV" alt=""><figcaption></figcaption></figure>

<kbd>Customize</kbd> button opens the full Theme Editor pre-populated with that theme's values so you can tweak individual properties. Changes affect immediately and can be seen right on the builder:

<figure><img src="/files/wLaXI1iW2PumImr7Z5E5" alt=""><figcaption></figcaption></figure>

### Saved Themes

Under the brand themes, there are themes that you have customized. Once you customize the brand theme, it'll automatically be saved and can be accessed from here anytime in any calculator. To save the theme, simply save the calculator. You can delete, duplicate, and further customize the saved themes:

<figure><img src="/files/9j8lGAMwPqkzocEOlFEc" alt=""><figcaption></figcaption></figure>

## **Theme Editor**

Clicking <kbd>Customize</kbd> on any [brand theme](#brand-themes) (or clicking the <i class="fa-pen-to-square">:pen-to-square:</i> icon in the [saved theme](#saved-themes)) opens the **Theme Editor** panel with six icon tabs at the top. Each tab controls a different visual category:

<figure><img src="/files/5O6pyJyfRHJtGI1Zju1n" alt=""><figcaption></figcaption></figure>

There are **6 tabs** in the theme editor:

<figure><img src="/files/Slk0vvKugaJb2Smt5HvY" alt=""><figcaption></figcaption></figure>

* [**Colors** ](#colors)— background, text, accent, form fields, and error colors
* [**Typography** ](#typography)— font sizes and weights for every text element
* [**Borders** ](#borders)— container and field border weight, radius, and style
* [**Shadows** ](#shadows)— drop shadow color, opacity, blur, and offset
* [**Spacing** ](#spacing-and-positions)— field indent, field spacing, button/field height, container margins
* [**Preloader**](#preloader) — the spinner animation shown while the calculator loads

### **Colors**

The Colors tab lets you set the hex values for the five core color roles used throughout the calculator UI. Click the color swatch next to each field to open a color picker, or type a hex code directly.

<figure><img src="/files/Lm6OVpqiqCtytU3WlgDH" alt=""><figcaption></figcaption></figure>

* **Container** - The background color of the entire calculator widget container.
* **Opacity** - Background opacity percentage (0 = fully transparent, 100 = fully opaque). Works together with the Container color.
* **Blur** - Background blur in pixels applied to the container background (useful for frosted-glass effects when opacity < 100).

{% tabs %}
{% tab title="Without Blur effect" %}

<figure><img src="/files/2mgL4tTGXGC6a7r9IBiz" alt=""><figcaption></figcaption></figure>

Container Background settings:

<figure><img src="/files/y1ckmS10b1ITzbILhy6O" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="With Blur effect" %}

<figure><img src="/files/ioRRXT3qQm0Sd9fWHavF" alt=""><figcaption></figcaption></figure>

Container Background settings:

<figure><img src="/files/WN4oyP3ioVTMzWXyHF3U" alt=""><figcaption></figcaption></figure>
{% 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 that have SVG images. These fields can be image radio, image dropdown, image checkbox, etc.&#x20;

{% hint style="success" %}
To provide the best user experience,  the changes can be seen on the builder immediately. However, it's important to save the calculator itself to apply the changes.
{% endhint %}

### Typography

The Typography tab controls font sizes (in px) and font weights for every distinct text role in the calculator. A device toggle (desktop/[mobile](#mobile-view)) at the top lets you set separate values for each breakpoint.

{% tabs %}
{% tab title="Desktop" %}

<figure><img src="/files/BEvMJFjZOppSrp0uuIE0" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Mobile" %}

<figure><img src="/files/RXawfZWi8SyefsyR3G14" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

Here is the breakdown of the tab by settings:

* **Hide Calculator Title** - When enabled, the calculator's title heading is hidden from the front end while remaining visible in the editor.
* **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)**
* **Grand totals -** Set up the font size and weight for the Total in the Grand Total section. **(6)**
* **Fields & buttons-** Set the font size and weight for the field options and button texts. **(7)**
* **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)**
* **Text Transform** - Controls CSS text-transform for labels. Options include: None, Capitalize, Uppercase, Lowercase.

Here is a picture of where these settings will be applied.&#x20;

<figure><img src="/files/AuhByRwfU1gauPKFvqX7" alt=""><figcaption></figcaption></figure>

### Borders

The Borders tab provides independent control over the container border and the field-level borders, each with three properties.

<figure><img src="/files/AhTqCBH0pSFuuMqqiCKJ" alt=""><figcaption></figcaption></figure>

* **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)**

<figure><img src="/files/HsVqboFtsVIT4Fl2gSxx" alt=""><figcaption></figcaption></figure>

### Shadows

The Shadows tab controls the CSS box-shadow applied to the calculator container. This creates depth and separation from the page background.

<figure><img src="/files/JOb22uEHb1R6dSNtM3FO" alt=""><figcaption></figcaption></figure>

* **Shadow Color** - The color of the drop shadow. Click the swatch to open the color picker. Also, you can change the opacity of the shadow color from 0% (invisible) to 100% (fully opaque).
* **Blur** - The blur radius of the shadow in pixels. 0 = sharp shadow edge; higher values create a softer, more diffuse shadow.
* **X** - Horizontal offset of the shadow. Positive values shift the shadow right; negative values shift it left.
* **Y** - Vertical offset of the shadow. Positive values shift the shadow downward; negative values shift it upward.

<figure><img src="/files/UA0tsjVeTaPrEUBAIovW" alt=""><figcaption></figcaption></figure>

### Spacing

The Spacing tab controls the internal padding and sizing of elements within the calculator. A device toggle (desktop/[mobile](#mobile-view)) at the top allows separate values per breakpoint.

{% tabs %}
{% tab title="Desktop view" %}

<figure><img src="/files/Y2u1E3tAraPl989Eehni" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Mobile view" %}

<figure><img src="/files/vcPXpaGMdlTB7Vb44nXP" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

Here is the breakdown of the tab by settings:

* **Field side indent** - Horizontal padding (left and right) inside each input field.
* **Field spacing** - Vertical gap between consecutive fields in the calculator form.
* **Field & button height** - The height of all input fields and button elements. Increase for a more spacious, touch-friendly design.
* **Container margin** - Space between the top/bottom/left/right edges of the page/container and the calculator.
* **Container padding** - Space between the top/bottom/left/right edge of the calculator and subsequent content.
* **Description Position** - The placement of the field descriptions against the field.

{% tabs %}
{% tab title="Before Field" %}

<figure><img src="/files/RuoJl15cE5YZli0MfplD" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="After Field" %}

<figure><img src="/files/vj6KUF3MQ1paHTaxq3ja" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

### Preloader

**The Preloader Icon** tab lets you choose the loading spinner animation that appears while the calculator initializes or recalculates. Six icon options are available.

<figure><img src="/files/XlLgluXD80hPvON8ekYZ" alt=""><figcaption></figcaption></figure>

You will see an animation until the content of the calculator loads:

<figure><img src="/files/Sx1TmJTC0OdclY5sFY7J" alt=""><figcaption></figcaption></figure>


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://docs.stylemixthemes.com/cost-calculator-builder/plugin-features/calculator-customization.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.