We are pleased that you have chosen CHITCHAT theme for your site and we will not disappoint you with your choice. Chitchat is an excellent theme develop with a concise approach. The code written is a clean and well structured.
Chitchat is the most powerful & responsive theme with all the modules and functions involved with an attractive design.
Chitchat theme template is build focusing on HTML CSS3 SCSS & PUG works perfectly fine in all the browsers and it is powered by jQuery.
Chitchat theme include 3 in 1 (chat app, landing-page & email template), 17 inner pages
We request to have a look at our Chitchat manual to know brief about the theme! We have compromised each and every detail for you in the manual that you will need.
If we are unable to answer your queries beyond our documentation, you are free to contact us through the themeforest support page with your site. We will be happy to cater you and will get back to you in no time.
Read the manual before jumping to start!
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"
If you want RTl theme,just add RTL class to body tag.
If you want DARK theme,just add dark class to body tag.
Chitchat include 6 color option, You need to change style css.
<link rel="stylesheet" type="text/css" href="../assets/css/style1.css"
>
<link rel="stylesheet" type="text/css" href="../assets/css/style2.css"
>
<link rel="stylesheet" type="text/css" href="../assets/css/style3.css"
>
<link rel="stylesheet" type="text/css" href="../assets/css/style4.css"
>
<link rel="stylesheet" type="text/css" href="../assets/css/style5.css"
>
<link rel="stylesheet" type="text/css" href="../assets/css/style6.css"
>
... as on
If you want to use another color, change $theme-deafult variable in style scss
$Primary color: #1c9dea;
<!--Google font-->
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,500,600,700,800&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Roboto:400,500,600&display=swap"rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Rubik:300,300i,400,400i,500,500i,700,700i,900,900i&display=swap"rel="stylesheet">
<!-- Brand Logo -->
<div class="brand-logo">
<a href="messenger.html"> <img src="../assets/images/icon/icon.png" class="img-fluid" alt=""></a>
</div>
<!-- footer logo -->
<div class="footer-logo">
<img src="../assets/images/icon/icon.png" alt="">
</div>
...
<!--Chitchat-left-sidebar-->
<ul id="sub-menu" class="sm pixelstrap sm-vertical ">
...
</ul>
<!--chat-content-->
<ul id="sub-menu" class="sm pixelstrap sm-vertical ">
...
</ul>
<!--Chitchat-right-sidebar-->
<ul id="sub-menu" class="sm pixelstrap sm-vertical ">
...
</ul>
Chitchat theme include 2 types of buttons
<a href="#" class="btn btn-solid">Login</a>
<a href="#" class="btn btn-outline">Logout</a>
<div class="footer-end">
<p><i class="fa fa-copyright" aria-hidden="true"></i> 2018-19 theme forest powered by pixelstrap</p>
</div>
if you do not want second image in page, remove Back div
<!--swipe Right-sidebar-->
<div class="front">
<a href="blog-page(no-sidebar).html"></a>
</div>