Layouts

Default settings

                          
// ----------------------------------------------------
// File: package/demos/src/assets/js/theme/app.init.js
// ----------------------------------------------------    
var userSettings = {
  Layout: "vertical", // vertical | horizontal
  SidebarType: "full", // full | mini-sidebar
  BoxedLayout: true, // true | false
  Direction: "ltr", // ltr | rtl
  Theme: "light", // light | dark
  ColorTheme: "Blue_Theme", // Blue_Theme | Aqua_Theme | Purple_Theme | Green_Theme | Cyan_Theme | Orange_Theme
  cardBorder: false, // true | false
};

How to configure Theme Color ?

                          
// ----------------------------------------------------
// File: package/demos/src/assets/js/theme/app.init.js
// ----------------------------------------------------    

var userSettings = {
  Layout: "vertical", // vertical | horizontal
  SidebarType: "full", // full / mini-sidebar
  BoxedLayout: true, // true | false
  Direction: "ltr", // ltr | rtl
  Theme: "light", // light | dark
  ColorTheme: "Aqua_Theme", // Change is here // Blue_Theme | Aqua_Theme | Purple_Theme | Green_Theme | Cyan_Theme | Orange_Theme /
  cardBorder: false // true | false
};

How to configure Minisidebar ?

                          
// ----------------------------------------------------
// File: package/demos/src/assets/js/theme/app.init.js
// ----------------------------------------------------    

var userSettings = {
  Layout: "vertical", // vertical | horizontal
  SidebarType: "mini-sidebar", // full / mini-sidebar // Change is here
  BoxedLayout: true, // true | false
  Direction: "ltr", // ltr | rtl
  Theme: "light", // light | dark
  ColorTheme: "Blue_Theme", // Blue_Theme | Aqua_Theme | Purple_Theme | Green_Theme | Cyan_Theme | Orange_Theme
  cardBorder: false // true | false
};

How to configure Full Sidebar ?

                          
// ----------------------------------------------------
// File: package/demos/src/assets/js/theme/app.init.js
// ----------------------------------------------------    
    
var userSettings = {
  Layout: "vertical", // vertical | horizontal
  SidebarType: "full", // full / mini-sidebar // Change is here
  BoxedLayout: true, // true | false
  Direction: "ltr", // ltr | rtl
  Theme: "light", // light | dark
  ColorTheme: "Blue_Theme", // Blue_Theme | Aqua_Theme | Purple_Theme | Green_Theme | Cyan_Theme | Orange_Theme
  cardBorder: false // true | false
};

How to configure Fullwidth Layout ?

                          
// ----------------------------------------------------
// File: package/demos/src/assets/js/theme/app.init.js
// ----------------------------------------------------    
    
var userSettings = {
  Layout: "vertical", // vertical | horizontal
  SidebarType: "full", // full / mini-sidebar
  BoxedLayout: false, // true | false // Change is here
  Direction: "ltr", // ltr | rtl
  Theme: "light", // light | dark
  ColorTheme: "Blue_Theme", // Blue_Theme | Aqua_Theme | Purple_Theme | Green_Theme | Cyan_Theme | Orange_Theme
  cardBorder: false // true | false
}

How to configure Card with Border ?

                          
// ----------------------------------------------------
// File: package/demos/src/assets/js/theme/app.init.js
// ----------------------------------------------------    
var userSettings = {
  Layout: "vertical", // vertical | horizontal
  SidebarType: "full", // full / mini-sidebar
  BoxedLayout: true, // true | false //
  Direction: "ltr", // ltr | rtl
  Theme: "light", // light | dark
  ColorTheme: "Blue_Theme", // Blue_Theme | Aqua_Theme | Purple_Theme | Green_Theme | Cyan_Theme | Orange_Theme
  cardBorder: true // true | false // Change is here
};

How to configure Card with Shadow ?

                          
// ----------------------------------------------------
// File: package/demos/src/assets/js/theme/app.init.js
// ----------------------------------------------------    
var userSettings = {
  Layout: "vertical", // vertical | horizontal
  SidebarType: "full", // full / mini-sidebar
  BoxedLayout: true, // true | false //
  Direction: "ltr", // ltr | rtl
  Theme: "light", // light | dark
  ColorTheme: "Blue_Theme", // Blue_Theme | Aqua_Theme | Purple_Theme | Green_Theme | Cyan_Theme | Orange_Theme
  cardBorder: false // true | false // Change is here
};

How to configure Dark Theme ?

                          
// ----------------------------------------------------
// File: package/demos/src/assets/js/theme/app.init.js
// ----------------------------------------------------    
var userSettings = {
  Layout: "vertical", // vertical | horizontal
  SidebarType: "full", // full / mini-sidebar
  BoxedLayout: true, // true | false //
  Direction: "ltr", // ltr | rtl
  Theme: "dark", // light | dark // Change is here
  ColorTheme: "Blue_Theme", // Blue_Theme | Aqua_Theme | Purple_Theme | Green_Theme | Cyan_Theme | Orange_Theme
  cardBorder: false // true | false
};