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.
Sneat admin template allows user to include custom font. To use google font, please follow below steps :
https://fonts.google.com/specimen/Open+Sans
<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=Open+Sans:ital,wght@0,400;0,500;0,600;1,400;1,500;1,600&display=swap" rel="stylesheet">
Now, to apply included fonts to the template,
If you are familiar with SCSS (Recommended method),
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)
--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). --bs-font-sans-serif: 'Open Sans'
.
assets/vendors/css/rtl
folder.
assets/
folder to avoid
future update conflicts. If you still modify the file, it may require to merge it manually with
future updates.
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 :
package.json
file to install using npm / yarn"dependencies": {
...
"boxicons": "~2.0.9",
...
}
yarn install
or npm install
to install fonts inside template's node-modules
boxicons.scss
file inside src/fonts/
folder.node-modules
to boxicons.scss
file.$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');
}
src/tasks/build.js
file.// Build fonts
// -------------------------------------------------------------------------------
const FONT_TASKS = [
{
name: 'boxicons',
path: 'node_modules/boxicons/fonts/*'
},
...
]
<link rel="stylesheet" href="ASSETS_PATH/vendor/fonts/boxicons.css" />
yarn build
OR
yarn build:fonts
yarn build:css
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
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.
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
:
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
$menu-collapsed-layout-breakpoint: lg !default;
LAYOUT_BREAKPOINT
value in the js/helpers.js
file to correspond with the CSS variable breakpoint: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.
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
navbar-expand-xl
to navbar-expand-lg
in <nav>
tag.layout-menu-toggle
breakpoints from *-xl-*
to *-lg-*
Horizontal Layout
navbar-brand app-brand demo d-none d-xl-flex
to navbar-brand app-brand demo d-none d-lg-flex
xl
to lg
, update related classes accordingly.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!!
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 |
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">
Sneat 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:
htdocs/
folder of your Local Server. After that, you can access the template using http://localhost/Sneat/
URL.
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
npm run build (optional)
npm run serve
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.
You might get some warnings while running yarn install/npm install
like below:
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.
Causes of npm install
or yarn install
issue can be due to various things which include:
To resolve such installation issue:
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:
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:
scss/
, js/
, libs/
and fonts/
folders. Your custom files like, style.scss
or script.js
should not affect by using replace with merge.yarn install
or npm install
task to update 3rd party plugins with their latest versions.npm run build
command. Read moreIf something goes wrong, you can revert your updates by using backup files.
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.
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!//