Customizing Color Palette
You can change the color palatte of any demo very easily by simply changing the few scss variables value.
In order to modify the colors in existing
themes, open the _variables-default.scss
file from
src/assets/scss/config/
and
change any variable in it. Your changes would get reflected
automatically in any bootstrap based components or elements.
Note that, this requires you to setup and run gulp flow
provided in installation steps earlier.
Customizing Color Mode, Sidenav, Topbar, and Layout Width
Simulor allows you to have customized left sidenav, overall layout
width or topbar menu. You could turn the left sidebar to
different size, theme (look) and size. You can customize it by
specifying the layout data attribute (data-*={}
) on html
element in your html. The config object properties accept the
following values:
Title | Type | Options | Description |
---|---|---|---|
data-bs-theme |
String | "dark" | "light" | Changes overall color scheme to dark |
data-layout-width |
String | "fluid" | "boxed" | Changes the Content width of overall layout |
data-topbar-color |
String | "dark" | "light" | "brand" | Changes topbar color scheme to dark or light |
data-menu-color |
String | "light" | "dark" | "brand" | the Menu color scheme. By default, it would be set to default (light) |
data-sidenav-size |
String | "default" | "compact" | "condensed" | "full" | "fullscreen" | Changes overall Sidenav Width. ( * Only available in Sidenav Menu) |
data-layout-mode |
String | "default" | "detached" | Changes overall layout mode ( * Available in Sidenav) |
Customizing Theme via Head.JS (path: assets/js/config.js
)
You can override default theme via defaultConfig
in config.js
// Default Config Value
var defaultConfig = {
theme: "light", // "dark" | "light"
layout: {
mode: "default", // "default" | "detached"
width: "fluid", // "fluid" | "boxed"
},
topbar: {
color: "dark", // "light" | "dark" | "brand"
},
menu: {
color: "light", // "light" | "dark" | "brand"
},
// This option for only vertical (left Sidebar) layout
sidenav: {
size: "default", // "default" | "compact" | "condensed" | "full" | "fullscreen"
},
};
Adding new page
We have provided a starter page (check
src/pages-starter.html
). It allows you to get
started easily and helps you to add new page. Please note
following important points:
- Make sure you have included
css/bootstrap.min.css
,css/app.min.css, css/icons.min.css
,js/head.js
,js/vendor.min.js
andjs/app.min.js
in your html.
- Most of default/basic form elements along with few advanced elements are available and bundled in above css and js and so you don't need to include any css or js separately.
- Few elements e.g. charts, data tables, calendar, maps etc requires you to include corresponding css and js files in your html. Please check corresponding documentation page for the same.
Horizontal Menu
Simply update in the
src/partials/menu.html
file to
includes and Update @
file.
Add attribute in the
src/partials/main.html
file to
html
tag
data-layout="horizontal"
<html data-layout="horizontal">
RTL Version
In order to have RTL enabled with light version, replace the reference of
bootstrap.min.css
to bootstrap-rtl.min.css
and
app.min.css
to app-rtl.min.css
Add attribute in the
src/partials/main.html
file to
html
tag
dir="rtl"
<html dir="rtl">