How to Change Layout of Theme ?
If you want to Set Fixed Sidebar
Go to dist / js / app.init.js and change SidebarPosition: false to SidebarPosition: true as shown below:
$(function () {
"use strict";
$("#main-wrapper").AdminSettings({
Theme: false, // this can be true or false ( true means dark and false means light ),
Layout: 'vertical',
LogoBg: 'skin6', // You can change the Value to be skin1/skin2/skin3/skin4/skin5/skin6
NavbarBg: 'skin6', // You can change the Value to be skin1/skin2/skin3/skin4/skin5/skin6
SidebarType: 'full', // You can change it full / mini-sidebar / iconbar / overlay
SidebarColor: 'skin6', // You can change the Value to be skin1/skin2/skin3/skin4/skin5/skin6
SidebarPosition: true, // it can be true / false ( true means Fixed and false means absolute )
HeaderPosition: false, // it can be true / false ( true means Fixed and false means absolute )
BoxedLayout: false, // it can be true / false ( true means Boxed and false means Fluid )
});
});
If you want to Set Fixed Header
Go to dist / js / app.init.js and change HeaderPosition: false to HeaderPosition: true as shown below:
$(function () {
"use strict";
$("#main-wrapper").AdminSettings({
Theme: false, // this can be true or false ( true means dark and false means light ),
Layout: 'vertical',
LogoBg: 'skin6', // You can change the Value to be skin1/skin2/skin3/skin4/skin5/skin6
NavbarBg: 'skin6', // You can change the Value to be skin1/skin2/skin3/skin4/skin5/skin6
SidebarType: 'full', // You can change it full / mini-sidebar / iconbar / overlay
SidebarColor: 'skin6', // You can change the Value to be skin1/skin2/skin3/skin4/skin5/skin6
SidebarPosition: true, // it can be true / false ( true means Fixed and false means absolute )
HeaderPosition: true, // it can be true / false ( true means Fixed and false means absolute )
BoxedLayout: false, // it can be true / false ( true means Boxed and false means Fluid )
});
});
If you want to Set Boxed Layout
Go to dist / js / app.init.js and change BoxedLayout: false to BoxedLayout: true as shown below:
$(function () {
"use strict";
$("#main-wrapper").AdminSettings({
Theme: false, // this can be true or false ( true means dark and false means light ),
Layout: 'vertical',
LogoBg: 'skin6', // You can change the Value to be skin1/skin2/skin3/skin4/skin5/skin6
NavbarBg: 'skin6', // You can change the Value to be skin1/skin2/skin3/skin4/skin5/skin6
SidebarType: 'full', // You can change it full / mini-sidebar / iconbar / overlay
SidebarColor: 'skin6', // You can change the Value to be skin1/skin2/skin3/skin4/skin5/skin6
SidebarPosition: true, // it can be true / false ( true means Fixed and false means absolute )
HeaderPosition: true, // it can be true / false ( true means Fixed and false means absolute )
BoxedLayout: true, // it can be true / false ( true means Boxed and false means Fluid )
});
});
If you want to Set Dark Theme
Go to dist / js / app.init.js and change Theme: false to Theme: true as shown below:
$(function () {
"use strict";
$("#main-wrapper").AdminSettings({
Theme: true, // this can be true or false ( true means dark and false means light ),
Layout: 'vertical',
LogoBg: 'skin6', // You can change the Value to be skin1/skin2/skin3/skin4/skin5/skin6
NavbarBg: 'skin6', // You can change the Value to be skin1/skin2/skin3/skin4/skin5/skin6
SidebarType: 'full', // You can change it full / mini-sidebar / iconbar / overlay
SidebarColor: 'skin6', // You can change the Value to be skin1/skin2/skin3/skin4/skin5/skin6
SidebarPosition: true, // it can be true / false ( true means Fixed and false means absolute )
HeaderPosition: true, // it can be true / false ( true means Fixed and false means absolute )
BoxedLayout: false, // it can be true / false ( true means Boxed and false means Fluid )
});
});
If you want to Set MiniSidebar
Go to dist / js / app.init.js and change SidebarType: 'full' to SidebarType: 'mini-sidebar' as shown below:
$(function () {
"use strict";
$("#main-wrapper").AdminSettings({
Theme: false, // this can be true or false ( true means dark and false means light ),
Layout: 'vertical',
LogoBg: 'skin6', // You can change the Value to be skin1/skin2/skin3/skin4/skin5/skin6
NavbarBg: 'skin6', // You can change the Value to be skin1/skin2/skin3/skin4/skin5/skin6
SidebarType: 'mini-sidebar', // You can change it full / mini-sidebar / iconbar / overlay
SidebarColor: 'skin6', // You can change the Value to be skin1/skin2/skin3/skin4/skin5/skin6
SidebarPosition: true, // it can be true / false ( true means Fixed and false means absolute )
HeaderPosition: true, // it can be true / false ( true means Fixed and false means absolute )
BoxedLayout: true, // it can be true / false ( true means Boxed and false means Fluid )
});
});
If you want to Set Icon Sidebar
Go to dist / js / app.init.js and change SidebarType: 'full' to SidebarType: 'iconbar' as shown below:
$(function () {
"use strict";
$("#main-wrapper").AdminSettings({
Theme: false, // this can be true or false ( true means dark and false means light ),
Layout: 'vertical',
LogoBg: 'skin6', // You can change the Value to be skin1/skin2/skin3/skin4/skin5/skin6
NavbarBg: 'skin6', // You can change the Value to be skin1/skin2/skin3/skin4/skin5/skin6
SidebarType: 'iconbar', // You can change it full / mini-sidebar / iconbar / overlay
SidebarColor: 'skin6', // You can change the Value to be skin1/skin2/skin3/skin4/skin5/skin6
SidebarPosition: true, // it can be true / false ( true means Fixed and false means absolute )
HeaderPosition: true, // it can be true / false ( true means Fixed and false means absolute )
BoxedLayout: false, // it can be true / false ( true means Boxed and false means Fluid )
});
});
If you want to Set Overlay Sidebar
Go to dist / js / app.init.js and change SidebarType: 'full' to SidebarType: 'overlay' as shown below:
$(function () {
"use strict";
$("#main-wrapper").AdminSettings({
Theme: false, // this can be true or false ( true means dark and false means light ),
Layout: 'vertical',
LogoBg: 'skin6', // You can change the Value to be skin1/skin2/skin3/skin4/skin5/skin6
NavbarBg: 'skin6', // You can change the Value to be skin1/skin2/skin3/skin4/skin5/skin6
SidebarType: 'overlay', // You can change it full / mini-sidebar / iconbar / overlay
SidebarColor: 'skin6', // You can change the Value to be skin1/skin2/skin3/skin4/skin5/skin6
SidebarPosition: true, // it can be true / false ( true means Fixed and false means absolute )
HeaderPosition: true, // it can be true / false ( true means Fixed and false means absolute )
BoxedLayout: false, // it can be true / false ( true means Boxed and false means Fluid )
});
});
For Horizontal Layout
Go to dist / js / app.init.js and change Layout: 'full' to Layout: 'horizontal' as shown below:
$(function() {
"use strict";
$("#main-wrapper").AdminSettings({
Theme: false, // this can be true or false ( true means dark and false means light ),
Layout: 'horizontal',
LogoBg: 'skin1', // You can change the Value to be skin1/skin2/skin3/skin4/skin5/skin6
NavbarBg: 'skin1', // You can change the Value to be skin1/skin2/skin3/skin4/skin5/skin6
SidebarType: 'full', // You can change it full / mini-sidebar / iconbar / overlay
SidebarColor: 'skin6', // You can change the Value to be skin1/skin2/skin3/skin4/skin5/skin6
SidebarPosition: false, // it can be true / false ( true means Fixed and false means absolute )
HeaderPosition: false, // it can be true / false ( true means Fixed and false means absolute )
BoxedLayout: true, // it can be true / false ( true means Boxed and false means Fluid )
});
});