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 )
});
});