Update & Migration Guide

How to update theme?

Note

Apart from V2.0 to V3.0 migration, you need to follow below instruction to upgrade with latest version.

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

Navbar

Back to top