Customizing the UI&Layout

Modified on Tue, 05 Nov 2019 at 10:00 AM

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-topbarMain navigation will be displayed in a top bar.
fpd-sidebarMain navigation will be displayed in a left side bar.

fpd-sidebar fpd-sidebar-right

Main navigation will be displayed in a right side bar.
fpd-tabs fpd-tabs-sideThe tabs will be displayed at the left in the sidebar layout.
fpd-tabs fpd-tabs-topThe tabs will be displayed at the top in the sidebar layout.
fpd-shadow-{1-9}Set a shadow. Choose between nine different shadow types, e.g. fpd-shadow-2
fpd-views-inside-{top, right, bottom, left}Choose between four different inside position for the view selection.
fpd-views-outsideSets the view selection after the product designer.
fpd-top-actions-centeredCenters the top actions.
fpd-left-actions-centeredCenters the left actions.
fpd-right-actions-centeredCenters the right actions.
fpd-bottom-actions-centeredCenters the bottom actions.


 CSS Classes - HelpersAdd these CSS classes to the body
fpd-hidden-tabletsHides the product designer on tablets.
fpd-hidden-smartphonesHides the product designer on smartphones.


Example

<div id="fpd" class="fpd-shadow-2 fpd-topbar fpd-tabs fpd-tabs-side fpd-top-actions-centered fpd-bottom-actions-centered fpd-views-inside-left fpd-grid-columns-2"></div>