> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://fpd-doc.ganymede-apps.net/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).

# Helpful CSS adjustments

**You can fine-tune the appearance and layout of the Fancy Product Designer with a few simple CSS rules. Below are some useful adjustments you can copy and paste into the custom CSS segment in the Appearance tab in the app.**

###### Show Extra Price on Done button in Customize Button Mode
Use this to show the extra price you are charging for the customization on the Done button when the product designer is in the **Customize Button mode**.

```
.fpd-modal-product-designer .fpd-container fpd-actions-bar .fpd-done span.fpd-total-price {
    display: inline-flex !important;
}
```

###### Hide QR-Code Tab in Images Module
If you don’t want the **QR-Code tab** to appear in the image upload module, use this:

```
fpd-module-images .fpd-module-tabs [data-context="qr-code"] {
    display: none !important;
}
```

###### Hide Advanced Editing Tool from the Toolbar
If you want to use the Background Removal tool, but you don't want to show the standard Advanced Editing tool, use this: 
 
```
fpd-element-toolbar .fpd-tools-nav .fpd-secondary-tools .fpd-tool-advanced-editing {
	display: none !important; 
}
```

###### Change the color of the designer outside of the canvas
You can use this code to change the color of the background outside of the canvas, but within the designer. 

```
.fpd-container>fpd-main-wrapper {
    background: #fff !important; (adjust the color hex code to match the color you want to show)
}
```

|| With these CSS adjustments, you can better control the look and feel of the product designer, ensuring it matches your shop’s design.

| If you have questions or other adjustments in mind that you don't know how to make, reach out to us in the in-app chat.