Customization


You can customize various elements including navbar, topbar, form elements etc by simply editing Sass files present in /src/scss directory or removing unneeded components from app.scss source files. Currently few key customizations are available, but we have plan to add many more in future releases.

How to add new page?

We have provided a starter page (check src/html/pages-starter.html) which allows you to get started easily and helps you to add new pages. Please note following some important points.

  • Make sure you have included css/bootstrap.min.css,css/app.min.css, css/icons.min.css and js/vendor.min.js, js/app.min.js in your html
  • Most of the default/basic form elements along with few advanced elements are available and bundled in the 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. Take a look at here to find which are the required files for the same.

How to change colors?

In order to change colors (including primary, secondary, success, info, danger, warning, etc.), do the following:

  • A file src/scss/config/_variables.scss is containing the overridden colors and other configurations of bootstrap. You can change any values here and it would get reflected in any bootstrap based components or elements.

How to change particular UI element?

In order to change the particular UI element, widget, chart, etc., please check folder src/scss/custom/plugins. You should be able to change any style by simply making modifications in corresponding file here.

How to change footer?

In order to add, change or remove any ui elements from footer or sidebar, simply edit in file src/html/partials/footer.html). The change would reflect in all the files automatically.