Navbar
Back to top

Update & Migration Guide

  1. Home
  2. Migration Guide

How to update theme?

We provide lifetime free updates of our theme and We've also considered easy update & migration steps for our customers.

Heads Up!

Do not forget to commit changes or back-up the project before performing update / migration steps.

It is not recommended to change any css,scss & js files inside app-assets/ & src/ folder apart from following scss/core/variables/_variables.scss, scss/core/variables/_components-variables.scss & scss/core/colors/palette-variables.scss scss files to avoid future update conflicts. If you still modify any other files, it may requires to merge it manually with future updates.

Tip

Use assets/ folder for user customization purpose, you can add any custom css,js files & images in this folder. It is not required to replace or merge with future updates for this folder.

This is the common task for all future updates.

  • Commit changes or back-up the project before performing update / migration steps.
  • Download the latest version of this theme. Extract the zip file.
  • If you're using compiled assets (Not using SCSS, node or gulp):
    • Hope you have not made any changes in app-assets/ folder as per our template documentation.
    • Copy app-assets/ folder from downloaded latest package and replace it in your project. Your are done!
    • If you have modified any files in app-assets/, it may requires to merge it manually with future updates. Use only assets/ folder to avoid this step.
  • If you're using uncompiled sources: (Using SCSS, node or gulp):
    • Take back-up of following files scss/core/variables/_variables.scss, scss/core/variables/_components-variables.scss & scss/core/colors/palette-variables.scss scss files if you are changing them as some times it require manual merge when we release new updates.
    • Copy src/ folder from downloaded latest package and replace it in your project. Merge scss/core/variables/_variables.scss, scss/core/variables/_components-variables.scss & scss/core/colors/palette-variables.scss scss files if you have changed.
    • Hope you have not made any changes in app-assets/ folder as per our template documentation. Copy app-assets/data, app-assets/fonts, app-assets/images & app-assets/vendors folder from downloaded latest package and replace it in your project.
    • Execute npm install
    • Run gulp dist command to generate all updated css & js files. (If you are using RTL, Run gulp dist-rtl command)

v1.1->v1.2

It is required to follow the theme update task before you upgrade your theme from v1.1 to v1.2

We have removed app.scss & vendors.scss files from src/scss/ folder. Which was generating app.css & vendors.css files in app-assets/css/ folder.

  • We have created separate vendors.css file in vendors/css/ folder. So you need to include vendors.css css file with updated path in your existing HTML files.
  • As we have removed app.css file which was including bootstrap.css, bootstrap-extended.css, components.css & colors.css fils, so it required to include all those files in your existing HTML files.

Updated HTML snippet for above changes

               
                     <!DOCTYPE html>
                     <html class="loading" lang="en" data-textdirection="ltr">
                       <head>
                         ....
                         <!-- BEGIN VENDOR CSS-->
                         <link rel="stylesheet" type="text/css" href="../app-assets/vendors/css/vendors.min.css">
                         <link rel="stylesheet" type="text/css" href="../app-assets/vendors/css/ui/prism.min.css">
                         <!-- END VENDOR CSS-->
                         <!-- BEGIN STACK CSS-->
                         <link rel="stylesheet" type="text/css" href="../app-assets/css/bootstrap.css">
                         <link rel="stylesheet" type="text/css" href="../app-assets/css/bootstrap-extended.css">
                         <link rel="stylesheet" type="text/css" href="../app-assets/css/colors.css">
                         <link rel="stylesheet" type="text/css" href="../app-assets/css/components.css">
                         <!-- END STACK CSS-->
                         <!-- BEGIN Page Level CSS-->
                         <link rel="stylesheet" type="text/css" href="../app-assets/css/core/menu/menu-types/vertical-menu-modern.css">
                         <link rel="stylesheet" type="text/css" href="../app-assets/css/core/colors/palette-gradient.css">
                         <!-- END Page Level CSS-->
                         <!-- BEGIN Custom CSS-->
                         <link rel="stylesheet" type="text/css" href="../assets/css/style.css">
                         <!-- END Custom CSS-->
                       </head>
                     <body>
                     .....
                     </body>
                     </html>