Update & 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/_bootstrap-variables.scss, scss/core/variables/_components-variables.scss, scss/core/variables/_material-variables.scss, scss/core/colors/palette-variables.scss & scss/core/colors/material-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 from the Download section of themeforest. 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/_bootstrap-variables.scss, scss/core/variables/_components-variables.scss, scss/core/variables/_material-variables.scss, scss/core/colors/palette-variables.scss & scss/core/colors/material-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/_bootstrap-variables.scss, scss/core/variables/_components-variables.scss, scss/core/variables/_material-variables.scss, scss/core/colors/palette-variables.scss & scss/core/colors/material-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-rl command)

v2.0->v3.0

It is required to follow the theme update task before you upgrade your theme from v2.0 to v3.0

We have removed app.scss & vendors.scss files from src/scss/ folder. Which was generating app.css & vendors.css/material-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 for default layout

                  
                        <!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>