Frest Admin provides separate core theme assets folder app-assets/ and user assets folder assets/. So you can easily update the theme.

Like all HTML templates, you will need to manually handle all updates that we provide after purchase for free.

Follow the below steps to update Frest:

1. Backup all your files (Project/Template).
2. Review Frest's changelog to understand the changes before updating.
3. Unzip the latest version of Frest and open frest-clean-bootstrap-admin-dashboard-template/.
4. Copy with replacing changed core folder & files:
   • app-assets/
   • src/
   • .csscomb.json
   • config.json
   • gulpfile.js
   • package.json
5. Now you have all the core assets of the template. Use/Merge the latest HTML code of the element/component manually. You can also replace html/ folder if you have not made any changes.
6. Execute gulp dist command to generate css and js files in app-assets/ folder.

Bingo! You are done.

If something goes wrong, you can revert your updates by reusing your backup files.

It's very easy to change Frest Theme branding. Frest Admin uses SVG logo, you can use either SVG or image (i.e png, jpeg, etc...). You can easily change brand text too inside the h2 tag with .brand-text class.

Below is the sample code with Image logo example:

<a class="navbar-brand" href="index.html">
  <span class="brand-logo">
    <!-- Image logo code -->
    <img src="images/logo/logo.png" class="img-fluid" alt="Brand logo">
    <!--/ Image logo code -->
  </span>
  <h2 class="brand-text mb-0">BRAND TEXT</h2>
</a>

      

Below is the sample code with SVG logo example

<a class="navbar-brand" href="index.html">
  <span class="brand-logo">
    <!-- SVG logo code -->
    <svg class="logo" width="26px" height="26px" viewbox="0 0 26 26" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
      <title>icon</title>
      <defs>
        <lineargradient id="linearGradient-1" x1="50%" y1="0%" x2="50%" y2="100%">
          <stop stop-color="#5A8DEE" offset="0%"></stop>
          <stop stop-color="#699AF9" offset="100%"></stop>
        </lineargradient>
        <lineargradient id="linearGradient-2" x1="0%" y1="0%" x2="100%" y2="100%">
          <stop stop-color="#FDAC41" offset="0%"></stop>
          <stop stop-color="#E38100" offset="100%"></stop>
        </lineargradient>
      </defs>
      <g id="Sprite" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <g id="sprite" transform="translate(-69.000000, -61.000000)">
          <g id="Group" transform="translate(17.000000, 15.000000)">
            <g id="icon" transform="translate(52.000000, 46.000000)">
              <path id="Combined-Shape" d="M13.5909091,1.77272727 C20.4442608,1.77272727 26,7.19618701 26,13.8863636 C26,20.5765403 20.4442608,26 13.5909091,26 C6.73755742,26 1.18181818,20.5765403 1.18181818,13.8863636 C1.18181818,13.540626 1.19665566,13.1982714 1.22574292,12.8598734 L6.30410592,12.859962 C6.25499466,13.1951893 6.22958398,13.5378796 6.22958398,13.8863636 C6.22958398,17.8551125 9.52536149,21.0724191 13.5909091,21.0724191 C17.6564567,21.0724191 20.9522342,17.8551125 20.9522342,13.8863636 C20.9522342,9.91761479 17.6564567,6.70030817 13.5909091,6.70030817 C13.2336969,6.70030817 12.8824272,6.72514561 12.5388136,6.77314791 L12.5392575,1.81561642 C12.8859498,1.78721495 13.2366963,1.77272727 13.5909091,1.77272727 Z"></path>
              <path id="Combined-Shape" d="M13.8863636,4.72727273 C18.9447899,4.72727273 23.0454545,8.82793741 23.0454545,13.8863636 C23.0454545,18.9447899 18.9447899,23.0454545 13.8863636,23.0454545 C8.82793741,23.0454545 4.72727273,18.9447899 4.72727273,13.8863636 C4.72727273,13.5378966 4.74673291,13.1939746 4.7846258,12.8556254 L8.55057141,12.8560055 C8.48653249,13.1896162 8.45300462,13.5340745 8.45300462,13.8863636 C8.45300462,16.887125 10.8856023,19.3197227 13.8863636,19.3197227 C16.887125,19.3197227 19.3197227,16.887125 19.3197227,13.8863636 C19.3197227,10.8856023 16.887125,8.45300462 13.8863636,8.45300462 C13.529522,8.45300462 13.180715,8.48740462 12.8430777,8.55306931 L12.8426531,4.78608796 C13.1851829,4.7472336 13.5334422,4.72727273 13.8863636,4.72727273 Z" fill="#4880EA"></path>
              <path id="Combined-Shape" d="M13.5909091,1.77272727 C20.4442608,1.77272727 26,7.19618701 26,13.8863636 C26,20.5765403 20.4442608,26 13.5909091,26 C6.73755742,26 1.18181818,20.5765403 1.18181818,13.8863636 C1.18181818,13.540626 1.19665566,13.1982714 1.22574292,12.8598734 L6.30410592,12.859962 C6.25499466,13.1951893 6.22958398,13.5378796 6.22958398,13.8863636 C6.22958398,17.8551125 9.52536149,21.0724191 13.5909091,21.0724191 C17.6564567,21.0724191 20.9522342,17.8551125 20.9522342,13.8863636 C20.9522342,9.91761479 17.6564567,6.70030817 13.5909091,6.70030817 C13.2336969,6.70030817 12.8824272,6.72514561 12.5388136,6.77314791 L12.5392575,1.81561642 C12.8859498,1.78721495 13.2366963,1.77272727 13.5909091,1.77272727 Z" fill="url(#linearGradient-1)"></path>
              <rect id="Rectangle" x="0" y="0" width="7.68181818" height="7.68181818"></rect>
              <rect id="Rectangle" fill="url(#linearGradient-2)" x="0" y="0" width="7.68181818" height="7.68181818"></rect>
            </g>
          </g>
        </g>
      </g>
    </svg>
    <!--/ SVG logo code -->
  </span>
  <h2 class="brand-text mb-0">BRAND TEXT</h2>
</a>

      

Since Frest is a template and a starter project, it is built as the starting point of your project. It cannot be simply installed and used with an existing project like a third party library.

Although using Frest with any existing project is still possible, it would require extra work to connect everything together. We strongly recommend you to either start your project with Frest, or move your project on top of it to have the best experience.

Frest admin contains licensed LiveIcon within the package. There are many options to use this icons. You can find all the jQuery options documentation here.

To update LivIcons using JS, you need to update colors of following options according to your requirements :

Now, Let's have a look at how to update the array list of this file. You can update this file list as per your requirements.

we have created js function to update LivIcon color.

function updateLivicon(el){
el.updateLiviconEvo({
  strokeColor: "#ff000",
  solidColor: "#ff000",
  fillColor: "#ff000",
  strokeColorAlt: "#ff000"
  })
}

You can find all the options inside LivIcon documentation. But here we are sharing few of the options that we are updating for Frest admin template.

Frest Admin gives facility to search page and directly go to that page on click. This also provide bookmark feature, using that you can bookmark any page so that user can access that pages easily.

We are using template-search.json file for both search and bookmark list. You can find this file inside app-assets/data/ folder.

Now, Let's have a look at how to update the array list of this file. You can update this file list as per your requirements. Below is the format of an item:

{ "name": "eCommerce Dashboard", "url": "dashboard-ecommerce.html", "icon": "bx bx-desktop" },
      

Following is the details of all json list items:

Frest Admin allows you to easily manage minimum required vendors for the template.

You can manage vendors from app-assets/vendors folder which contain all the vendors CSS and JS files in css/ and js/ folder. It also contains minimum required vendors bundled CSS vendors.min.css and JS vendors.min.js file.

To manage the vendors, Frest Admin Template uses config.json file which includes source & destination path, vendors array, etc. as below:

"vendors": {
  "js": [
    "jquery/jquery.min.js",
    "popper/popper.min.js",
    "bootstrap/bootstrap.min.js",
    "perfectscrollbar/perfect-scrollbar.min.js",
    "hammer/hammer.min.js",
    "unison-js/unison-js.min.js",
    "blockui/blockui.min.js",
    "match-height/jquery.matchHeight-min.js",
    "sliding-menu/jquery-slidingMenu.min.js",
    "screenfull/screenfull.min.js",
    "pace/pace.min.js",
    "internationalization/i18n.min.js",
    "internationalization/i18n-xhr.min.js",
    "internationalization/lang-detector.min.js",
    "internationalization/i18n-jquery.min.js"
  ],
  "css": [
    "boxicons/css/boxicons.min.css",
    "flag-icons/css/flag-icon.min.css",
    "pace/pace.min.css",
    "perfect-scrollbar/perfect-scrollbar.min.css"
  ]
}

      

You can add/remove minimum required vendors for the template from this vendors array. To generate vendors bundle we have created the following gulp command which will bundle CSS and JS from the config.json's vendors array:

• Gulp task gulp dist-vendor-css to generate combined vendor CSS file in app-assets/vendors/css/vendors.min.css. It includes all required CSS vendors for this template.
• Gulp task gulp dist-vendor-js to generate combined vendor js file in app-assets/vendors/js/vendors.min.js. It includes all required JS vendors for this template.

Frest Admin provides app-assets/vendor/ folder that contains js/vendors.min.js and css/vendors.min.css files for vendors js and css.

Find config.json file in root folder. And Follow below steps to remove pace loader:

1. Remove included pace/pace.min.js from vendors > js array
2. Remove included pace/pace.min.css from vendors > css array
3. Execute gulp dist-vendor-js command to generate vendors.min.js file in app-assets/vendors/js folder.
4. Execute gulp dist-vendor-css command to generate vendors.min.css file in app-assets/vendors/css folder.

You are done!