Layouts
Default settings
// ----------------------------------------------------
// File: package/demos/src/assets/js/app.init.js
// ----------------------------------------------------
$(function () {
"use strict";
$("#main-wrapper").AdminSettings({
Layout: "vertical", // vertical | horizontal
SidebarType: "full", // full / mini-sidebar
BoxedLayout: true, // true | false
Direction: "ltr", // ltr | rtl
Theme: "light", // light | dark
ColorTheme: "Red_Theme", // Red_Theme | Aqua_Theme | Purple_Theme | Green_Theme | Cyan_Theme | Orange_Theme
cardBorder: false // true | false
});
});
How to Change Theme Color ?
// ----------------------------------------------------
// File: package/demos/src/assets/js/app.init.js
// ----------------------------------------------------
$(function () {
"use strict";
$("#main-wrapper").AdminSettings({
Layout: "vertical", // vertical | horizontal
SidebarType: "full", // full / mini-sidebar
BoxedLayout: true, // true | false
Direction: "ltr", // ltr | rtl
Theme: "light", // light | dark
ColorTheme: "Aqua_Theme", // Red_Theme | Aqua_Theme | Purple_Theme | Green_Theme | Cyan_Theme | Orange_Theme
cardBorder: false // true | false
});
});
How to Set Minisidebar ?
// ----------------------------------------------------
// File: package/demos/src/assets/js/app.init.js
// ----------------------------------------------------
$(function () {
"use strict";
$("#main-wrapper").AdminSettings({
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: "Red_Theme", // Red_Theme | Aqua_Theme | Purple_Theme | Green_Theme | Cyan_Theme | Orange_Theme
cardBorder: false // true | false
});
});
How to Set Full Sidebar ?
// ----------------------------------------------------
// File: package/demos/src/assets/js/app.init.js
// ----------------------------------------------------
$(function () {
"use strict";
$("#main-wrapper").AdminSettings({
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: "Red_Theme", // Red_Theme | Aqua_Theme | Purple_Theme | Green_Theme | Cyan_Theme | Orange_Theme
cardBorder: false // true | false
});
});
How to Set Fullwidth Layout ?
// ----------------------------------------------------
// File: package/demos/src/assets/js/app.init.js
// ----------------------------------------------------
$(function () {
"use strict";
$("#main-wrapper").AdminSettings({
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: "Red_Theme", // Red_Theme | Aqua_Theme | Purple_Theme | Green_Theme | Cyan_Theme | Orange_Theme
cardBorder: false // true | false
});
});
How to Set Card with Border ?
// ----------------------------------------------------
// File: package/demos/src/assets/js/app.init.js
// ----------------------------------------------------
$(function () {
"use strict";
$("#main-wrapper").AdminSettings({
Layout: "vertical", // vertical | horizontal
SidebarType: "full", // full / mini-sidebar
BoxedLayout: true, // true | false //
Direction: "ltr", // ltr | rtl
Theme: "light", // light | dark
ColorTheme: "Red_Theme", // Red_Theme | Aqua_Theme | Purple_Theme | Green_Theme | Cyan_Theme | Orange_Theme
cardBorder: true // true | false // Change is here
});
});
How to Set Card with Shadow ?
// ----------------------------------------------------
// File: package/demos/src/assets/js/app.init.js
// ----------------------------------------------------
$(function () {
"use strict";
$("#main-wrapper").AdminSettings({
Layout: "vertical", // vertical | horizontal
SidebarType: "full", // full / mini-sidebar
BoxedLayout: true, // true | false //
Direction: "ltr", // ltr | rtl
Theme: "light", // light | dark
ColorTheme: "Red_Theme", // Red_Theme | Aqua_Theme | Purple_Theme | Green_Theme | Cyan_Theme | Orange_Theme
cardBorder: false // true | false // Change is here
});
});
How to Set Dark Theme ?
// ----------------------------------------------------
// File: package/demos/src/assets/js/app.init.js
// ----------------------------------------------------
$(function () {
"use strict";
$("#main-wrapper").AdminSettings({
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: "Red_Theme", // Red_Theme | Aqua_Theme | Purple_Theme | Green_Theme | Cyan_Theme | Orange_Theme
cardBorder: false // true | false
});
});