Upgrade from v5.0.0 to v5.1.0

• Take a backup of your folder
• Copy assets/scss folder and replace it. Note if you made any changes in any of these files, you might want to compare the changes and then copy accordingly.
  • Note : You need to replace all scss files
• Following partial files are updated:
  • Changed: partials/left-sidebar.html
  • Changed: partials/horizontal-nav.html
  • Changed: partials/topbar.html
  • Changed: partials/footer.html
  • Changed: partials/right-sidebar.html
• Following js files are updated:
  • Changed: src/assets/js/hyper-layout.js
  • Changed: src/assets/js/hyper-config.js
  • Changed: src/assets/js/hyper-syntax.js
• Following data attributes are changed:
  • Changed: data-sidenav-color to data-menu-color

Upgrade from v4.6.0 to v5.0.0

• Take a backup of your folder
• Copy assets/scss folder and replace it. Note if you made any changes in any of these files, you might want to compare the changes and then copy accordingly.
  • Note : You need to replace all scss files
• Replace gulpfile.js folder with new gulpfile.js
• Following are plugins related changes:
  • Changed: assets/js/vendor.min.js (it now only includes jquery, Simplebar and Bootstrap bundle js), the form related plugins are now need to be added manually based your use.
  • Added: assets/vendor/** - all required js and css files for plugins
  • Removed: assets/js/vendor/** and assets/css/vendor/**.
• Following partial files are updated:
  • Changed: partials/left-sidebar.html
  • Changed: partials/topbar.html
  • Changed: partials/horizontal-nav.html
  • Changed: partials/right-sidebar.html
  • Added: partials/html.html
  • Added: partials/menu.html
  • Added: partials/footer-scripts.html
  • Added: partials/syntax-highlight.html
  • Removed: partials/body.html
  • Removed: partials/detached-left-sidebar.html
  • Removed: partials/topbar-dark.html
• Following js files are updated:
  • Changed: src/assets/js/hyper-main.js(old file name hyper.js )
  • Changed: src/assets/js/hyper-layout.js(old file name layout.js )
  • Added: src/assets/js/hyper-config.js
  • Added: src/assets/js/hyper-syntax.js
• Following data attributes (related to sidebar theme, layout, etc) are changed:
  • Changed: data-layout-color to data-theme
  • Changed: data-leftbar-theme to data-sidenav-color
  • Changed: data-leftbar-compact-mode to data-sidenav-size
  • Added: data-sidenav-user for Left sidebar user info
  • Removed: data-rightbar-onstart

Upgrade from v4.5.0 to v4.6.0

• Take a backup of your folder
• Copy assets/scss folder and replace it. Note if you made any changes in any of these files, you might want to compare the changes and then copy accordingly.
  • Note : You need to replace all scss files (we support light & dark mode through root variables & removed variables-dark.scss, custom-variables-dark.scss)

Upgrade from v4.4.0 to v4.5.0

• Take a backup of your folder
• Copy assets/scss folder and replace it. Note if you made any changes in any of these files, you might want to compare the changes and then copy accordingly. Following files are updated:
  • Changed: All _variables.scss and _custom-variables.scss
  • Changed: src/assets/scss/custom/structure/_topbar.scss
  • Changed: src/assets/scss/custom/structure/_right-sidebar.scss
  • Changed: src/assets/scss/custom/structure/_left-menu.scss
  • Changed: src/assets/scss/custom/structure/_footer.scss
  • Changed: src/assets/scss/custom/plugins/_apexcharts.scss
  • Changed: src/assets/scss/custom/plugins/_datepicker.scss
  • Changed: src/assets/scss/custom/plugins/_quill-editor.scss
  • Changed: src/assets/scss/custom/plugins/_datatable.scss
  • Changed: src/assets/scss/custom/plugins/_calendar.scss
  • Changed: src/assets/scss/custom/plugins/_select2.scss
  • Changed: src/assets/scss/custom/components/_card.scss
  • Changed: src/assets/scss/custom/components/_reboot.scss
  • Changed: src/assets/scss/custom/components/_modal.scss

Upgrade from v4.3.0 to v4.4.0

• Take a backup of your folder
• Copy assets/scss folder and replace it. Note if you made any changes in any of these files, you might want to compare the changes and then copy accordingly. Following files are updated:
  • Changed: All _variables.scss and _custom-variables.scss
  • Changed: src/assets/scss/custom/components/_modal.scss
  • Changed: src/assets/scss/custom/components/_buttons.scss
  • Changed: src/assets/scss/custom/components/_cards.scss

Upgrade from v4.2.0 to v4.3.0

• Take a backup of your folder
• Copy assets/scss folder and replace it. Note if you made any changes in any of these files, you might want to compare the changes and then copy accordingly. Following files are updated:
  • Changed: All _variables.scss and _custom-variables.scss
  • Added: src/assets/scss/custom/plugins/_jstree.scss

Upgrade from v4.1.0 to v4.2.0

• Take a backup of your folder
• Copy assets/scss folder and replace it. Note if you made any changes in any of these files, you might want to compare the changes and then copy accordingly. Following files are updated:
  • Changed: All _variables.scss and _custom-variables.scss

Upgrade from v4.0.0 to v4.1.0

• Take a backup of your folder
• Copy assets/scss folder and replace it. Note if you made any changes in any of these files, you might want to compare the changes and then copy accordingly. Following files are updated:
  • Changed: src/assets/scss/custom/structure/_topbar.scss
  • Changed: src/assets/scss/custom/structure/_left-menu.scss
• Copy js folder and replace it. Note if you made any changes in any of these files, you might want to compare the changes and then copy accordingly. Following files are updated:
  • Changed: src/assets/js/hyper.js
  • Changed: src/assets/js/layout.js

Upgrade from v3.4.0 to v4.0.0

• Take a backup of your folder
• Copy html files. Note that most of the html files are updated in order to use bootstrap v5 latest elements
• Copy assets/scss folder and replace it. Note if you made any changes in any of these files, you might want to compare the changes and then copy accordingly. Following files are updated:
  • Changed: All _variables.scss and _custom-variables.scss
  • Changed: src/assets/scss/custom/structure/all files
  • Changed: src/assets/scss/custom/plugins/_apexcharts.scss
  • Changed: src/assets/scss/custom/plugins/_calendar.scss
  • Changed: src/assets/scss/custom/plugins/_datatable.scss
  • Changed: src/assets/scss/custom/plugins/_datepicker.scss
  • Changed: src/assets/scss/custom/plugins/_daterange.scss
  • Changed: src/assets/scss/custom/plugins/_frappe-gantt.scss
  • Changed: src/assets/scss/custom/plugins/_ion-rangeslider.scss
  • Added: src/assets/scss/custom/plugins/_quill-editor.scss
  • Changed: src/assets/scss/custom/plugins/_rating.scss
  • Changed: src/assets/scss/custom/plugins/_select2.scss
  • Changed: src/assets/scss/custom/plugins/_timepicker.scss
  • Changed: src/assets/scss/custom/plugins/_toaster.scss
  • Changed: src/assets/scss/custom/plugins/_typehead.scss
  • Changed: src/assets/scss/custom/pages/_authentication.scss
  • Changed: src/assets/scss/custom/pages/_timeline.scss
  • Changed: src/assets/scss/custom/components/mixins/_badge.scss
  • Changed: src/assets/scss/custom/components/utilities/_text.scss
  • Changed: src/assets/scss/custom/components/_accordions.scss
  • Changed: src/assets/scss/custom/components/_avatar.scss
  • Changed: src/assets/scss/custom/components/_badge.scss
  • Changed: src/assets/scss/custom/components/_buttons.scss
  • Changed: src/assets/scss/custom/components/_card.scss
  • Changed: src/assets/scss/custom/components/_custom-forms.scss
  • Changed: src/assets/scss/custom/components/_dropdown.scss
  • Changed: src/assets/scss/custom/components/_forms.scss
  • Changed: src/assets/scss/custom/components/_modal.scss
  • Changed: src/assets/scss/custom/components/_nav.scss
  • Changed: src/assets/scss/custom/components/_pagination.scss
  • Changed: src/assets/scss/custom/components/_print.scss
  • Changed: src/assets/scss/custom/components/_reboot.scss
  • Changed: src/assets/scss/custom/components/_ribbons.scss
  • Changed: src/assets/scss/custom/components/_steps.scss
  • Changed: src/assets/scss/custom/components/_widgets.scss
• Copy js folder and replace it. Note if you made any changes in any of these files, you might want to compare the changes and then copy accordingly. Following files are updated:
  • Changed: src/assets/js/hyper.js
  • Changed: src/assets/js/layout.js
  • Added: src/assets/js/pages/demo.quilljs.js
  • Removed: src/assets/js/pages/demo.summernote.js
  • Changed: src/assets/js/pages/all files

Upgrade from v3.3.0 to v3.4.0

• Take a backup of your folder
• Copy assets/scss folder and replace it. Note if you made any changes in any of these files, you might want to compare the changes and then copy accordingly. Following files are updated:
  • Changed: src/assets/scss/custom/structure/_left-menu.scss
  • Changed: src/assets/scss/custom/structure/_topbar.scss
  • Changed: src/assets/scss/custom/plugins/_datatable.scss
  • Changed: src/assets/scss/custom/plugins/_daterange.scss
  • Changed: src/assets/scss/custom/plugins/_calendar.scss
  • Changed: src/assets/scss/custom/components/_forms.scss
  • Changed: src/assets/scss/custom/components/_breadcrumb.scss
  • Added: src/assets/scss/custom/components/_custom-forms.scss
• Copy js folder and replace it. Note if you made any changes in any of these files, you might want to compare the changes and then copy accordingly. Following files are updated:
  • Changed: src/assets/js/hyper.js

Upgrade from v3.2.0 to v3.3.0

• Take a backup of your folder
• Copy following html files and replace it. Note if you made any changes in any of these files, you might want to compare the changes and then copy accordingly. Following files are updated:
  • Changed: src/creative/partials/horizontal-nav.html
  • Changed: src/creative/partials/topbar.html
  • Changed: src/creative/partials/topbar-dark.html
  • Changed: src/modern/partials/horizontal-nav.html
  • Changed: src/modern/partials/topbar.html
  • Changed: src/modern/partials/topbar-dark.html
  • Changed: src/saas/partials/horizontal-nav.html
  • Changed: src/saas/partials/topbar.html
  • Changed: src/saas/partials/topbar-dark.html
• Copy assets/scss folder and replace it. Note if you made any changes in any of these files, you might want to compare the changes and then copy accordingly. Following files are updated:
  • Changed: src/assets/scss/custom/structure/_horizontal-nav.scss
  • Changed: src/assets/scss/custom/structure/_topbar.scss
  • Changed: src/assets/scss/custom/plugins/_datatable.scss
  • Changed: src/assets/scss/custom/plugins/_summernote.scss
  • Changed: src/assets/scss/custom/components/_dropdown.scss
  • Changed: src/assets/scss/custom/components/_forms.scss
  • Changed: src/assets/scss/custom/components/_switch.scss
  • Changed: src/assets/scss/custom/components/_widgets.scss
• Copy js folder and replace it. Note if you made any changes in any of these files, you might want to compare the changes and then copy accordingly. Following files are updated:
  • Changed: src/assets/js/layout.js
  • Changed: src/assets/js/hyper.js

Upgrade from v3.1.0 to v3.2.0

• Take a backup of your folder
• Copy assets/scss folder and replace it. Note if you made any changes in any of these files, you might want to compare the changes and then copy accordingly. Following files are updated:
  • Changed: src/assets/scss/custom/plugins/_summernote.scss
  • Changed: src/assets/scss/custom/structure/_left-menu.scss
  • Changed: src/assets/config/saas/_custom-variables.scss
  • Changed: src/assets/config/modern/_custom-variables.scss
  • Changed: src/assets/config/creative/_custom-variables.scss
  • Changed: src/assets/config/creative/_custom-variables.scss
• Copy js folder and replace it. Note if you made any changes in any of these files, you might want to compare the changes and then copy accordingly. Following files are updated:
  • Changed: src/assets/js/layout.js
  • Changed: src/assets/js/hyper.js

Upgrade from v3.0.0 to v3.1.0

• Take a backup of your folder
• Copy scss folder and replace in folder. Note if you made any changes in any of these files, you might want to compare the changes and then copy accordingly. Following are the changes done in new version:
  • Removed: custom/plugins/_slimscroll.scss
  • Added: custom/plugins/_simplebar.scss
  • Changed: custom/structure/_left-menu.scss
  • Changed: custom/structure/_right-sidebar.scss

Upgrade from v2.0.0 to v3.0.0

• Take a backup of your folder
• Copy gulpfile.js, package.json and replace into your root folder
• Delete existing node_modules folder
• Install all dependencies using command yarn install Note that, we droppped npm and started using Yarn in order have consistent build tools.
• We reverted the way few partials were being handled in v2. They are now not being loaded via ajax, instead of that they are now being loaded via gul--file-include. This change was necessary because many user reported that, having ajax based menu loading caused trouble for them and so we reverted to older way. Please make sure to change following in your html:
  1. Replace the line <div id="vertical-sidebar-placeholder"></div> <div id="detached-sidebar-placeholder"></div> with @@include('./partials/left-sidebar.html')
  2. Replace the line <div id="vertical-topbar-placeholder"></div> <div id="horizontal-topbar-placeholder"></div> with @@include('./partials/topbar.html')
  3. Remove the line <div id="detached-topbar-placeholder"></div> which is present just after starting of body element.
• Note that, most of the styling of theme is moved under "Saas" demo. You can refer it inside src/assets/scss/config/saas folder. Additionally, we have added two more demos i.e. Modern and Creative.

Upgrade from v1.5.0 to v2.0.0

• Take a backup of your folder
• Copy gulpfile.js, package.json and replace into your root folder
• Delete existing node_modules folder
• Install all dependencies using command npm install
• We changed the way few partials were being handled in previous version. They are now not being included at the time of build, instead they are getting loaded using ajax from code nowonward. This change was necessary to provide powerful layout apis. Please make sure to change following in your html:
  1. Replace the line @@include('./partials/left-sidebar.html') with <div id="vertical-sidebar-placeholder"></div> <div id="detached-sidebar-placeholder"></div>
  2. Replace the line @@include('./partials/topbar.html') with <div id="vertical-topbar-placeholder"></div> <div id="horizontal-topbar-placeholder"></div>
  3. Append the line
     just after body element.
• Please review the scss file structure now. We have moved the config variables files under default folder.

Upgrade from v1.4.0 to v1.5.0

• Take a backup of your folder
• Copy gulpfile.js, package.json and replace into your root folder
• Install all dependencies using command npm install
• Copy following scss files and paste in folder scss.
  1. custom/plugins/_datepicker.scss
• Copy following scss files and replace in folder scss. Note if you made any changes in any of these files, you might want to compare the changes and then copy accordingly.
  1. scss/app.scss
  2. scss/app-dark.scss
  3. config/_variables.scss
  4. config/_custom-variables.scss
  5. config/dark/_variables-dark.scss
  6. config/dark/_custom-variables-dark.scss
  7. custom/components/_widgets.scss
  8. custom/plugins/_apexcharts.scss
  9. custom/structure/_left-menu.scss
• Copy following js files and paste in folder js.
  1. pages/demo.dashboard-projects.js
  2. pages/demo.apex-radar.js
• Copy following js files and replace in folder js. Note if you made any changes in any of these files, you might want to compare the changes and then copy accordingly.
  1. hyper.js
  2. pages/demo.apex-area.js
  3. pages/demo.apex-bar.js
  4. pages/demo.apex-bubble.js
  5. pages/demo.apex-column.js
  6. pages/demo.apex-line.js
  7. pages/demo.apex-mixed.js
  8. pages/demo.apex-pie.js
  9. pages/demo.apex-radar.js
  10. pages/demo.apex-radialbar.js
  11. pages/demo.apex-scatter.js
  12. pages/demo.dashboard-crm.js

Upgrade from v1.3.0 to v1.4.0

• Take a backup of your folder
• Copy gulpfile.js, package.json and replace into your root folder
• Install all dependencies using command npm install
• Almost most of scss files are changed in order to increase flexibility. Please compare and replace all of them carefully.
• Similarily js files are changed too. Please compare and replace all of them carefully.

Upgrade from v1.2.0 to v1.3.0

• Take a backup of your folder
• Copy gulpfile.js, package.json and replace into your root folder
• Install all dependencies using command npm install
• Copy following scss files and paste in folder scss.
  1. custom/components/mixins/ _badge.scss
  2. custom/components/utilities/_text.scss
  3. custom/components/_badge.scss
  4. custom/components/_steps.scss
• Copy following scss files and replace in folder scss. Note if you made any changes in any of these files, you might want to compare the changes and then copy accordingly.
  1. scss/app.scss
  2. config/_variables.scss
  3. config/_custom-variables.scss
  4. custom/components/_buttons.scss
  5. custom/components/_mixins.scss
  6. custom/components/_reboot.scss
  7. custom/components/_tables.scss
  8. custom/components/_utilities.scss
  9. custom/components/_widgets.scss
  10. custom/plugins/_metis-menu.scss
  11. custom/structure/_footer.scss
  12. custom/structure/_horizontal-nav.scss
  13. custom/structure/_left-menu.scss
  14. custom/structure/_page-head.scss
  15. custom/structure/_right-sidebar.scss
• Copy following js files and paste in folder js.
  1. pages/demo.apex-candlestick.js
  2. pages/demo.widgets.js
  3. pages/demo.customers.js
  4. pages/demo.products.js
  5. pages/demo.sellers.js
• Copy following js files and replace in folder js. Note if you made any changes in any of these files, you might want to compare the changes and then copy accordingly.
  1. hyper.js
  2. pages/demo.apex-bar.js
  3. pages/demo.apex-pie.js
  4. pages/demo.apex-radialbar.js
  5. pages/demo.apex-sparklines.js

Upgrade from v1.1.0 to v1.2.0

• Take a backup of your folder
• Copy gulpfile.js, package.json and replace into your root folder
• Install all dependencies using command npm install
• Copy following scss files and paste in folder scss.
  1. custom/components/_social.scss
  2. custom/plugins/_apexcharts.scss
  3. custom/plugins/_bootstrap-timepicker.scss
  4. custom/plugins/_bootstrap-touchspin.scss
  5. custom/plugins/_summernote.scss
• Copy following scss files and replace in folder scss. Note if you made any changes in any of these files, you might want to compare the changes and then copy accordingly.
  1. scss/app.scss
  2. config/_variables.scss
  3. custom/components/_cards.scss
  4. custom/components/_modal.scss
  5. pages/_authentication.scss
• Copy following js files and paste in folder js.
  1. pages/demo.summernote.js
  2. pages/demo.simplemde.js
  3. pages/demo.apex-area.*.js (* means all different types of charts)
• Copy following js files and replace in folder js. Note if you made any changes in any of these files, you might want to compare the changes and then copy accordingly.
  1. hyper.js

Upgrade from v1.0.0 to v1.1.0

• Take a backup of your folder
• Copy gulpfile.js, package.json and replace into your root folder
• Install all dependencies using command npm install
• Copy following scss files and paste in folder scss.
  1. custom/components/_avatar.scss
  2. custom/pages/_tasks.scss
  3. custom/plugins/_dragula.scss
  4. custom/plugins/_dropzone.scss
  5. custom/structure/_horizontal-nav.scss
• Copy following scss files and replace in folder scss. Note if you made any changes in any of these files, you might want to compare the changes and then copy accordingly.
  1. scss/app.scss
  2. config/_custom-variables.scss_variables.scss
  3. custom/components/_forms.scss
  4. _reboot.scss
  5. custom/plugins/_calendar.scss
  6. custom/plugins/_metis-menu.scss
  7. custom/plugins/_select2.scss
  8. custom/structure/_footer.scss
  9. custom/structure/_left-menu.scss
  10. custom/structure/_right-sidebar.scss
  11. custom/structure/_topbar.scss
• Copy following js files and paste in folder js.
  1. ui/component.dragula.js
  2. ui/component.fileupload.js
  3. pages/demo.project-detail.js
• Copy following js files and replace in folder js. Note if you made any changes in any of these files, you might want to compare the changes and then copy accordingly.
  1. pages/demo.google-maps.js
  2. pages/demo.vector-maps.js
  3. hyper.js
• Copy following html files and replace in your folder Note if you made any changes in any of these files, you might want to compare the changes and then copy accordingly.
  1. partials/topbar.html
  2. partials/left-sidebar.html
• Copy following html files and paste in your folder. Note that if you are only interested in styles for now, you don't need to perform this step
  1. partials/horizontal-nav.html
  2. partials/left-sidebar-light.html
  3. apps-projects-details.html
  4. apps-projects-list.html
  5. apps-tasks.html
  6. form-fileuploads.html
  7. layouts-collapsed.html
  8. layouts-horizontal.html
  9. layouts-light-sidenav.html
  10. ui-dragula.html