> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://staging.chrisp.chat/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 UI&Layout

Most of the layout options can be easily set via CSS classes that you need to add the product designer element which is used in new FancyProductDesigner().

**You can use the UI&Layout Composer on the official fancyproductdesigner.com website to** [generate some "Get-Started" code](https://fancyproductdesigner.com/features/ui-composer/)**.**

CSS Classes

| CSS Classes - Main | These CSS classes can be used with the product designer container element. |
| --- | --- |
| fpd-topbar | Main navigation will be displayed in a top bar. |
| fpd-sidebar | Main navigation will be displayed in a left sidebar. |
| fpd-off-canvas | Main navigation will be displayed in a off-canvas sidebar. |
| fpd-shadow-{1-9} | Set a shadow. Choose between nine different shadow types, e.g. fpd-shadow-2 |
| fpd-views-inside-{right, left} | Choose between four different inside position for the view selection. |

Example

```
<div id="fpd" class="fpd-sidebar fpd-shadow-2 fpd-views-inside-left"></div>

```