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

PreviousProject ConfigurationNextTheme/Style Configuration

Last updated