FAQs 🤨

The most frequently asked questions by our customer for Frest, It may help you also to get answer of your questions.


Frest using SVG image for logo/branding. But you can use either image or svg.

Also, you can update/replace brand name Frest with your branding.

User can also add/remove utility classes for logo / branding as per their requirements. Like, branding text color, font size, margin/padding etc..

You can find below code in html files to update logo/branding :

<div class="app-brand">
  <a href="index.html" class="app-brand-link">
    <span class="app-brand-logo h-px-20 w-px-30">
      <!-- Replace SVG image -->
      <svg>
        .....
      </svg>
      <!--/ Replace SVG image -->
      OR
      <!-- Add image -->
      <img src="...IMAGE_PATH/IMAGE.PNG" alt="logo">
      <!--/ Add image -->
    </span>
    <span class="app-brand-text menu-text ms-2">Frest</span>
  </a>
  ...
</div>

If you have logo with png, jpg, then you can use <img> tag.

If you have logo with svg then you can use <svg> ... </svg> tag.

How to include & use a typeface (custom font)?

Frest admin template allows user to include custom font. To use google font, please follow below steps :

  • Here, we are adding Open Sans google fonts.
  • Create a google font URL with all the bold and italic options that you like to use, For that select style from here: https://fonts.google.com/specimen/IBM+Plex+Sans
  • After adding styles, you will get link to use on the web, like :
  • <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght@0,400;0,500;0,600;1,400;1,500;1,600&display=swap" rel="stylesheet">
  • Include this copied link to html page's head section. That will include fonts inside your template.

Now, to apply included fonts to the template,

If you are familiar with SCSS (Recommended method),

  • Find scss/_custom-variables/_bootstrap-extended.scss file and add below font-family variables:
  • // Prefix for :root CSS variables
    $variable-prefix: bs- !default;
    // * Typography
    // *******************************************************************************
    // scss-docs-start font-variables
    $font-family-sans-serif: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !default;
    $font-family-monospace: monospace !default;  // You can update this font as well
    // stylelint-enable value-keyword-case
    $font-family-base: var(--#{$variable-prefix}font-sans-serif) !default;
    $font-family-code: var(--#{$variable-prefix}font-monospace) !default;

If you are not familiar with SCSS (Not recommended method)

  • You can change --bs-font-sans-serif CSS variable value with new one in the folder assets/vendors/css/, files core.css and core-dark.css (for dark layout).
    For example, to use Open Sans fonts, --bs-font-sans-serif: 'Open Sans'.

    For RTL supported layouts, find same files from assets/vendors/css/rtl folder.
How to use custom font-icons?

Frest provides option to use custom font icons. So user can use icons of their own choice as well.

If you are using building tools,

If you want to add other font-icons like boxicons. Please follow below steps :

  • Include font-icons inside package.json file to install using npm / yarn
  • "dependencies": {
      ...
      "boxicons": "~2.0.9",
      ...
    }
  • Run command yarn install or npm install to install fonts inside template's node-modules
  • Now, create boxicons.scss file inside src/fonts/ folder.
  • Include boxicon css from node-modules to boxicons.scss file.
  • You can add custom variables, style and override current font style. Like below
  • $boxicons-font-size-base: 16px;  // variable
    
    @import '../node_modules/boxicons/css/boxicons';  // import from node-modules
    
    // Custom scss
    .bx {
      vertical-align: middle;
      font-size: 1.15rem;
      line-height: 1;
    }
    // Override font path according to yours
    @font-face {
      font-family: 'boxicons';
      font-weight: normal;
      font-style: normal;
    
      src: url('../fonts/boxicons/boxicons.eot');
      src: url('../fonts/boxicons/boxicons.eot') format('embedded-opentype'),
        url('../fonts/boxicons/boxicons.woff2') format('woff2'),
        url('../fonts/boxicons/boxicons.woff') format('woff'),
        url('../fonts/boxicons/boxicons.ttf') format('truetype'),
        url('../fonts/boxicons/boxicons.svg?#boxicons') format('svg');
    }
  • To build css and get fonts files, declare custom fonts to src/tasks/build.js file.
  • // Build fonts
    // -------------------------------------------------------------------------------
    const FONT_TASKS = [
      {
        name: 'boxicons',
        path: 'node_modules/boxicons/fonts/*'
      },
      ...
    ]
  • Include style file in html files, like
  • <link rel="stylesheet" href="ASSETS_PATH/vendor/fonts/boxicons.css" />
  • Run below command(s) to build fonts. For other build tasks read more :
  • yarn build
    
    OR
    
    yarn build:fonts
    yarn build:css
  • Now, user can use boxicons fonts with it's classes like class="bx bx-message" and so on..

If you are not using building tools,

You can include CDN fonts using CDN. Read More

If you want to use font icons using font files. Read More

How to integrate in to my existing project?

Since Frest is a template and a starter project, it’s 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.

How can I adjust the breakpoint at which the menu collapses?

Here, we're providing guidance on updating breakpoints to control the hiding or collapsing of the menu within specific layout sections such as the navbar, menu, and footer. Remember that customization is necessary for components and elements used within the content area to align with these breakpoint adjustments.

Please proceed with the following steps to update breakpoint from xl to lg:

  1. In the file scss\_custom-variables\_components.scss , you should replace the existing value of the variable with your desired breakpoint value. You can use values such as xxl, xl, lg, md, or sm. As we have updated with lg
  2. $menu-collapsed-layout-breakpoint: lg !default;
  3. For the JavaScript breakpoint, it's crucial to ensure it matches the CSS breakpoint. You'll need to ascertain the pixel sizes of breakpoints, such as xl (1200px) and lg (992px). Update the LAYOUT_BREAKPOINT value in the js/helpers.js file to correspond with the CSS variable breakpoint:
  4. LAYOUT_BREAKPOINT = 992; // Update this value according to your CSS variable breakpoint

    Step 1 & 2 changes will synchronize the CSS and JavaScript functionality to reflect the adjusted collapse menu breakpoint.

  5. However, it's important to note that components like the navbar utilize xl classes to maintain the default screen layout.

    For instance, if you've updated xl to lg, the following changes would be required for the navbar (Between <!-- Navbar --> <!--/ Navbar -->) in HTML:

    Vertical Layout

    • Update the class navbar-expand-xl to navbar-expand-lg in <nav> tag.
    • Also, ensure you adjust layout-menu-toggle breakpoints from *-xl-* to *-lg-*

    Horizontal Layout

    • Update navbar branch display classes from navbar-brand app-brand demo d-none d-xl-flex to navbar-brand app-brand demo d-none d-lg-flex
  6. If you intend to make comprehensive changes, locate classes with xl and modify them according to the new breakpoints. For instance, if you've changed xl to lg, update related classes accordingly.
How to remove an option from style switcher?

To remove any style switcher from light, dark, system.

For example, user wants to remove system option then they need to remove it from navbar & customizer

Remove below code from every HTML pages,

<li>
  <a class="dropdown-item" href="javascript:void(0);" data-theme="system">
    <span class="align-middle"><i class="bx bx-desktop me-2"></i>System</span>
  </a>
</li>

Find below code in template-customizer.js file,

// Styles
    TemplateCustomizer.STYLES = [
      {
        name: 'light',
        title: 'Light'
      },
      {
        name: 'dark',
        title: 'Dark'
      },
      {
        name: 'system',
        title: 'System'
      }
    ]

And, remove system option from that array, so it will be like,

// Styles
    TemplateCustomizer.STYLES = [
      {
        name: 'light',
        title: 'Light'
      },
      {
        name: 'dark',
        title: 'Dark'
      }
    ]

And, all set!!

How to update search result?

Frest template gives facility to search page and directly go to that page on click.

As this template provides vertical & horizontal layout options, We are using search-[vertical|horizontal].json file for search list. You can find this file inside src/assets/json/ 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. In search list, we are adding pages, files & members. All the page path and image URLs should be updated as per your requirements.

Below is the format of an item:

{
  "pages": [
    {
      "name": "Dashboard Analytics",
      "icon": "bx-home-circle",
      "url": "index.html"
    },
    {...}
  ],
  "files": [
    {
      "name": "Class Attendance",
      "subtitle": "By Tommy Shelby",
      "src": "img/icons/misc/search-xls.png",
      "meta": "17kb",
      "url": "app-file-manager.html"
    },
    {...}
  ],
  "members": [
    {
      "name": "John Doe",
      "subtitle": "Admin",
      "src": "img/avatars/1.png",
      "url": "app-user-view-account.html"
    },
    {...}
  ]
}

Following is the details of all json list items:

Attribute Details
name Using which name you want to search this page.
icon Icon you want to show before the page name. We have used feather svg icons so using only icon name here.
url URL of the page
subtitle To display subtitle for files & members
src Source image path for files & members
meta To display meta size of the files
How to add different images for dark and light layout?

If you are using dark & light both mode(layout) then you can set dark & light image with img tag.

Use data-app-light-img data attribute for light image and data-app-dark-img data attribute for dark image. You can find switchImage javascript function from main.js which use data-app-{dark|light}-img data attribute to switch image.

Find below code for an example to use to add dark/light image attributes :

<img src="img/image-light.png" alt="" class="app-brand-img w-px-150" data-app-light-img="image-light.png" data-app-dark-img="image-dark.png">
When opening the HTML page, why am I encountering console errors?

Frest using relative assets path for our HTML file assets.

You can't run HTML files directly from the file system. You need to run it from a web server.

For example, if you open index.html file directly from the file system, you will get below error in your browser console.

Find below ways to resolve this issue:

  1. Run the template on your local server like, XAMPP, MAMP, WAMP, etc... Then add our template inside htdocs/ folder of your Local Server.

    After that, you can access the template using http://localhost/Frest/ URL.

  2. Use npm or yarn command to run the template on your local server. Read more

    For Yarn: (Recommended)

    yarn
    yarn build (optional)
    yarn serve

    For NPM:

    npm install --legacy-peer-deps
    npm run build (optional)
    npm run serve
  3. Also, If you are using VS Code IDE, you can use live server extension to make template work with direct serve.
Why am I getting unable to resolve dependency tree error?

While installing node packages using npm,, if you are getting error Like, Unable to resolve dependency tree errors then below solution might be helpful to you.

It seems that the older peer dependencies from your system causing this issue. This happens for some packages after updating to npm 7 (opens new window). Parameter --legacy-peer-deps can help:

npm i --legacy-peer-deps

Use Yarn instead of Npm to avoid this type of errors.

Why am I getting warnings while npm/yarn install ?

You might get some warnings while running yarn install/npm install like below:

theme-warnings

The warnings you are receiving while installing are from library/packages we used.

We always keep our packages up to date when we make major releases. However, the writer of that package may use an older dependency that is no longer maintained for backward compatibility or any other code-related issue. But, that's not an issue with template and you should not worry about it. Those packages will work fine with our template.

Why am I getting npm install errors?

Causes of npm install or yarn install issue can be due to various things which include:

  • Dependency resolved by package manager (npm/yarn) conflict with other installed dependency. Check unable to resolve dependency tree error
  • The dependency of the package we use have an internal issue or that dependency has some issue with your environment.
  • Package or dependency of the package requires some additional step or configuration to work in your environment.
  • Downloaded package is broken or is got tampered.

To resolve such installation issue:

  • Please try again downloading fresh package/zip from ThemeForest and perform the installation again.
  • Make sure you are using Node LTS version or Suggest node version by template while installing packages.
  • run npm cache clean

After following above steps and still if you are getting the error then please raise support at our support portal with the following details:

  • Your OS information, Node version, npm/yarn version, Template/Package version.
  • Attache log file of the error you are getting in your console (Provide full log).
How to update the Frest?

Like other HTML templates, you will need to manually handle all updates that we provide in future.

There are two different ways to updating Frest:

  1. Fork our Git Repo (Recommended)
    1. Before starting your new project, get template repository access and fork it and build your app on top of that fork.
    2. In the future, you can easily merge the changes from the main repo onto your fork. This may require merging a lot of changes manually, but it's the best way to keep the Frest updated and track the changes easily.
    3. Using GitHub you can easily Sync a fork of a repository to keep it up-to-date with the upstream repository.
  2. Update manually
    1. Prerequisite:
      • VS Code IDE
      • VS Code Extension: Compare Folders
      • Frest Package you started your project with (Older version of Frest package which you used)
    2. Review Frest changelog to have a quick preview on what has been updated.
    3. Download Frest Latest Package and Unzip it.
    4. Use VS code compare folders extension and compare both packages for changes to adopt them in your project.
    5. If you haven't made any changes in core folder then replace with merge scss/, js/, libs/ and fonts/ folders. Your custom files like, style.scss or script.js should not affect by using replace with merge.
    6. Manually update the HTML code where necessary by using VS code compare.
    7. Run yarn install or npm install task to update 3rd party plugins with their latest versions.
    8. Build the project using npm run build command. Read more
    9. Save and test your project files with Frest's latest updates.

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

How can I integrate this Frest with back-end framework?

For the time being, we do NOT offer any tutorials or any other materials on how to integrate Frest with any CMS, Web Application Frameworks or any other similar technology. However, since Frest is a static HTML/CSS and JS template, then it should be compatible with any backend technology and frameworks.

In the future we may provide different version of this template with front-end and back-end framework integration.

Why the maps are not loading on the fleet page?

Fleet page is using Mapbox to display maps. The maps on the fleet page may not load on your localhost or domain because you need to add your own access token for Mapbox.

How do I get my access token for Mapbox?

You need to create an account in Mapbox.

After signing into your account You can find a public access token on your account dashboard.

There is also an option for creating a private access token which can be only accessed from permitted URL's, For such You will find create new token button on Mapbox account dashboard which will create a private access token in which You can permit URL's as per your requirement.

Update generated access token in app-logistics-fleet.js

mapboxgl.accessToken = //!YOUR_MAPBOX_ACCESS_TOKEN_HERE!//
© 2017- Pixinvent, Hand-crafted & Made with ❤️