> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://help.stylishcostcalculator.com/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# Customizing The Style Of The Calculator Form

# ${color}[#314AF3](Introduction)  

Elevate your website's visual appeal and align it seamlessly with your brand identity using our Custom CSS feature for the Stylish Cost Calculator. This powerful functionality allows you to delve deep into customization, offering you complete control over the appearance and style of your calculator forms.

![](https://storage.crisp.chat/users/helpdesk/website/c5f0153cc3f4b000/infographics-anatomy-of-a-cost_z82b4z.png)

You can do it through your **Calculator menu > Calculator Settings > Custom Styles Settings** 
![](https://storage.crisp.chat/users/helpdesk/website/d96e75f30b471800/bee607e1-eca2-4b42-afc0-d523d2_smmmde.png)

Look for the Custom Style Settings section
![](https://storage.crisp.chat/users/helpdesk/website/637d9f3bac82fc00/2ddd6534-ae46-4687-a76f-101b9d_6pqce6.png)

---

# ${color}[#314AF3](Some examples)  

### ${color}[#314AF3](Section Titles:)  

**Section Background Title Color**

```css
.scc-title-s{  
    color: white;  
    background: blue;  
    border-radius: 5px;  
}```

If it doesn't work, add the id of your form, e.g:

```css
    #scc_form_2 .scc-title-s {
    color:white;
    background: blue;
    border-radius: 5px;
}```

---

# ${color}[#314AF3](Section Description / Subtitle:)
![](https://storage.crisp.chat/users/helpdesk/website/c5f0153cc3f4b000/image_1h8kj7m.png)

```css
  .description_section_preview{
    color: white !important;
    background: blue;
    border-radius: 5px;
    padding: 10px;
}```

---

# ${color}[#314AF3](User Action Buttons: )
   
![](https://storage.crisp.chat/users/helpdesk/website/c5f0153cc3f4b000/image_6d7xuc.png) 

[Full Tutorial Here](https://help.stylishcostcalculator.com/en/article/how-do-i-style-my-email-quote-detailed-list-or-coupon-buttons-emna3y/)

---

# ${color}[#314AF3](Entire Calculator Form Container: )

![](https://storage.crisp.chat/users/helpdesk/website/ef249dbba1915800/209ade78-071f-45d1-abad-f0cd26_1uib4ej.png)

**Container Background Color & Padding**  

```css
.calc-wrapper {  
   background: aliceblue;  
   padding: 10px;  
}```
    
---

# ${color}[#314AF3](Hide PDF box from Email Quote Form: )
![](https://storage.crisp.chat/users/helpdesk/website/44166cc96b433400/b34259e2-71fc-4022-9958-3d06a6_1lzwd6v.png)

  ```css
    .df-scc-quote-pdf-name{
    display:none !important;
}
```

Contact our support if you want to learn more.

[![](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/48258508157/original/Txm2CafyMfEybziVGXvw-BnfU2V-9TJUBg.png?1666381303)](https://stylishcostcalculator.com/features/)


[![](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/48258508158/original/DWBiVRBRBPATUwVN7APXzDACQgYCwYmXVQ.png?1666381303)](https://stylishcostcalculator.com/templates/)