Theme Layouts
How to change available theme presets
Last updated
How to change available theme presets
Last updated
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