Template - kohost

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

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

First of all, you can change your style from build/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.

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

 $ node --version
 $ v10.15.3

Check NPM Version:

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

 $ npm --version
 $ 6.14.2

Gulp Install from Terminal: Gulp is a task runner. To install it, follow the below steps:

Open the Terminal
Run: npm install -g gulp
For more information, check: https://gulpjs.com/docs/en/getting-started/quick-start/

Check Gulp Version:

Open the Terminal
Run: gulp -v or gulp --version
If you get the version then the installation of Gulp is done

 $ gulp --version
 $ CLI version: 2.2.0
 $ Local version: Unknown

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.

...
"scripts": {
  "start": "gulp dev",
  "build": "gulp build",
  "lints": "gulp linters"
},
...

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 build/ production version, run gulp build or npm run build
This will change all CSS files and app.js file in the build folder and regenerate all of your compiled files.
N.B: Never make updates directly the CSS and JS files into the build folder as these files get overridden each time.

How to make live?

For your information, there are two ways to change your style (CSS) for your template.

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

Steps to make live:

Download your item from Envato and unzip it.
Add all files and folders under the kohost/build 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, check the WHMCS installation part below.

Folder Structure

build/ - 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.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <!--favicon icon-->
    <link rel="icon" href="assets/img/favicon.png" type="image/png" sizes="16x16">

    <!--title-->
    <title>Kohost - Modern Web Hosting & WHMCS Template</title>

    <!--build:css-->
    <link rel="stylesheet" href="assets/css/main.css">
    <!-- endbuild -->
</head>

<body>
<!--header section start-->
<header id="header" class="header-main">
    <!--main header menu start-->
    <div id="logoAndNav" class="main-header-menu-wrap bg-transparent fixed-top">
        <div class="container">
            <nav class="js-mega-menu navbar navbar-expand-md header-nav">
            </nav>
        </div>
    </div>
    <!--main header menu end-->
</header>
<!--header section end-->

<div class="main">

    <!--hero section start-->
    <section class="ptb-100 overflow-hidden primary-bg">
        <div class="container">

        </div>
        <!--end of container-->
    </section>
    <!--hero section end-->

    <!--domain search promo start-->
    <section>
        <div class="container">

        </div>
    </section>
    <!--domain search promo end-->

    <!--promo section start-->
    <section class="promo-section ptb-100">
        <div class="container">

        </div>
    </section>
    <!--promo section end-->
    ----

</div>

<!--footer section start-->
<footer class="footer-1 ptb-60 gradient-bg">
    <div class="container">

    </div>
    <!--end of container-->
</footer>

<!--footer bottom copyright start-->
<div class="footer-bottom py-3 gray-light-bg">
    <div class="container">

    </div>
</div>
<!--footer bottom copyright end-->
<!--footer section end-->
<!--scroll bottom to top button start-->
<div class="scroll-top scroll-to-target primary-bg text-white" data-target="html">
    <span class="fas fa-hand-point-up"></span>
</div>
<!--scroll bottom to top button end-->
<!--build:js-->
<script src="assets/js/vendors/jquery-3.5.1.min.js"></script>
<script src="assets/js/vendors/popper.min.js"></script>
<script src="assets/js/vendors/bootstrap.min.js"></script>
<script src="assets/js/vendors/bootstrap-slider.min.js"></script>
<script src="assets/js/vendors/jquery.easing.min.js"></script>
<script src="assets/js/vendors/owl.carousel.min.js"></script>
<script src="assets/js/vendors/countdown.min.js"></script>
<script src="assets/js/vendors/jquery.waypoints.min.js"></script>
<script src="assets/js/vendors/jquery.rcounterup.js"></script>
<script src="assets/js/vendors/magnific-popup.min.js"></script>
<script src="assets/js/vendors/validator.min.js"></script>
<script src="assets/js/vendors/hs.megamenu.js"></script>
<script src="assets/js/app.js"></script>
<!--endbuild-->
</body>

</html>

Head of the Template

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <!--favicon icon-->
    <link rel="icon" href="assets/img/favicon.png" type="image/png" sizes="16x16">

    <!--title-->
    <title>Kohost - Modern Web Hosting & WHMCS Template</title>

    <!--build:css-->
    <link rel="stylesheet" href="assets/css/main.css">
    <!-- endbuild -->
</head>

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:

<!--title-->
<title>Kohost - Modern Web Hosting & WHMCS Template</title>

How to change Favicon?

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

<!--favicon icon-->

Header Section

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

<!--header section start-->
<header id="header" class="header-main">
    <!--main header menu start-->
    <div id="logoAndNav" class="main-header-menu-wrap bg-transparent fixed-top">
        <div class="container">
            <nav class="js-mega-menu navbar navbar-expand-md header-nav">

                <!--logo start-->
                <a class="navbar-brand" href="index.html"><img src="assets/img/logo-white.png" width="120" alt="logo"
                                                               class="img-fluid"/></a>
                <!--logo end-->

                <!--responsive toggle button start-->
                <button type="button" class="navbar-toggler btn"
                        aria-expanded="false"
                        aria-controls="navBar"
                        data-toggle="collapse"
                        data-target="#navBar">
                        <span id="hamburgerTrigger">
                          <span class="ti-menu"></span>
                        </span>
                </button>
                <!--responsive toggle button end-->

                <!--main menu start-->
                <div id="navBar" class="collapse navbar-collapse">
                    <ul class="navbar-nav ml-auto main-navbar-nav">
                        <!--home start-->
                        <li class="nav-item hs-has-mega-menu custom-nav-item" data-position="center">
                            <a id="homeMegaMenu" class="nav-link custom-nav-link main-link-toggle"
                               href="javascript:void(0);" aria-haspopup="true" aria-expanded="false">Home</a>

                            <!--home mega menu start-->
                            <div class="hs-mega-menu main-sub-menu w-100" aria-labelledby="homeMegaMenu">
                                ...
                            </div>
                            <!--home mega menu end-->
                        </li>
                        <!--home end-->

                        <!--pages start-->
                        <li class="nav-item hs-has-sub-menu custom-nav-item">
                            <a id="pagesMegaMenu" class="nav-link custom-nav-link main-link-toggle"
                               href="javascript:void(0);" aria-haspopup="true" aria-expanded="false"
                               aria-labelledby="pagesSubMenu">Pages</a>

                            <!-- Pages - Submenu -->
                            <ul id="pagesSubMenu" class="hs-sub-menu main-sub-menu" aria-labelledby="pagesMegaMenu"
                                style="min-width: 230px;">
                                <li class="nav-item submenu-item">
                                    <a class="nav-link sub-menu-nav-link" href="about-us.html">About Us</a>
                                </li>
                                ...
                            </ul>
                            <!-- End Pages - Submenu -->
                        </li>
                        <!--pages end-->


                        <!--hosting start-->
                        <li class="nav-item hs-has-mega-menu custom-nav-item position-relative"
                            data-position="center">
                            <a id="hostingMegaMenu" class="nav-link custom-nav-link main-link-toggle"
                               href="JavaScript:Void(0);" aria-haspopup="true" aria-expanded="false">Hosting</a>

                            <!-- Demos - Mega Menu -->
                            <div class="hs-mega-menu main-sub-menu" style="width: 715px" aria-labelledby="hostingMegaMenu">
                                
                                <!-- Mega Menu Banner -->
                                <div class="u-header__product-banner bg-image" image-overlay="7">
                                    <div class="background-image-wraper custom-radius-bottom" style="background: url('assets/img/hero-bg-4.jpg')no-repeat center center / cover; opacity: 1;"></div>
                                    
                                </div>
                                <!-- End Mega Menu Banner -->
                            </div>
                            <!-- End Demos - Mega Menu -->
                        </li>
                        <!--hosting end-->

                        <!--domain start-->
                        <li class="nav-item hs-has-mega-menu custom-nav-item position-relative"
                            data-position="center">
                            <a id="domainMegaMenu" class="nav-link custom-nav-link main-link-toggle"
                               href="JavaScript:Void(0);" aria-haspopup="true" aria-expanded="false">Domain</a>
                            <!-- Demos - Mega Menu -->
                            <div class="hs-mega-menu main-sub-menu" style="width: 660px" aria-labelledby="domainMegaMenu">
                                
                            </div>
                            <!-- End Demos - Mega Menu -->
                        </li>
                        <!--domain end-->

                        <li class="nav-item hs-has-sub-menu custom-nav-item">
                            <a class="nav-link custom-nav-link"
                               href="affiliates.html">Affiliates</a>
                        </li>

                        <!--about start-->
                        <li class="nav-item hs-has-mega-menu custom-nav-item position-relative"
                            data-position="center">
                            <a id="aboutMegaMenu" class="nav-link custom-nav-link main-link-toggle"
                               href="JavaScript:Void(0);" aria-haspopup="true" aria-expanded="false">Company</a>

                            <!--about submenu start-->
                            <div class="hs-mega-menu main-sub-menu" style="width: 320px" aria-labelledby="aboutMegaMenu">
                                <!--menu title with subtitle and icon item start-->
                                <div class="title-with-icon-item">
                                    <a class="title-with-icon-link" href="contact-us.html">
                                        <div class="media align-items-center">
                                            <img class="menu-titile-icon" src="assets/img/chat-mobile.svg" alt="SVG">
                                            <div class="media-body">
                                                <span class="u-header__promo-title">Contact Us</span>
                                                <small class="u-header__promo-text">Face any problem contact with us
                                                </small>
                                            </div>
                                        </div>
                                    </a>
                                </div>
                                <!--menu title with subtitle and icon item end-->
                                ...
                            </div>
                            <!--about submenu end-->
                        </li>
                        <!--about end-->

                        <!--button start-->
                        <li class="nav-item header-nav-last-item d-flex align-items-center">
                            <a class="btn btn-brand-03 animated-btn" href="#" target="_blank">
                                <span class="fa fa-user pr-2"></span> Client Area
                            </a>
                        </li>
                        <!--button end-->
                    </ul>
                </div>
                <!--main menu end-->
            </nav>
        </div>
    </div>
    <!--main header menu end-->
</header>
<!--header section end-->

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.

<!--logo start-->
<a class="navbar-brand" href="index.html">
    <img src="assets/img/logo-white.png" width="120" alt="logo" class="img-fluid"/>
</a>
<!--logo end-->

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.

<section class="ptb-100 bg-image overflow-hidden" image-overlay="10">
    <div class="hero-bottom-shape-two" style="background: url('assets/img/hero-bottom-shape-2.svg')no-repeat bottom center"></div>
</section>

VPS slider configuration

To configure the VPS plan, you need to change in HTML and assets/js/app.js file.

In HTML:

<input id="c-plan" type="text" data-slider-min="1" data-slider-max="12" data-slider-step="1" data-slider-value="6" data-currency="$" data-unit="GB">

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 $

data-unit="GB". Data unit will be GB

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):

// 14. custom vps hosting plan js
//**************************** Need to change ********************
// Change according to your plans
//****************************************************************
// vpsCore      = VPS Core value from your plan
// vpsMemory    = VPS Memory from your plan
// vpsStorage   = VPS Storage value from your plan
// vpsBandwidth = VPS bandwidth value from your plan
// vpsPrice     = VPS price from your plan
// vpsWHmcsUrl  = VPS plan url. Check from your WHMCS panel
//****************************************************************
var vpsPriceInfo = [
    {"vpsCore" : 1,  "vpsMemory" : 2,  "vpsStorage" : 10,  "vpsBandwidth" : 1000,  "vpsPrice" : 20,  "vpsWHmcsUrl" : "https://themetags.net/whmcs/cart.php?a=add&pid=12"},
    {"vpsCore" : 2,  "vpsMemory" : 4,  "vpsStorage" : 20,  "vpsBandwidth" : 2000,  "vpsPrice" : 40,  "vpsWHmcsUrl" : "https://themetags.net/whmcs/cart.php?a=add&pid=13"},
    {"vpsCore" : 3,  "vpsMemory" : 6,  "vpsStorage" : 30,  "vpsBandwidth" : 3000,  "vpsPrice" : 60,  "vpsWHmcsUrl" : "https://themetags.net/whmcs/cart.php?a=add&pid=14"},
    {"vpsCore" : 4,  "vpsMemory" : 8,  "vpsStorage" : 40,  "vpsBandwidth" : 4000,  "vpsPrice" : 80,  "vpsWHmcsUrl" : "https://themetags.net/whmcs/cart.php?a=add&pid=13"},
    {"vpsCore" : 5,  "vpsMemory" : 10, "vpsStorage" : 50,  "vpsBandwidth" : 5000,  "vpsPrice" : 100, "vpsWHmcsUrl" : "https://themetags.net/whmcs/cart.php?a=add&pid=12"},
    {"vpsCore" : 6,  "vpsMemory" : 12, "vpsStorage" : 60,  "vpsBandwidth" : 6000,  "vpsPrice" : 120, "vpsWHmcsUrl" : "https://themetags.net/whmcs/cart.php?a=add&pid=13"},
    {"vpsCore" : 7,  "vpsMemory" : 14, "vpsStorage" : 70,  "vpsBandwidth" : 7000,  "vpsPrice" : 140, "vpsWHmcsUrl" : "https://themetags.net/whmcs/cart.php?a=add&pid=14"},
    {"vpsCore" : 8,  "vpsMemory" : 16, "vpsStorage" : 80,  "vpsBandwidth" : 8000,  "vpsPrice" : 160, "vpsWHmcsUrl" : "https://themetags.net/whmcs/cart.php?a=add&pid=12"},
    {"vpsCore" : 9,  "vpsMemory" : 18, "vpsStorage" : 90,  "vpsBandwidth" : 9000,  "vpsPrice" : 180, "vpsWHmcsUrl" : "https://themetags.net/whmcs/cart.php?a=add&pid=13"},
    {"vpsCore" : 10, "vpsMemory" : 20, "vpsStorage" : 100, "vpsBandwidth" : 10000, "vpsPrice" : 200, "vpsWHmcsUrl" : "https://themetags.net/whmcs/cart.php?a=add&pid=14"},
    {"vpsCore" : 11, "vpsMemory" : 22, "vpsStorage" : 110, "vpsBandwidth" : 11000, "vpsPrice" : 220, "vpsWHmcsUrl" : "https://themetags.net/whmcs/cart.php?a=add&pid=12"},
    {"vpsCore" : 12, "vpsMemory" : 24, "vpsStorage" : 120, "vpsBandwidth" : 12000, "vpsPrice" : 240, "vpsWHmcsUrl" : "https://themetags.net/whmcs/cart.php?a=add&pid=13"},
];

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:

var cPlan = $('#c-plan');
if (cPlan.length) {
    cPlan.slider({
        tooltip: 'always'
    });
    cPlan.on("slide", function (e) {
        $.each( vpsPriceInfo, function( index, vpsObj ) {
            if(vpsObj.vpsCore == e.value) {
                setVpsValue(vpsObj);
            }
        });
    });
    initSlider();
}

function initSlider() {
    cPlan.value = cPlan.data("slider-value");
    var defaultVpsCore = parseInt(cPlan.value);
    $.each( vpsPriceInfo, function( index, vpsObj ) {
        // defaultVpsCore is default valeu to show. For my demo, I have set 6 from HTML.
        // vps-hosting.html: <input id="c-plan" type="text" data-slider-min="1" data-slider-max="12" data-slider-step="1" data-slider-value="6" data-currency="$" data-unit="GB">. 
        // You need to change accourting to your need.
        if(vpsObj.vpsCore == defaultVpsCore) {
            $('.slider .tooltip', '#custom-plan').append('<div class="tooltip-up"></div>');
            $('.slider .tooltip-inner', '#custom-plan').attr("data-unit", cPlan.data("unit"));
            $('.slider .tooltip-up', '#custom-plan').attr("data-currency", cPlan.data("currency"));

            setVpsValue(vpsObj);
        }
    });
}

function setVpsValue(vpsObj) {
    $('.slider .tooltip-up', '#custom-plan').text(vpsObj.vpsCore);

    $('.vpsPrice', '#custom-plan').text(cPlan.data("currency") + vpsObj.vpsPrice);
    $('.vpsCore span', '#custom-plan').text(vpsObj.vpsCore);
    $('.vpsMemory span', '#custom-plan').text(vpsObj.vpsMemory);
    $('.vpsStorage span', '#custom-plan').text(vpsObj.vpsStorage);
    $('.vpsBandwidth span', '#custom-plan').text(vpsObj.vpsBandwidth);
    $('.vpsWHmcsUrl', '#custom-plan').attr("href", vpsObj.vpsWHmcsUrl);
}

Coming soon page

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

// 12. coming soon count
  $('#clock').countdown('2025/01/30', function (event) {
    
  });

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

<!--footer section start-->
<!--when you want to remove subscribe newsletter container then you should remove .footer-with-newsletter class-->
<footer class="footer-1 gradient-bg ptb-60 footer-with-newsletter">
    <!--subscribe newsletter start-->
    <div class="container">
        <div class="row newsletter-wrap primary-bg rounded shadow-lg p-5">
            <div class="col-md-6 col-lg-7 mb-4 mb-md-0 mb-sm-4 mb-lg-0">
                <div class="newsletter-content text-white">
                    <h3 class="mb-0 text-white">Subscribe our Newsletter</h3>
                    <p class="mb-0">We’re a team of non-cynics who truly care for our work.</p>
                </div>
            </div>
            <div class="col-md-6 col-lg-5">
                <form class="newsletter-form position-relative">
                    <input type="text" class="input-newsletter form-control" placeholder="Enter your email" name="email" required="" autocomplete="off">
                    <button type="submit" class="disabled"><i class="fas fa-paper-plane"></i></button>
                </form>
            </div>
        </div>
    </div>
    <!--subscribe newsletter end-->

    <div class="container">
        <div class="row">
            <div class="col-md-12 col-lg-4 mb-4 mb-md-4 mb-sm-4 mb-lg-0">
                <a href="#" class="navbar-brand mb-2">
                    <img src="assets/img/logo-white.png" alt="logo" class="img-fluid">
                </a>
                <br>
                <p>Dynamically re-engineer high standards in functiona with alternative paradigms. Conveniently monetize resource maximizing initiatives.</p>
                <div class="list-inline social-list-default background-color social-hover-2 mt-2">
                    <li class="list-inline-item"><a class="twitter" href="#"><i class="fab fa-twitter"></i></a></li>
                    <li class="list-inline-item"><a class="youtube" href="#"><i class="fab fa-youtube"></i></a></li>
                    <li class="list-inline-item"><a class="linkedin" href="#"><i class="fab fa-linkedin-in"></i></a></li>
                    <li class="list-inline-item"><a class="dribbble" href="#"><i class="fab fa-dribbble"></i></a></li>
                </div>
            </div>
            <div class="col-md-12 col-lg-8">
                <div class="row mt-0">
                    <div class="col-sm-6 col-md-3 col-lg-3 mb-4 mb-sm-4 mb-md-0 mb-lg-0">
                        <h6 class="text-uppercase">Resources</h6>
                        <ul>
                            <li>
                                <a href="#">Help</a>
                            </li>
                            <li>
                                <a href="#">Events</a>
                            </li>
                            <li>
                                <a href="#">Live sessions</a>
                            </li>
                            <li>
                                <a href="#">Open source</a>
                            </li>
                            <li>
                                <a href="#">Documentation</a>
                            </li>
                        </ul>
                    </div>
                    <div class="col-sm-6 col-md-3 col-lg-3 mb-4 mb-sm-4 mb-md-0 mb-lg-0">
                        <h6 class="text-uppercase">Products</h6>
                        <ul>
                            <li>
                                <a href="#">Pricing</a>
                            </li>
                            <li>
                                <a href="#">Navigation</a>
                            </li>
                            <li>
                                <a href="#">AI Studio</a>
                            </li>
                            <li>
                                <a href="#">Page Speed </a>
                            </li>
                            <li>
                                <a href="#">Performance</a>
                            </li>
                        </ul>
                    </div>
                    <div class="col-sm-6 col-md-3 col-lg-3 mb-4 mb-sm-4 mb-md-0 mb-lg-0">
                        <h6 class="text-uppercase">Company</h6>
                        <ul>
                            <li>
                                <a href="#">About Us</a>
                            </li>
                            <li>
                                <a href="#">Careers</a>
                            </li>
                            <li>
                                <a href="#">Customers</a>
                            </li>
                            <li>
                                <a href="#">Community</a>
                            </li>
                            <li>
                                <a href="#">Our Team</a>
                            </li>
                        </ul>
                    </div>
                    <div class="col-sm-6 col-md-3 col-lg-3">
                        <h6 class="text-uppercase">Support</h6>
                        <ul>
                            <li>
                                <a href="#">FAQ</a>
                            </li>
                            <li>
                                <a href="#">Sells</a>
                            </li>
                            <li>
                                <a href="#">Contact Support</a>
                            </li>
                            <li>
                                <a href="#">Network Status</a>
                            </li>
                            <li>
                                <a href="#">Product Services</a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--end of container-->
</footer>
<!--footer bottom copyright start-->
<div class="footer-bottom py-3 gray-light-bg">
    <div class="container">
        <div class="row">
            <div class="col-md-6 col-lg-7">
                <div class="copyright-wrap small-text">
                    <p class="mb-0">&copy; ThemeTags Design Agency, All rights reserved</p>
                </div>
            </div>
            <div class="col-md-6 col-lg-5">
                <div class="terms-policy-wrap text-lg-right text-md-right text-left">
                    <ul class="list-inline">
                        <li class="list-inline-item"><a class="small-text" href="#">Terms</a></li>
                        <li class="list-inline-item"><a class="small-text" href="#">Security</a></li>
                        <li class="list-inline-item"><a class="small-text" href="#">Privacy Policy</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>
<!--footer bottom copyright end-->
<!--footer section end-->

For Without Newsletter section use this-

<!--footer section start-->
<!--when you want to remove subscribe newsletter container then you should remove .footer-with-newsletter class-->
<footer class="footer-1 gradient-bg ptb-60">
    <div class="container">
        <div class="row">
            <div class="col-md-12 col-lg-4 mb-4 mb-md-4 mb-sm-4 mb-lg-0">
                <a href="#" class="navbar-brand mb-2">
                    <img src="assets/img/logo-white.png" alt="logo" class="img-fluid">
                </a>
                <br>
                <p>Dynamically re-engineer high standards in functiona with alternative paradigms. Conveniently monetize resource maximizing initiatives.</p>
                <div class="list-inline social-list-default background-color social-hover-2 mt-2">
                    <li class="list-inline-item"><a class="twitter" href="#"><i class="fab fa-twitter"></i></a></li>
                    <li class="list-inline-item"><a class="youtube" href="#"><i class="fab fa-youtube"></i></a></li>
                    <li class="list-inline-item"><a class="linkedin" href="#"><i class="fab fa-linkedin-in"></i></a></li>
                    <li class="list-inline-item"><a class="dribbble" href="#"><i class="fab fa-dribbble"></i></a></li>
                </div>
            </div>
            <div class="col-md-12 col-lg-8">
                <div class="row mt-0">
                    <div class="col-sm-6 col-md-3 col-lg-3 mb-4 mb-sm-4 mb-md-0 mb-lg-0">
                        <h6 class="text-uppercase">Resources</h6>
                        <ul>
                            <li>
                                <a href="#">Help</a>
                            </li>
                            <li>
                                <a href="#">Events</a>
                            </li>
                            <li>
                                <a href="#">Live sessions</a>
                            </li>
                            <li>
                                <a href="#">Open source</a>
                            </li>
                            <li>
                                <a href="#">Documentation</a>
                            </li>
                        </ul>
                    </div>
                    <div class="col-sm-6 col-md-3 col-lg-3 mb-4 mb-sm-4 mb-md-0 mb-lg-0">
                        <h6 class="text-uppercase">Products</h6>
                        <ul>
                            <li>
                                <a href="#">Pricing</a>
                            </li>
                            <li>
                                <a href="#">Navigation</a>
                            </li>
                            <li>
                                <a href="#">AI Studio</a>
                            </li>
                            <li>
                                <a href="#">Page Speed </a>
                            </li>
                            <li>
                                <a href="#">Performance</a>
                            </li>
                        </ul>
                    </div>
                    <div class="col-sm-6 col-md-3 col-lg-3 mb-4 mb-sm-4 mb-md-0 mb-lg-0">
                        <h6 class="text-uppercase">Company</h6>
                        <ul>
                            <li>
                                <a href="#">About Us</a>
                            </li>
                            <li>
                                <a href="#">Careers</a>
                            </li>
                            <li>
                                <a href="#">Customers</a>
                            </li>
                            <li>
                                <a href="#">Community</a>
                            </li>
                            <li>
                                <a href="#">Our Team</a>
                            </li>
                        </ul>
                    </div>
                    <div class="col-sm-6 col-md-3 col-lg-3">
                        <h6 class="text-uppercase">Support</h6>
                        <ul>
                            <li>
                                <a href="#">FAQ</a>
                            </li>
                            <li>
                                <a href="#">Sells</a>
                            </li>
                            <li>
                                <a href="#">Contact Support</a>
                            </li>
                            <li>
                                <a href="#">Network Status</a>
                            </li>
                            <li>
                                <a href="#">Product Services</a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--end of container-->
</footer>
<!--footer bottom copyright start-->
<div class="footer-bottom py-3 gray-light-bg">
    <div class="container">
        <div class="row">
            <div class="col-md-6 col-lg-7">
                <div class="copyright-wrap small-text">
                    <p class="mb-0">&copy; ThemeTags Design Agency, All rights reserved</p>
                </div>
            </div>
            <div class="col-md-6 col-lg-5">
                <div class="terms-policy-wrap text-lg-right text-md-right text-left">
                    <ul class="list-inline">
                        <li class="list-inline-item"><a class="small-text" href="#">Terms</a></li>
                        <li class="list-inline-item"><a class="small-text" href="#">Security</a></li>
                        <li class="list-inline-item"><a class="small-text" href="#">Privacy Policy</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>
<!--footer bottom copyright end-->
<!--footer section end-->

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:

// 13. contact form
  if ($("#contactForm").length) {
    $("#contactForm").validator().on("submit", function (event) {
      if (event.isDefaultPrevented()) {
        // handle the invalid form...
        submitMSG(false, '#contact');
      } else {
        // everything looks good!
        event.preventDefault();
        submitContactForm();
      }
    });
  }

  function submitContactForm() {
    // Initiate Variables With Form Content
    var name = $('#contactForm input[name="name"]').val();
    var email = $('#contactForm input[name="email"]').val();
    var message = $('#contactForm textarea[name="message"]').val();

    if (name && email && message) {
      $.ajax({
        type: "POST",
        url: "libs/contact-form-process.php",
        data: "name=" + name + "&email=" + email + "&message=" + message,
        success: function success(text) {
          if (text == "success") {
            formSuccess();
          } else {
            submitMSG(false, '#contact');
          }
        }
      });
    } else {
      submitMSG(false, '#contact');
    }
  }

  function formSuccess() {
    $("#contactForm")[0].reset();
    submitMSG(true, '#contact');
  }

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

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

...
// change email with your email
$EmailTo = "hellothemetags@gmail.com";
$Subject = "Kohost:: New Message Received form contact";

// prepare email body text
$Body = "";
$Body .= "Name: ";
$Body .= $name;
$Body .= "\n";
$Body .= "Email: ";
$Body .= $email;
$Body .= "\n";
$Body .= "Message: ";
$Body .= $message;
echo $Body .= "\n";

// send email
$success = mail($EmailTo, $Subject, $Body, "From:".$email);
...

Change Success or Error message:

function submitMSG(valid, parentSelector) {
    if (valid) {
      $(parentSelector + " .message-box").removeClass('d-none').addClass('d-block ');
      $(parentSelector + " .message-box div").removeClass('alert-danger').addClass('alert-success').text('Form submitted successfully');
    } else {
      $(parentSelector + " .message-box").removeClass('d-none').addClass('d-block ');
      $(parentSelector + " .message-box div").removeClass('alert-success').addClass('alert-danger').text('Found error in the form. Please check again.');
    }
  }

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 ITCSS architecture, we have used the following folder:

settings: common define the variables that can customize the template.
functions: globally used mixins and functions.
generic: reset and/or normalize styles, box-sizing definition, etc.
elements: styling for bare HTML elements (like H1, A, header, footer, …).
objects: class-based selectors that define undecorated design patterns.
vendors: all vendor's style.
components: specific UI components.
trumps: utilities and helper classes with the ability to override.

/*
* Kohost v1.0.0 (https://themeforest.net/user/themetags)
* Copyright 2020 Themetags
* Licensed under ThemeForest License
*/

//setting
@import "settings/main";

//function
@import "functions/main";

//Generic
@import "generic/main";

//elements
@import "elements/main";

//objects
@import "objects/main";

//Third party plugins css.
@import "vendors/main";

//Components and widgets.
@import "components/main";

//Helper classes and overrides.
@import "trumps/main";

If you want to know about ITCSS then you can search with ITCSS. You will find information or tutorial. We have added one site that you may check: https://dev.to/carlillo/understanding-itcss-real-case-using-itcss-in-a-ghostcms-blog-1p9b

How to run SCSS?

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

 $ gulp dev

We run gulp dev during the development time.

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

 $ gulp build

If we run gulp build, it will generate the CSS file, CSS minified file and JS minified 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

WHMCS templates installation

How to install the WHMCS templates?

We have professional WHMCS templates design with orderform. If you want to use kohost professional whmcs template then we need to follow the below steps to complete the template installation completely:

1. Add the kohost-professional and kohost-professional-rtl to the templates folder

2. Add the kohost-professional orderform to the orderforms folder

3. Add hooks to hooks folder

4. Add language to the language folder

5. Configure your price from WHMCS admin panel

6. Change the default WHMCS template and orderform from admin panel

Templates Folder

Add the kohost-professional and kohost-professional-rtl to the templates folder

Go to the path: /<your-public-root-directory>/whmcs/templates
Unzip the kohost-professional and kohost-professional-rtl template folders if you have the zip version
Add the kohost-professional and kohost-professional-rtl folder
View this screenshot:

Add Orderforms

Add the kohost_professional orderform to the orderforms folder

Go to the path: /<your-public-root-directory>/whmcs/templates/orderforms
Unzip the kohost_professional orderform folder if you have the zip version
Add the kohost-profession folder

Add hooks to hooks folder

Add the hooks file in the hooks folder

Go to the path: /<your-public-root-directory>/whmcs/includes/hooks
Unzip the hooks folder if you have the zip version
Add the hooks file in the hooks folder folder

Add language

Add language to the lang folder

Got to the path: /<your-public-root-directory>/whmcs/lang
Unzip the lang folder if you have the zip version
Add the english.php file from the lang folder

Change Default Template and Orderforms

Change the default WHMCS template and orderform from admin panel. We can change our template and orderform from General setting but we can also set different orderform from the product group.

Change the default template from the general setting:

Click the setting icon right side of the navbar then click the general setting

Go to the general setting>general then select the template like kohost-professional

Change the default Orderform from General setting:

In this General settings click the tab Ordering then you can see the different types of the order form template. Now select the Kohost Professional. Check the below image:

After select, this then clicks the Save Change button.

Configure your price

Configure your product or price from WHMCS admin panel

First of all, login your whmcs admin panel then click the setting icon right side of the navbar> products/services follow the steps:

I hope you have already created product group name and under the group you have created single product package. If you don't have this package then you should create first. Then edit the single product package like bellow images:

Click the edit icon then you can see this bellow image. Copy this code and paste in the product description field like bellow image. You have to change the text or value based on your plan and follow for rest of the plan and product.

<ul class="list-unstyled pricing-feature-list">
    <li><span>10</span> Hosted Domains</li>
    <li><span>25 GB</span> RAID 10 Storage</li>
    <li><span>200 GB</span> Bandwidth</li>
    <li><span>1 Free</span> Domain included</li>
    <li><span>Super Fast</span> SSD Storage</li>
    <li><span>Free</span> SSL Certificate</li>
    <li>99.95% Uptime</li>
    <li>24/7 Phone Support</li>
</ul>

Change cart link from Domain Result Page

Open the domain-search-result.php from kohost/build folder and find the below code around line number 674

<td>
    <a href="http://themetags.net/whmcs/cart.php?systpl=kohost-professional&a=add&domain=register&query=<?php echo $domainName; ?>" class="btn btn-brand-01 btn-sm">Add to Cart</a>
</td>

Change http://themetags.net/whmcs with your WHMCS base URL. If you have made the kohost-professional as your default theme then you can remove also systpl=kohost-professional& from the link.

How to setup WHMCS Multi-Currency?

Go to your admin panel then click the setting icon right side of the navbar. Then type "currencies" on the search box, then click on it. check this bellow image-

After clicking it, now you need to add your currency like this-

Need to fill up the currency code, Prefix, Format and Base Conv. Rate. We need this currency code in the currency hook file. Now click the Add Currency button.

What do we need to do for the multiple currency support?

Need to add currency from here. The currency code is BDT.
Add the currency code and flag in the currency hook
Add the domain price for your currency
Add the product/ service price for your currency

Configure Domain and Product Price For Multi-Currency

For multi-currency domain price configuration:

Go to do admin panel click the setting icon right side of the navbar then go to the domain price option like the bellow image.

After click domain pricing then you will go to the domain price-setting option. After clicking the pricing button domain then open a popup option now you can set your multi-currency price value. Check bellow image
NB: This option available after enabled the multi-currency option.

For multi-currency product, price configure:

Go to the product/services configure option then click the edit icon. check this image

After clicking the product edit option then click the price tab on the tab option bar. Check the image below.

NB: This option will be available after enabled the multi-currency option.

How to change WHMCS template logo

To customize or change the logo in the client area, log in to your admin panel and navigate to Help> Setup Wizard

After Open a popup box then click Next

Choose your logo .png or .jpg file then click Next. If you want to set up other settings like Payments, Domains, etc then you can keep clicking Next otherwise click on Next for only General and it will update your logo. Now you check your website.

If you have 2 different logos such as a colorful and white version, follow the below steps:

1. Rename your colorful logo with "logo-primary.png". We are saying it is the primary logo.

2. Rename your another logo with "logo-secondary.png". We are saying it is the secondary logo.

3. Upload logo-color.png and logo-white.png logo to "templates/{your template}/img/" folder

If you want to use a different name then rename the logo with your name and upload to the img folder (step#3). Also, you need to change the logo name in the template where we have used the logo. You will find: <your template>/includes/logo.tpl file.

How to manage home page Product Price

In this Hooks folder, you will get two PHP file "products.php" and "pricetable.php". Home page product price manages from those files.

Now go to your template folder open header.tpl file then you can see below section for the product price code.

<!--pricing section start-->
    {if count($myproducts) gt 0 && ($myproducts.0.monthly gt 0 || $myproducts.0.annually gt 0 || $myproducts.0.biennially gt 0 || $myproducts.0.triennially gt 0)}
    <section class="pricing-section ptb-100">
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-md-12 col-lg-12">
                    <div class="section-heading-center text-center">
                        <h2>Our Flexible Pricing Plan</h2>
                        <p class="lead">
                            Distinctively recaptiualize principle-centered core competencies through client-centered
                            core competencies. Enthusiastically provide access.
                        </p>
                    </div>
                </div>
            </div>
            <div class="row align-items-center justify-content-between">
                {foreach $myproducts as $productKey => $myproduct}
                    <div class="col-lg-4 col-md-4 col-sm-6">
                        <div class="text-center gray-light-bg single-pricing-pack-2 mt-4 rounded border">
                            <div class="pricing-icon">
                                {if $productKey eq 0}
                                    <img src="{$WEB_ROOT}/templates/{$template}/img/dadicate-web-hosting.svg" width="60" alt="hosing">
                                {elseif $productKey eq 1}
                                    <img src="{$WEB_ROOT}/templates/{$template}/img/vps-hosting.svg" width="60" alt="hosing">
                                {elseif $productKey eq 2}
                                    <img src="{$WEB_ROOT}/templates/{$template}/img/cloud-hosting.svg" width="60" alt="hosing">
                                {/if}
                            </div>
                            <h4 class="package-title">{$myproduct.name}{if $myproduct.is_featured == '1'} <span class="badge color-1 color-1-bg">Popular</span>{/if}</h4>
                            
                            <div class="pricing-price pt-4">
                                <small>Starting at</small>
                                <div class="h2">{$myproduct.prefix}{$myproduct.monthly} <span class="price-cycle h4">/mo</span></div>
                            </div>
                            <a href="cart.php?a=add&pid={$myproduct.relid}" class="btn {if $myproduct.is_featured == '1'}primary-solid-btn{else}outline-btn{/if} mt-20">Get Started Now</a>
                        </div>
                    </div>
                {/foreach}
            </div>
        </div>
    </section>
    {/if}
    <!--pricing section end-->

How to add favicon

At first, add your favicon image in your templates/{your template name}/img folder. Make sure your favicon name will be favicon.png and height, the weight keeps the same like 80x80.

Configure WHMCS Hooks

We have customized 4 types of sections or blocks using WHMCS hooks. Go to the Hooks folder then you can see the bellow .php files:

1. Menu (menu.php)

2. Domain Price (pricetable.php)

3. Home Page Product price (products.php)

4. Client Area overdue message (clientAreaPanel.php)

5. Multi-currency support (currency.php)

We have customized the menu using the bellow function on menu.php in the hooks folder.

<?php
 
// This hook will adjust the button in the home page panels. You have two
// different options of setExtra() or setExtras(). Use of setExtras() requires
// passing all 'extra' related vars through the array.
 
use WHMCS\View\Menu\Item as MenuItem;

add_hook('ClientAreaPrimaryNavbar', 1, function (MenuItem $primaryNavbar) {
    // remove Network Status
    if (!is_null($primaryNavbar->getChild('Network Status'))) {
       $primaryNavbar->removeChild('Network Status');
    }
    
    // remove Affiliates
    if (!is_null($primaryNavbar->getChild('Affiliates'))) {
    //   $primaryNavbar->removeChild('Affiliates');
    }
    
    // Rename Announcements
    if (!is_null($primaryNavbar->getChild('Announcements'))) {
      $primaryNavbar->getChild("Announcements")->setLabel('News');
    }
    
    // after logged in topmenu: Rename Announcements
    if (!is_null($primaryNavbar->getChild('Support'))) {
      $primaryNavbar->getChild('Support')->getChild("Announcements")->setLabel('News');
    }
    
    // after logged in topmenu: Rename Announcements
    if (!is_null($primaryNavbar->getChild('Website Security'))) {
      $primaryNavbar->getChild('Website Security')->setLabel('Security');
    }
    
    // sidebar menu
    $secondarySidebar = Menu::secondarySidebar();
    if (!is_null($secondarySidebar->getChild('Support'))) {
      $secondarySidebar->getChild('Support')->getChild("Announcements")->setLabel('News');
    }
    
}); 

For more details: https://docs.whmcs.com/Editing_Client_Area_Menus

2. Domain Price (pricetable.php)

In the hero section, we have added domain lists like .com, .net, .org, etc, with a price. We have managed the domain price list from the pricetable.php hook file.

here is the pricetable.php file

<?php
/**
 * Price Table Hook Function
 *
 * Please refer to the documentation @ https://docs.whmcs.com/Hooks for more information
 * The code in this hook is commented out by default. Uncomment to use.
 *
 * @package    WHMCS
 * @author     WHMCS Limited <development@whmcs.com>
 * @copyright  Copyright (c) WHMCS Limited 2005-2018
 * @license    https://www.whmcs.com/license/ WHMCS Eula
 * @version    $Id$
 * @link       https://www.whmcs.com/
 */

use Illuminate\Database\Capsule\Manager as Capsule;

if (!defined("WHMCS"))
    die("This file cannot be accessed directly");

function homepage_pricetable_hook($vars) {
   $currencyid   = (isset($_GET['currency']) ? intval($_GET['currency']) : $_SESSION['currency']);
   $domainPrices = Capsule::table('tbldomainpricing')
                   ->join('tblpricing', 'tbldomainpricing.id', '=', 'tblpricing.relid')
                   ->join('tblcurrencies', 'tblpricing.currency', '=', 'tblcurrencies.id')
                   ->select('tbldomainpricing.extension','tblpricing.*', 'tblcurrencies.*')
                   ->where('tblpricing.type', 'domainregister')
                   ->where('tblpricing.currency', $currencyid)
                   ->get();
                   
   $encodedata = json_encode($domainPrices);
   $decodedata = json_decode($encodedata, true);

   return array("pricetable" => $decodedata);
}

add_hook("ClientAreaPage", 1, "homepage_pricetable_hook");

Before that, you need to make sure that you have set the domain price from your admin panel. Go to Setup>Products/Services>Domain Pricing. Check the below image:

Click the pricing and set the domain price.

3. Managed Hosting Price in Home Page (products.php)

We have the hosting or product price on the home page. We have managed by the hooks (products.php).

In this products.php file, you can see homepage_products_hook function ->where('tblproducts.gid','1'). This line manages which product group price show in the home page. Number '1' is the product group id.

How to find out product group id number:

Go to your WHMCS admin panel then Setup>Products/Services>Products/Services

If you mouse hover over on group icon then you can see the product group id.

Go to the products.php file in the hooks folder then replace that group id with your product group id.

<?php
/**
 * Price Table Hook Function
 *
 * Please refer to the documentation @ https://docs.whmcs.com/Hooks for more information
 * The code in this hook is commented out by default. Uncomment to use.
 *
 * @package    WHMCS
 * @author     WHMCS Limited <development@whmcs.com>
 * @copyright  Copyright (c) WHMCS Limited 2005-2018
 * @license    https://www.whmcs.com/license/ WHMCS Eula
 * @version    $Id$
 * @link       https://www.whmcs.com/
 */

use Illuminate\Database\Capsule\Manager as Capsule;

if (!defined("WHMCS"))
    die("This file cannot be accessed directly");

function homepage_products_hook($vars) {
   $currencyId = (isset($_GET['currency']) ? intval($_GET['currency']) : $_SESSION['currency']);
   $products   = Capsule::table('tblproducts')
                       ->join('tblpricing', 'tblproducts.id', '=', 'tblpricing.relid')
                       ->join('tblcurrencies', 'tblpricing.currency', '=', 'tblcurrencies.id')
                       ->select('tblproducts.*','tblpricing.*', 'tblcurrencies.*')
                       ->where('tblproducts.gid','1')
                       ->where('tblpricing.currency', $currencyId)
                       ->where('tblpricing.type', 'product')
                       ->get();

   $encodedata = json_encode($products);
   $decodedata = json_decode($encodedata, true);

   return array("myproducts" => $decodedata);
}

add_hook("ClientAreaPage", 1, "homepage_products_hook");

After updating the products.php file, you will see that product group price on the home page like below depending on your configuration.

Home page pricing section code here

<!--pricing section start-->
    {if count($myproducts) gt 0 && ($myproducts.0.monthly gt 0 || $myproducts.0.annually gt 0 || $myproducts.0.biennially gt 0 || $myproducts.0.triennially gt 0)}
    <section class="pricing-section ptb-100">
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-md-12 col-lg-12">
                    <div class="section-heading-center text-center">
                        <h2>Our Flexible Pricing Plan</h2>
                        <p class="lead">
                            Distinctively recaptiualize principle-centered core competencies through client-centered
                            core competencies. Enthusiastically provide access.
                        </p>
                    </div>
                </div>
            </div>
            <div class="row align-items-center justify-content-between">
                {foreach $myproducts as $productKey => $myproduct}
                    <div class="col-lg-4 col-md-4 col-sm-6">
                        <div class="text-center gray-light-bg single-pricing-pack-2 mt-4 rounded border">
                            <div class="pricing-icon">
                                {if $productKey eq 0}
                                    <img src="{$WEB_ROOT}/templates/{$template}/img/dadicate-web-hosting.svg" width="60" alt="hosing">
                                {elseif $productKey eq 1}
                                    <img src="{$WEB_ROOT}/templates/{$template}/img/vps-hosting.svg" width="60" alt="hosing">
                                {elseif $productKey eq 2}
                                    <img src="{$WEB_ROOT}/templates/{$template}/img/cloud-hosting.svg" width="60" alt="hosing">
                                {/if}
                            </div>
                            <h4 class="package-title">{$myproduct.name}{if $myproduct.is_featured == '1'} <span class="badge color-1 color-1-bg">Popular</span>{/if}</h4>
                            
                            <div class="pricing-price pt-4">
                                <small>Starting at</small>
                                <div class="h2">{$myproduct.prefix}{$myproduct.monthly} <span class="price-cycle h4">/mo</span></div>
                            </div>
                            <a href="cart.php?a=add&pid={$myproduct.relid}" class="btn {if $myproduct.is_featured == '1'}primary-solid-btn{else}outline-btn{/if} mt-20">Get Started Now</a>
                        </div>
                    </div>
                {/foreach}
            </div>
        </div>
    </section>
    {/if}
    <!--pricing section end-->

4. Client Area overdue message (clientAreaPanel.php)

In this clientAreaPanel.php file, you can see the few options like 'color', 'btn-text', 'btn-link', 'btn-icon'. We have managed the pay information by those. You need to replace the 'btn-link' with your link.

<?php
 
// This hook will adjust the button in the home page panels. You have two
// different options of setExtra() or setExtras(). Use of setExtras() requires
// passing all 'extra' related vars through the array.
 
use WHMCS\View\Menu\Item;
 
add_hook('ClientAreaHomepagePanels', 1, function (Item $homePagePanels) {
    $overdueInvoicesPanel = $homePagePanels->getChild('Overdue Invoices');
    if (!is_null($overdueInvoicesPanel)) {
        $overdueInvoicesPanel->setExtras(
            [
                'color' => 'amethyst',
                'btn-text' => 'Pay Now',
                'btn-link' => 'https://themetags.net/whmcs/clientarea.php?action=invoices',
                'btn-icon' => 'fas fa-wallet',
            ]
        );
    }
});

To check it, login to the client area panel fist then you can see the overdue message alert box on top. If you have an overdue invoice then you will see like below:

5. Multi-currency support (currency.php)

For multi-currency support, we customize multiple_currency_hook in this currency.php file

<?php
/**
 * Price Table Hook Function
 *
 * Please refer to the documentation @ https://docs.whmcs.com/Hooks for more information
 * The code in this hook is commented out by default. Uncomment to use.
 *
 * @package    WHMCS
 * @author     WHMCS Limited <development@whmcs.com>
 * @copyright  Copyright (c) WHMCS Limited 2005-2018
 * @license    https://www.whmcs.com/license/ WHMCS Eula
 * @version    $Id$
 * @link       https://www.whmcs.com/
 */

use Illuminate\Database\Capsule\Manager as Capsule;
use WHMCS\Session;

if (!defined("WHMCS"))
    die("This file cannot be accessed directly");

function multiple_currency_hook($vars) {
    $currencyId   = (isset($_GET['currency']) ? intval($_GET['currency']) : $_SESSION['currency']);
    
    $currencyList = Capsule::table('tblcurrencies')->get();
    if(!empty($currencyList)) {
        $template = !empty($vars['template']) ? $vars['template'] : '';
        $flags    = getFlags();
        foreach($currencyList as &$currency) {
            $currency->flag = 'templates/' . $template . '/' . $flags[$currency->code];
            if(empty($currencyId) && $currency->default) {
                $currencyId = $currency->id;
            }
        }
    }
    
    $encodedata = json_encode($currencyList);
    $decodedata = json_decode($currencyList, true);
    
    $urlForCurrentcy = getUrlForCurrency($currencyId);
    $isQueryExist    = strpos($urlForCurrentcy, "?") !== false ? true : false;
    
    return array("multiCurrency" => $decodedata, 'selectedCurrency' => $currencyId, 'urlForCurrentcy' => $urlForCurrentcy, 'isQueryExist' => $isQueryExist);
}

add_hook("ClientAreaPage", 1, "multiple_currency_hook");

// get URL for currency withour currency query string
function getUrlForCurrency($currencyId) {
    $whmcsQueryStr   = [];
    $actualLink      = (isset($_SERVER['HTTPS']) && $_SERVER['HTTPS'] === 'on' ? "https" : "http") . "://$_SERVER[HTTP_HOST]$_SERVER[REQUEST_URI]";
    $whmcsCurrentUrl = parse_url($actualLink);
    if(!empty($whmcsCurrentUrl['query'])) {
        parse_str($whmcsCurrentUrl['query'], $whmcsQueryStr);
    }

    if(!empty($whmcsQueryStr)) {
        foreach($whmcsQueryStr as $queryKey => $whmcsQuery) {
            if(strpos($queryKey, "currency") !== false) {
                unset($whmcsQueryStr[$queryKey]);    
            }
        }
    }
    
    $whmcsCurrentUrl['query']  = urldecode(http_build_query($whmcsQueryStr, '', '&amp;'));

    $fullUrl = unparseUrl($whmcsCurrentUrl);
    
    return $fullUrl;
}

// prepare full URL
function unparseUrl( $parsed_url , $ommit = array( ) ) {
    $url           = '';
    $p             = array();
    $p['scheme']   = isset( $parsed_url['scheme'] ) ? $parsed_url['scheme'] . '://' : '';
    $p['host']     = isset( $parsed_url['host'] ) ? $parsed_url['host'] : '';
    $p['port']     = isset( $parsed_url['port'] ) ? ':' . $parsed_url['port'] : '';
    $p['user']     = isset( $parsed_url['user'] ) ? $parsed_url['user'] : '';
    $p['pass']     = isset( $parsed_url['pass'] ) ? ':' . $parsed_url['pass']  : '';
    $p['pass']     = ( $p['user'] || $p['pass'] ) ? $p['pass']."@" : '';
    $p['path']     = isset( $parsed_url['path'] ) ? $parsed_url['path'] : '';
    $p['query']    = !empty( $parsed_url['query'] ) ? '?' . $parsed_url['query'] : '';
    $p['fragment'] = isset( $parsed_url['fragment'] ) ? '#' . $parsed_url['fragment'] : '';
    if ( $ommit ) {
        foreach ( $ommit as $key ) {
            if ( isset( $p[ $key ] ) ) {
                $p[ $key ] = '';    
            }
        }
    }
      
    return $p['scheme'].$p['user'].$p['pass'].$p['host'].$p['port'].$p['path'].$p['query'].$p['fragment']; 
}

// ************************************************************************************************************************
// Description: All flag list with currency code (We used flag from https://lipis.github.io/flag-icon-css/flags/4x3/us.svg.)
// key: currency code from WHMCS setting (Configuration > System Settings > Currencies). https://docs.whmcs.com/Currencies
// value: flag image path. Location: templates/{your-template}/img/flags/
//
// Instruction: the key needs to be the same as the currency code. 
// Example: 'USD'. We have set the currency code USD from Configuration > System Settings > Currencies
// ************************************************************************************************************************
function getFlags() {
    return [
        'AED' => 'img/flags/AED.svg',
        'AUD' => 'img/flags/AUD.svg',
        'BDT' => 'img/flags/BDT.svg',
        'BRL' => 'img/flags/BRL.svg',
        'COP' => 'img/flags/COP.svg',
        'CRC' => 'img/flags/CRC.svg',
        'DEM' => 'img/flags/DEM.svg',
        'EGP' => 'img/flags/EGP.svg',
        'ESP' => 'img/flags/ESP.svg',
        'FRF' => 'img/flags/FRF.svg',
        'GBP' => 'img/flags/GBP.svg',
        'IDR' => 'img/flags/IDR.svg',
        'ILS' => 'img/flags/ILS.svg',
        'INR' => 'img/flags/INR.svg',
        'ITL' => 'img/flags/ITL.svg',
        'MXN' => 'img/flags/MXN.svg',
        'NGN' => 'img/flags/NGN.svg',
        'NLG' => 'img/flags/NLG.svg',
        'PKR' => 'img/flags/PKR.svg',
        'PLN' => 'img/flags/PLN.svg',
        'SAR' => 'img/flags/SAR.svg',
        'TRY' => 'img/flags/TRY.svg',
        'USD' => 'img/flags/USD.svg',
    ];
}

In this multi-currency, we have used the country flag location path (.svg format). We have 23 country flags included in our templates/{your-template}/img/flags folder.

If you need to add a new country flag then:

First, add your currency from add multiple currencies
Then add/upload your flag in `templates/{your-template}/img/flags` folder
And add the currency code and flag path in getFlags function like 'BDT' => 'img/flags/BDT.svg', . BDT has come from currency code field. Check that we have used BDT.

NB: Make sure your image name will be your country code like USD, GBP, etc...

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:

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:

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:

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.

Change Log

v1.0.0 (20 August 2020)

Release: Initial Release

v2.0.0 (22th Aug, 2020)

Added RTL version of HTML template
Added working domain search page

v2.2.0 (30th August, 2020)

Updated captcha design for all whmcs templates

v2.2.1 (13th Sep, 2020)

Fixed message issue in the Contact Form
Updated file: libs/contact-form-process.php

v3.1.0 (24th Sep, 2020)

Fixed the disable button issue on WHMCS reset password
Added additional 5 HTML pages
Added Black Friday offer pages
Added Privacy Policy and Terms Condition pages

v3.4.0 (17 Oct, 2020)

Fixed image source issue on WHMCS template
The updated menu on the WHMCS template
Unused css file remove from the css folder on WHMCS template
Remove the demo username & password from the WHMCS login page

v4.0.0 (27 Oct, 2020)

WHMCS version upgrade to 8.0.3
WHMCS Header section design changed
WHMCS Footer section design changed
WHMCS Home page design changed
Check the changed file list

v4.0.1 (28 Oct, 2020)

Fixed WHMCS configure product "Choose Billing Cycle" Issues.
Updated WHMCS style.css file in the css folder.
Updated WHMCS custom.css and custom.js file in css and js folder.

v4.5.0 (3rd Nov, 2020)

Added multi-currency support on WHMCS template
Restructured the VPS slider
Fixed the logo path in the footer

ADDED:
Added currency.php file in the hooks folder
Added flags folder on WHMCS img folder
Fixed the logo path in the footer

UPDATED:
Updated header.tpl file on WHMCS template
Updated custom.css file on WHMCS template
Updated footer.tpl file on WHMCS template
Updated sidebar-categories.tpl file on WHMCS orderforms

v4.6.0 (8th Nov, 2020)

Design updated in WHMCS Login, Registration, and change password page
Added language change option in WHMCS Login, Registration, and change password page
Updated domain search button design in WHMCS page
Design updated in WHMCS Footer section

ADDED:
Added two new images on WHMCS img folder

Updated header.tpl file on WHMCS template
Updated footer.tpl file on WHMCS template
Updated login.tpl file on WHMCS template
Updated password-reset-container.tpl file on WHMCS template
Updated user-security.tpl file on WHMCS template
Updated custom.css file on WHMCS template
Updated checkout.tpl file on WHMCS orderforms
Updated style.css file on WHMCS orderforms css folder

v5.0.0 (21st, Nov, 2020)

Fixed the billing information update issue on orderform
Fixed the currency icon path issue
Fixed the responsive issue of table
Fixed the attached file issue in the dashboard
Updated the design of registration error
Designed the SSL and Security, addons pages
Updated navbar single item click issue on HTML template
Check the changed file list

v5.5.0 (5th, Jan 2021)

Updated WHMCS version 8.1.0 template
Updated the hooks/products.php file
Add favicon icon link in templates/{your template name}/includes/head.tpl file

v5.5.5 (9th, Jan 2021)

Fixed WHMCS template form label margin issue
Fixed orderforms addons item design issues
Add a custom class name in "your orderforms/configuredomains.tpl" file
Updated CSS in "your template/css/custom.css" and "your orderforms/css/style.css" file

v5.6.0 (20th, Jan 2021)

Used WHOIS lib to improve domain search
Add whois folder on libs folder
Updated "domain-search-result.php" file

v5.7.5 (8th, Feb 2021)

Fixed the wrong name of the template in WHMCS general setting
Fixed the CSS caching issue in WHMCS template
Fix the height issue on WHMCS product pricing
Redesigned the WHMCS service details page
Fixed the line break issue in WHMCS billing cycle
Fixed the spacing issue in WHMCS client register page
Fixed the sidebar issue in WHMCS support ticket details page
Fixed the captcha aligned issue in WHMCS pages
Fixed the W3C HTML validation issue for HTML template
Check the changed file list

v5.8.0 (17th, Feb 2021)

Updated WHMCS template latest version
Updated WHMCS orderforms latest version
Updated WHMCS language file lang>english.php
Fixed data table dropdown issue
Check the changed file list

v5.9.0 (27th, Mar 2021)

Updated WHMCS template version to 8.1.3
Updated WHMCS language file lang>english.php
Check the changed file list

Welcome

Local Setup

Installation

Configurations

How to Run?

How to Build for Production?

How to make live?

Folder Structure

Template Customization

HTML Structure

Head of the Template

How to change page title?

How to change Favicon?

Header Section

How to change Logo?

How to change images?

VPS slider configuration

Coming soon page

Footer Section

Forms

Contact Us Form

Customize with SCSS

SCSS Folder Structure

How to run SCSS?

Helpful Section

Bootstrap Utility Classes

Color

Background and gradient overlay color

Other classes

btn classes

Chrome Developer Tools Tutorial

WHMCS templates installation

How to install the WHMCS templates?

Templates Folder

Add Orderforms

Add hooks to hooks folder

Add language

Change Default Template and Orderforms

Configure your price

Change cart link from Domain Result Page

How to setup WHMCS Multi-Currency?

Configure Domain and Product Price For Multi-Currency

For multi-currency product, price configure:

How to change WHMCS template logo

How to manage home page Product Price

How to add favicon

Configure WHMCS Hooks

1. Menu (menu.php)

2. Domain Price (pricetable.php)

3. Managed Hosting Price in Home Page (products.php)

4. Client Area overdue message (clientAreaPanel.php)

5. Multi-currency support (currency.php)

Credits

Images and Videos

JS Libraries

CSS and Fonts

Customer Support

Support includes

Support doesn't include

Customer Refund Policy

Eligible to get the refund

Not eligible to get the refund

Change Log

v1.0.0 (20 August 2020)

v2.0.0 (22th Aug, 2020)

v2.2.0 (30th August, 2020)

v2.2.1 (13th Sep, 2020)

v3.1.0 (24th Sep, 2020)

v3.4.0 (17 Oct, 2020)

v4.0.0 (27 Oct, 2020)

v4.0.1 (28 Oct, 2020)

v4.5.0 (3rd Nov, 2020)

v4.6.0 (8th Nov, 2020)

v5.0.0 (21st, Nov, 2020)

v5.5.0 (5th, Jan 2021)

v5.5.5 (9th, Jan 2021)

v5.6.0 (20th, Jan 2021)

v5.7.5 (8th, Feb 2021)

v5.8.0 (17th, Feb 2021)

v5.9.0 (27th, Mar 2021)