Welcome

First of all, Thank you so much for purchasing this item. You are really awesome! You are entitled to get free lifetime updates to this product and support from the - ThemeTags team directly.

Local Setup for HTML Template

There are two ways to change your style (CSS) for your template.

First of all, you can change your style from dist/asseta/css/"your css file".css and then upload the changed file to your live server.

The second way,  If you want to change your style through SCSS. In that case, you need to follow the below steps to prepare your local environment and run it on your local. After your changes, you need to build and then upload the dist folder file to your live server.

Installation

We need a couple of applications to run the SCSS to our local:

Node.js:

It is used to run the build processes. Download from the NodeJs from the official site and install it on your device according to your Operating System (nodejs.org)

Check NodeJs Version:

• Open the Terminal
• Run: node -v or node --version
• If you get the version then the installation of NodeJs is done

Configurations

All processes (Configuration, run, and build) are the same for kohost.

NPM Packages:

• After downloading the template, unzip it
• Open the Terminal
• Go to the folder (kohost): (cd path/to/template)
• Run: npm install
• Make sure that there is no error.

package.json: Make sure that you have package.json file and check that you have the below lines under the scripts.

How to Run?

• After installing all node packages, need to run  gulp dev or npm start to start the project.
• Your site is now viewable at this URL: http://localhost:3000

How to Build for Production?

• To prepare the dist/ production version, run gulp build or npm run build 
• This will change all CSS files and app.js file in the dist folder and regenerate all of your compiled files.
• N.B: Never make updates directly the CSS and JS files into the dist folder as these files get overridden each time.

How to make HTML template live?

First of all, you can change your style from dist/asseta/css/main.css then upload the changed file to your live server.

The second way, If you want to change your style through SCSS. In that case, you need to follow the below steps to prepare your local environment and run it on your local. You can also minify the CSS and JS. After your changes, you need to upload your changes assets (CSS or JS) to your live server.

Steps to make live:

• Download your item from Envato and unzip it.
• Add all files and folders under the kohost/dist folder to your hosting webroot.
• Unzip your uploaded file if it is a zip version and browse from your domain: yourdomain.com
• To install the WHMCS template, Please check the WHMCS documentation.

Folder Structure

After unzipping the downloaded file from Envato, you will get 4 folders - 

1. HTML template - folder name: kohost
2. RTL version of HTML template - folder name: kohost-rtl
3. WHMCS templates - folder name: whmcs
4. and Documentation

Kohost HTML template folder structure:

• dist/ - compiled distribution files or production files
• node_modules - Node dependencies libraries
• src/ - contains all of your core, working files—scss and js files.
• src/assets/ - scss files, JS files is here
• gulpfile.js - all tasks definitions
• package.json - The npm dependencies

Template Customization

This is the section that you can find how to customize any section. Before that, you need to know about HTML structure and standard. Please check below:

HTML Structure

Here is the HTML Structure of the template. Please check each section of the code. You will gain an idea from here. For more details, please check the HTML file.

Head of the Template

How to change page title?

In this head section, you can find the title tag. Just replace the text in title tag. Here is the code block:

How to change Favicon?

In the Head, check the below code and change the favicon path from href:

Header Section

In this header part, you will find the main menu and the topbar menu. Check the sample at the below:

How to change Logo?

You can find the logo under the nav tag in header menu container. Change the logo path for the Transparent header.

How to change images?

To change the background image, you need to give the image url and also need to add class .bg-image and image-overlay="8" for the overlay opacity. Gradient color.background-image-wraper need to add on your background image in div.

VPS slider configuration

In HTML: 

Check the below values: data-slider-max="12". Maximum slide value will be 12 data-slider-step="1". If we scroll then it will increase only 1 per step data-slider-value="6". Default value is 6 for the demo data-currency="$". Currency sign is $

Change the value according to your plan but you need to change according to your need in JS file as well.

In JS (assets/js/app.js):

We have added our plans in the vpsPriceInfo . Default core value is 6 that we set in the HTML. We have added details like CPU core, memory, storage, bandwidth, price and order link in a plan. We have total 12 plans. Based on the vpsCore value, we change the other values. Check the rest of the code if you need to change:

Coming soon page

Go to the file app.js. Open it and find bellow code to change. You just need to change the date:

function countDown() {
    var countDay     = $(".counter-days");
    var countHour    = $(".counter-hours");
    var countMinutes = $(".counter-minutes");
    var countSeconds = $(".counter-seconds");

    var date         = new Date("Jan 1, 2023 12:00:00");

    .....
}
countDown();

Footer Section

We have two type of footer footer 1 we have used with newsletter section and footer 2 without newsletter section.

For Without Newsletter section use this-

How to change different theme

We have included 3 different CSS files in your dist>assets>css folder. So if you want to use theme-1 then you need to change the css file from your head section. So if you replace -

<link href="assets/css/main.css" as="style" rel="stylesheet" />

 with this 

<link href="assets/css/theme-1.css" as="style" rel="stylesheet" />

Then your template gets a theme-1 color. 

Forms

We have used 1 types contact us form. This forms are done by the Ajax call and used PHP as a Back-end language. Here is the Javascript code and PHP code.

Contact Us Form

Go to the app.js file and check the following code:

Go to the PHP file: libs/contact-form-process.php

Change the email address "hellothemetags@gmail.com" with your email address.

Change Success or Error message:

Please make sure that you have given permission to send an email from your server.

Customize with SCSS

We have used the SCSS for style with Inverted Triangle CSS (ITCSS) architecture and all tasks are executing by Gulp. If you do not have any idea or want to learn about SCSS then you can take a look from here: sass-lang.com

SCSS Folder Structure

So, we have the main.scss and it is containing all styles. According to scss 7-1 pattern architecture, we have used the following folder:

1. abstract: included mixin, function, and variable file
2. base: typography, helper, and base scss
3. components: all components scss like an accordion, button, etc...
4. layout: header, footer, preloader scss
5. pages: all pages and section scss
6. themes: theme scss like rtl scss
7. vendors: all vendors css file

If you want to know about SCSS 7-1 Pattern then you will find information or a tutorial. We have added one site that you may check: https://www.learnhowtoprogram.com/user-interfaces/building-layouts-preprocessors/7-1-sass-architecture

How to run SCSS?

If you want to change the SCSS file then you have to change the following command:

We run gulp dev during the development time.

If you are done with your changes then you need to run the following command:

If we run gulp build, it will generate the CSS file, CSS minified file and JS minified file.

How to change theme color in scss

We have used 3 colors for our kohost template. Primary, Accent, & Tertiary color

$primary:               #0948b3 !default;
$accent:                #014cda !default;
$tertiary:              #f67a3c !default;

So, If you check src>assets>scss>abstract>_variables.scss file then you can see this theme color variable.
If you change that color variable then your theme or template color will be changed.

We have already inluded 3 theme variablescolor variable please check _theme-1.scss to _theme-3.scss file.

Helpful Section

Bootstrap Utility Classes

We don't override Bootstrap class, so you can use bootstrap elements class. we have just created custom classes for this template.

Color

.color-primary .color-secondary

Background and gradient overlay color

.gray-light-bg, .primary-bg, .secondary-bg, .gradient-overlay

Other classes

.ptb-100, .pt-100, .pb-100, .pt-165 .mt--165 ... etc

btn classes

.outline-btn, .secondary-solid-btn, .primary-solid-btn, .solid-white-btn, .outline-white-btn, .secondary-outline-btn

For more information, please check Boostrap's official site: https://getbootstrap.com/docs/4.4/layout/utilities-for-layout/

Chrome Developer Tools Tutorial

Tutorial - https://www.youtube.com/watch?v=x4q86IjJFag

Credits

Images and Videos

We would really love to take this opportunity to appreciate guys whose items were helpful to us to make Kohost a really beautiful template for our awesome users:

• Unsplash
• Pexels
• Pixabay
• unDraw
• isometric
• YouTube
• Freepik

JS Libraries

We would really love to take this opportunity to appreciate guys whose items were helpful to us to make Kohost a really beautiful template for our awesome users:

• jQuery
• jQuery Easing
• Popper Js
• Owl Carousel
• Magnific Popup

CSS and Fonts

We would really love to take this opportunity to appreciate guys whose items were helpful to us to make Kohost  a really beautiful template for our awesome users:

• Bootstrap
• Themify Icons (Font Icons)
• Google Fonts

Customer Support

If you have any trouble while editing this template or if you simply want to ask a question about something, feel free to contact us at hellothemetags@gmail.com or to post your request on Themeforest support form.

Support includes

• The item support period
• Answering questions about how to use the item
• Answering technical questions about the item (and included third party assets)
• Help with defects in the item or included third party assets
• Item updates to ensure ongoing compatibility and to resolve security vulnerabilities

Support doesn't include

• Item customization
• Installation of the item
• Hosting, server environment, or software
• Help from authors of included third party assets

Support is taken very seriously, so every template is completely covered according to ThemeForest’s policies.

Customer Refund Policy

Eligible to get the refund

• Item is "not as described" or the item doesn’t work the way it should.
• Item has a security vulnerability
• Item support is promised but not provided
• Item support extension not used
• Items that have not been downloaded

Not eligible to get the refund

• You don't want it after you've downloaded it
• The item did not meet your expectations or you feel the item is of low quality
• You simply change your mind
• You bought an item by mistake
• You do not have sufficient expertise to use the item
• You claim that you are entitled to a refund but do not provide sufficient information as to why you are entitled to a refund
• You can no longer access the item because it has been removed or the author who previously provided the item is no longer active on our platform (we advise you to download items as soon as you have purchased them to avoid this situation).

Support is taken very seriously, so every template is completely covered according to ThemeForest’s policies.