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.
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>
Undefined
Updated on: 06/08/2025
Thank you!