Theme Layouts

How to change available theme presets

Datta Able comes up with 20+ theme layout presets. You can now change the available theme layout presets by doing the following steps:

Open file constant.js from the directory available in src\config\.

Layout	Description
Vertical	Default Configuration basename: set basename path for BrowserRouter, like /datta-able-react layout: vertical preLayout: null collapseMenu: false layoutType: menu-dark navIconColor: false headerBackColor: header-default navBackColor: navbar-default navBrandColor: brand-default navBackImage: false rtlLayout: false navFixedLayout: true headerFixedLayout: false boxLayout: false navDropdownIcon: style1 navListIcon: style1 navActiveListColor: sctive-default navListTitleColor: title-default navListTitleHide: false
Horizontal	layout: horizontal
Pre Build Layout 2	layout: vertical preLayout: layout-2 configBlock: true
Pre Build Layout 2-2	layout: vertical preLayout: layout-2-2 configBlock: true
Pre Build Layout 3	layout: vertical preLayout: layout-3 configBlock: true
Pre Build Layout 4	layout: vertical preLayout: layout-4 configBlock: true
Pre Build Layout 4-2	layout: vertical preLayout: layout-4-2 configBlock: true
Pre Build Layout 5h	layout: horizontal collapseMenu: false layoutType: menu-light navIconColor: true headerBackColor: header-blue
Pre Build Layout 6	layout: vertical preLayout: layout-6 layoutType: menu-light navBrandColor: brand-lightblue navFixedLayout: false headerFixedLayout: false layout6Background: #23b7e5 layout6BackSize: auto or cover
Pre Build Layout 8	layout: vertical preLayout: layout-8 layoutType: menu-light headerBackColor: header-lightblue navBrandColor: brand-lightblue navFixedLayout: true headerFixedLayout: true navActiveListColor: active-lightblue
Static Layout	layout: vertical navFixedLayout: false headerFixedLayout: false
Fixed Layout	layout: vertical navFixedLayout: true headerFixedLayout: true
Navbar Fixed Layout	layout: vertical navFixedLayout: true headerFixedLayout: false
Collapse Menu Layout	layout: vertical collapseMenu: true
Box Layout	layout: vertical boxLayout: true
RTL Layout	layout: vertical rtlLayout: true
Light Layout	layout: vertical layoutType: menu-light
Dark Layout	layout: vertical layoutType: dark navBackColor: navbar-dark navBrandColor: brand-dark
Color Icon	layout: vertical navListTitleColor: true