FAQs 🤨

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


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

Also, you can update/replace brand name Sneat 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">Sneat</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)?

Sneat 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/Open+Sans
  • After adding styles, you will get link to use on the web, like :
  • <link href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;0,500;0,600;1,400;1,500;1,600" 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:
  • // * 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 the style attribute by replacing the old font-family with a new one in assets/css folder. For example, old font-family to font-family: 'Open Sans';
How to use custom font-icons?

Sneat 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 Sneat 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 Sneat 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 Sneat, or move your project on top of it to have the best experience.

How to update search result?

Sneat 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">
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 Sneat?

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

There are two different ways to updating Sneat:

  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 Sneat 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
      • Sneat Package you started your project with (Older version of Sneat package which you used)
    2. Review Sneat changelog to have a quick preview on what has been updated.
    3. Download Sneat 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 Sneat's latest updates.

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

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

For the time being, we do NOT offer any tutorials or any other materials on how to integrate Sneat with any CMS, Web Application Frameworks or any other similar technology. However, since Sneat 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.

© 2017- ThemeSelection, Hand-crafted & Made with ❤️