When you unpack downloaded archive from ThemeForest.net you'll get folder containing 2 folders.
First, you must download and install node.js. NPM stands for node packaged modules and is a way to manage development dependencies through Node.js.
Download the Node.js source code or a pre-built installer for your platform, and start developing, you can download it from nodejs.org
You can check it in your terminal window using these commands node --version and
npm --version.
GulpJS is a toolkit for automating painful or time-consuming tasks in your development workflow, so you can stop messing around and build something.
Navigate to the root main/directory,default
Then use $ npm i command (install node js)
$ gulp command (for run project)
NPM use the package.json file and automatically install the required local dependencies listed in it.
dependencies are : gulp, browser-sync, gulp-autoprefixer, gulp-livereload, gulp-pug, gulp-sass, livereload
We have added all necessary gulp task in gulpfile.js, for more details about plugin refer this link https://gulpjs.com/plugins/
Go to Gulpfile.js
proxy: "localhost/Your project name"
In Voxo theme, google fonts have been used. google fonts are open source and easy to use. Voxo have used following fonts:
you can use different google fonts. following are the steps
In Voxo theme, we have used 6 colors or 6 styles. following are the colors:
from above you need to choose any color and set that css to your html pages in your head(see below) and delete or remove othere files.
<!-- Theme css -->
<link id="change-link" rel="stylesheet" type="text/css" href=../assets/css/demo2.css">
every style has different dark style which you need to change so for example you are using style.css, has dark.css with it, if you are using demo1.css it has demo1_dark.css so remove other style/dark.css.
Voxo have mainly used FontAwesome Icons. FontAwesome icons available in FontAwesome.com/icons, other icons are available
in assets/images/icon
how to use FontAwesome font
for example:
<i class="fas
fa-camera"></i>
<!-- this icon's 1) style prefix == fas and 2) icon name == camera
-->
<i class="fas
fa-camera"></i>
<!-- using an <i> element to reference the icon -->
<span class="fas
fa-camera"></span>
<!-- using a <span> element to reference the icon
-->
how to use Feather Icon
for example:
<i data-feather="circle"></i>
how to use Theme Icon
If you want RTl theme, changes are below:
<!-- Add direction rtl in html tag -->
<html lang="en" dir="rtl"
<link id="rtl-link" rel="stylesheet" type="text/css" href="assets/css/vendors/bootstrap.rtl.css">
If you want Dark theme, changes are below:
<!-- Replace style.css with demo1_dark.css -->
<link id="change-link" rel="stylesheet" type="text/css" href="../assets/css/demo1_dark.css">
<!-- add class dark in html tag -->
<body class="dark">
If you use image as background than add class ".bg-img" in image and add below class in parent.
RTL button is for demo purpose only, following is the steps to remove that buttons:
without this plugins and products, our theme will be incomplete.