OrDomain

Responsive HTML5 WHMCS Hosting Template

Thank you for purchasing my theme. If you have any questions that are beyond the scope of this help file, please feel free to email via my user page contact form here. Thanks so much!

How to get help:

We will respond to buyers' questions via the contact form on our profile.

We run support 24/7. You can expect a response within 24 hours.

OrDomain is a Responsive HTML5 WHMCS Hosting Template designed for All kinds of Domain and Hosting Business. It's an HTML template based on Bootstrap 3.3.7. Also included WHMCS Template based on WHMCS 7.5.1. Anyone can easily update/edit this template to follow our Well Sorted Documentation.

Main Features of "OrDomain":

Other Features of "OrDomain":

INSTALLATION

Our item included two types of Templates. One is the HTML Template to show your pricing/product/services and another one is the WHMCS Template for client area.

So, you have to use both templates for your website and need to link up manually all of your pricing/product/services with WHMCS (from HTML Template to WHMCS Template).

HTML TEMPLATE:

WHMCS TEMPLATE:

You'll get the step by step instruction in whmcs folder readme.txt file.

TEMPLATE STRUCTURE

HTML STRUCTURE

The "OrDomain" template is a responsive HTML template based on Bootstrap 3.3.7. The structure based on a flexible grid that lets you change HTML pages quickly and logically with a nestable system.

If you would like to edit the layout of any elements in whole template, you would do the following:

Open any '.html' or, '.css', so that is extremely easy to change any html markup and css attributes. Simply find the related and commented heading in the html or, css file and make your magic.

CSS FILES AND STRUCTURE

"OrDomain" using the following CSS files:

css/font-awesome.min.css
The css file for font-awesome icons. To see all the available icons and instructions on how to use them click here

css/bootstrap.min.css
The main responsive grid stylesheets, from Bootstrap 3 framework. It is recommended to make any changes/additions to style.css and keep bootsrap.css and bootsrap-theme.css as it are. In this way, you can easily upgrade the grid framework when Bootstrap releases an update.

css/jquery-ui-custom.min.css 
The main css file for vps slider

css/owl.carousel.css
The css file for owl carousel.

css/jquery.bxslider.min.css
The css file for bxSlider.

style.css 
The main css file

css/responsive-style.css 
The main css file for responsive styles.

css/main-color-1.css 
The main css file for color scheme.

JAVASCRIPT

js/jquery-3.1.0.min.js
The jQuery Framework

js/jquery-ui-custom.min.js
The script that using for custom sliders.

js/jquery.ui.touch-punch.min.js
The script that using for touch actions.

js/bootstrap.min.js
The main js file that hook the supported scripts of Bootstrap 3 framework 

js/js/isotope.min.js
The script that using for isotope plugin

js/jquery.validate.min.js
The script that using for form validation

js/owl.carousel.min.js
The script that using for slider

js/jquery.bxslider.min.js
The script that using for vertical slider

js/jquery.waypoints.min.js
The script that using for scroll events

js/jquery.counterup.min.js
The script that using for counter

js/main.js
The main script for the template

SOURCE AND CREADITS

Photos:

Fonts Used:

Frameworks / Libraries:

Plugins Used:

CHANGE LOGS

08 August, 2018 - Version 2.9 (Changelog)

// # List of updates
// ------------------------------

*. WHMCS template updated to be compatible with latest "WHMCS Version 7.6.0"

24 April, 2018 - Version 2.8 (Changelog)

// # List of updates
// ------------------------------

*. WHMCS template updated to be compatible with latest "WHMCS Version 7.5.1"

04 April, 2018 - Version 2.7 (Changelog)

// # List of updates
// ------------------------------

*. WHMCS template updated to be compatible with latest "WHMCS Version 7.5.0"

17 January, 2018 - Version 2.6 (Changelog)

// # List of updates
// ------------------------------

*. WHMCS template updated to be compatible with latest "WHMCS Version 7.4.2"

22 November, 2017 - Version 2.5 (Changelog)

// # List of updates
// ------------------------------

*. WHMCS template updated to be compatible with latest "WHMCS Version 7.4.1"

11 October, 2017 - Version 2.4 (Changelog)

// # List of updates
// ------------------------------

*. WHMCS template updated to be compatible with latest "WHMCS Version 7.3.0"

25 May, 2017 - Version 2.3 (Changelog)

// # List of updates
// ------------------------------

*. WHMCS template updated to be compatible with latest "WHMCS Version 7.2"

18 January, 2017 - Version 2.2 (Changelog)

// # List of updates
// ------------------------------

*. PHPMailer security update

2016 December 28 - Version 2.1 (Changelog)

// # List of updates
// ------------------------------

[*] PHPMailer security updated

2016 December 19 - Version 2.0 (Changelog)

// # List of updates
// ------------------------------

[+] WHMCS template updated to be compatible with latest "WHMCS Version 7.1" (For more information on changes of file to file, please look at it on github)
[-] We stop offering an order form template with WHMCS for WHMCS 7.x, as you can use any standard WHMCS order form.

2016 October 08 - Version 1.4 (Changelog)

// # List of updates
// ------------------------------

[*] VPS Slider Code Updated. (Files affected: vps-hosting-1.html, vps-hosting-2.html, main.js)
[+] WHMCS template and orderforms updated to be compatible with latest "WHMCS Version 7"

2016 September 20 - Version 1.3

// # List of updates
// ------------------------------

[+] domain search form now redirects to whmcs domain search form (files affected: index.html, domains.html)
[+] login form now lets you login to whmcs from your html login page (files affected: login.html)
[+] added tawk live chat widget (files affected: main.js)

// # List of fixed
// ------------------------------

[*] fixed responsive slider resize issue (files affected: main.js)

HOW TO UPDATE THE "DOMAIN SEARCH FORM"?

1. Open 'index.html' file

2. Find the comment "<!-- Banner Content Start -->"

3. Compare the code with the new one below by you or, with this tool then replace necessary changes

<div class="domain--search">
    <form action="http://billing.ywhmcs.com/domainchecker.php?systpl=OrDomainCV1" method="post" id="domainSearchForm" class="clearfix">
        <div class="form-group">
            <div class="input-group">
                <input type="text" name="domain" class="form-control" placeholder="eg. example">
                <span class="input-group-addon">
                    <input type="submit" value="Search" class="form-control">
                </span>
            </div>
        </div>
        <div class="row extensions">
            <div class="col-sm-2 col-xs-6">
                <input type="radio" name="ext" value=".com" id="extCom" checked>
                <label for="extCom">.com</label>
            </div>
            <div class="col-sm-2 col-xs-6">
                <input type="radio" name="ext" value=".net" id="extNet">
                <label for="extNet">.net</label>
            </div>
            <div class="col-sm-2 col-xs-6">
                <input type="radio" name="ext" value=".org" id="extOrg">
                <label for="extOrg">.org</label>
            </div>
            <div class="col-sm-2 col-xs-6">
                <input type="radio" name="ext" value=".info" id="extInfo">
                <label for="extInfo">.info</label>
            </div>
            <div class="col-sm-2 col-xs-6">
                <input type="radio" name="ext" value=".biz" id="extBiz">
                <label for="extBiz">.biz</label>
            </div>
            <div class="col-sm-2 col-xs-6">
                <input type="radio" name="ext" value=".us" id="extUs">
                <label for="extUs">.us</label>
            </div>
        </div>
    </form>
</div>

4. Open 'domains.html' file

5. Find the comment "<!-- Banner Content Start -->"

6. Compare the code with the new one below by you or, with this tool then replace necessary changes

<form action="http://billing.ywhmcs.com/domainchecker.php?systpl=OrDomainCV1" method="post" id="bulkDomainSearchForm">
    <div class="row">
        <div class="col-md-8">
            <textarea rows="8" name="domain" id="bulkdomains" class="form-control"></textarea>
        </div>
        <div class="col-md-4">
            <div class="extensions">
                <div class="row">
                    <div class="col-sm-3 col-xs-6">
                        <input type="checkbox" name=".com" value=".com" id="extCom" checked disabled>
                        <label for="extCom">.com</label>
                    </div>
                    <div class="col-sm-3 col-xs-6">
                        <input type="checkbox" name=".net" value=".net" id="extNet" checked disabled>
                        <label for="extNet">.net</label>
                    </div>
                    <div class="col-sm-3 col-xs-6">
                        <input type="checkbox" name=".org" value=".org" id="extOrg" checked disabled>
                        <label for="extOrg">.org</label>
                    </div>
                    <div class="col-sm-3 col-xs-6">
                        <input type="checkbox" name=".info" value=".info" id="extInfo" checked disabled>
                        <label for="extInfo">.info</label>
                    </div>
                    <div class="col-sm-3 col-xs-6">
                        <input type="checkbox" name=".biz" value=".biz" id="extBiz" checked disabled>
                        <label for="extBiz">.biz</label>
                    </div>
                    <div class="col-sm-3 col-xs-6">
                        <input type="checkbox" name=".us" value=".us" id="extUs" checked disabled>
                        <label for="extUs">.us</label>
                    </div>
                    <div class="col-md-3 col-xs-6">
                        <input type="checkbox" name=".in" value=".in" id="extIn" checked disabled>
                        <label for="extIn">.in</label>
                    </div>
                    <div class="col-sm-3 col-xs-6">
                        <input type="checkbox" name=".eu" value=".eu" id="extEu" checked disabled>
                        <label for="extEu">.eu</label>
                    </div>
                    <div class="col-sm-3 col-xs-6">
                        <input type="checkbox" name=".me" value=".me" id="extMe" checked disabled>
                        <label for="extMe">.me</label>
                    </div>
                    <div class="col-sm-3 col-xs-6">
                        <input type="checkbox" name=".bd" value=".bd" id="extBd" checked disabled>
                        <label for="extBd">.bd</label>
                    </div>
                    <div class="col-sm-3 col-xs-6">
                        <input type="checkbox" name=".training" value=".training" id="extTraining" checked disabled>
                        <label for="extTraining">.training</label>
                    </div>
                    <div class="col-sm-3 col-xs-6">
                        <input type="checkbox" name=".cars" value=".cars" id="extCars" checked disabled>
                        <label for="extCars">.cars</label>
                    </div>
                    <div class="col-sm-3 col-xs-6">
                        <input type="checkbox" value=".expert" name=".expert" id="extExpert" checked disabled>
                        <label for="extExpert">.expert</label>
                    </div>
                    <div class="col-sm-3 col-xs-6">
                        <input type="checkbox" value=".rocks" name=".rocks" id="extRocks" checked disabled>
                        <label for="extRocks">.rocks</label>
                    </div>
                    <div class="col-sm-3 col-xs-6">
                        <input type="checkbox" value=".ninja" name=".ninja" id="extNinja" checked disabled>
                        <label for="extNinja">.ninja</label>
                    </div>
                    <div class="col-sm-3 col-xs-6">
                        <input type="checkbox" value=".actor" name=".actor" id="extActor" checked disabled>
                        <label for="extActor">.actor</label>
                    </div>
                </div>
            </div>
            <button class="submit-btn btn btn-custom btn-blue" type="submit">SEARCH</button>
        </div>
    </div>
</form>

HOW TO UPDATE THE "LOGIN FORM"?

1. Open 'login.html' file

2. Find the comment "<!-- Login Area Start -->"

3. Compare the code with the new one below by you or, with this tool then replace necessary changes

HTML: 
<!-- Login Area Start -->
<div id="login">
    <div class="container">
        <form action="http://billing.ywhmcs.com/dologin.php?systpl=OrDomainCV1" method="post" id="loginForm">
            <div class="form-group">
                <label for="loginEmail">Email address *</label>
                <input type="email" name="username" class="form-control" id="loginEmail" placeholder="Email">
            </div>
            <div class="form-group">
                <label for="loginPassword">Password *</label>
                <input type="password" name="password" class="form-control" id="loginPassword" placeholder="Password">
            </div>
            <p class="help-block clearfix">
                <a href="http://billing.ywhmcs.com/pwreset.php?systpl=OrDomainCV1" class="pull-left"><i class="fa fa-fw fa-key"></i>Forget Password ?</a>
                <a href="http://billing.ywhmcs.com/register.php?systpl=OrDomainCV1" class="pull-right"><i class="fa fa-fw fa-user-plus"></i>Register Now</a>
            </p>
            <button type="submit" class="btn btn-block submit-button">login</button>
        </form>
    </div>
</div>
<!-- Login Area End -->

HOW TO UPDATE/ADD "TAWK LIVE CHAT WIDGET"?

1. Open 'main.js' file

2. Find the comment "* FORM VALIDATION"

2. Insert the below code before the comment "* FORM VALIDATION"

JS: 
/* ------------------------------------------------------------------------- *
 * LIVE CHAT WIDGET
 * ------------------------------------------------------------------------- */
var Tawk_API = Tawk_API || {},
    Tawk_LoadStart = new Date(),
    $tawk = document.createElement("script");

$tawk.async=true;
$tawk.src='https://embed.tawk.to/57dfd4b85dc7a25e92808cf6/default';
$tawk.charset='UTF-8';
$tawk.setAttribute('crossorigin','*');

$($tawk).appendTo('body');

HOW TO FIX "RESPONSIVE SLIDER ISSUE"?

1. Open 'main.js' file

2. Find the comment "* VERTICAL SLIDER"

3. Compare the code with the new one below by you or, with this tool then replace necessary changes

/* -------------------------------------------------------------------------*
 * VERTICAL SLIDER
 * -------------------------------------------------------------------------*/
var serviceSlider = $('.service-slider')
,   serviceSliderMode = function () {
    return ( wn.width() < 991 ) ? 'horizontal' : 'vertical';
};

if ( serviceSlider.length ) {
    serviceSlider.bxSlider({
        mode: serviceSliderMode(),
        speed: 800,
        infiniteLoop: true,
        controls: false,
        auto: true
    });

    wn.on('resize', function () {
        serviceSlider.reloadSlider();
    });
}

2016 August 28 - Version 1.2

// # List of updated
// ------------------------------

[new]  removed old twitter api
[new]  added new twitter widget

HOW TO UPGRADE THE TWITTER WIDGET?

1. Please, find the comments and include 'CSS' in 'css/style.css' file:

/* 13-5 TWITTER WIDGET */
.footer-widgets .twitter {
    color: #fff;
}

#footerTwitter {
    max-height: 270px;
    background-color: #fff;
    overflow: auto;
}

/* 25-2 SIDEBAR */
#sidebarTwitter {
    max-height: 270px;
    border: 1px solid #e9e9e9;
    overflow: auto;
}

2. Please, find the comments and include 'markup' in '.html' file:

<!-- Twitter Widget Start -->
<div class="twitter">
    <div id="footerTwitter" data-user-name="themelooks"></div>
</div>
<!-- Twitter Widget End -->

<!-- ====Twitter Fetcher Plugin Script==== -->
<script src="js/twitterFetcher.min.js"></script>

becomes:

<!-- ====Twitter Widget==== -->
<script src="https://platform.twitter.com/widgets.js"></script>

3. Please, find the comments and include 'javascript' in 'main.js' file:

/* ------------------------------------------------------------------------- *
 * TWITTER FEED
 * ------------------------------------------------------------------------- */
var tweetsContainer = $('#tweets');

if ( tweetsContainer.length ) {
    var config = {
        "id": tweetsContainer.data('twitter-id'),
        "domId": 'tweets',
        "maxTweets": tweetsContainer.data('posts'),
        "showTime": false,
        "showUser": false,
        "showInteraction": false
    };

    twitterFetcher.fetch(config);
}

var tweets2Container = $('#tweets2');

if ( tweets2Container.length ) {
    var config2 = {
        "id": tweets2Container.data('twitter-id'),
        "domId": 'tweets2',
        "maxTweets": tweets2Container.data('posts'),
        "showTime": false,
        "showUser": false,
        "showInteraction": false
    };

    twitterFetcher.fetch(config2);
}

becomes:
        
/* ------------------------------------------------------------------------- *
 * TWITTER WIDGET
 * ------------------------------------------------------------------------- */
var $footerTwitter = $('#footerTwitter');

if ( $footerTwitter.length ) {
    twttr.widgets.createTimeline({
        sourceType: "profile",
        screenName: $footerTwitter.data('user-name')
    }, document.getElementById('footerTwitter'));
}

var $sidebarTwitter = $('#sidebarTwitter');

if ( $sidebarTwitter.length ) {
    twttr.widgets.createTimeline({
        sourceType: "profile",
        screenName: $sidebarTwitter.data('user-name')
    }, document.getElementById('sidebarTwitter'));
}

2016 August 11 - Version 1.1

// # List of fixed
// ------------------------------

[new]  whmcs clients panel heading color issue fixed
[new]  testomonial sliders not showing proper client/feedback sequence

HOW TO FIX WHMCS COLOR ISSUE?

Please, include below 'CSS' in whmcs's 'css/custom.css' file:

/* CLIENTS PANEL */
.client-home-panels .panel-title {
    color: #303030;
}

HOW TO FIX TESTIMONIAL SLIDER ISSUE?

1. Please, add the data-id="1" in the 'index.html' or, 'testimonial.html' file. Example:

[NOTE: Please keep the value of data-id in sequence. Example: data-id="1", data-id="2", data-id="3", data-id="4", data-id="5"...]

<!-- Client Item Start -->
<div class="item" data-id="1">
    <img src="img/testimonial-img/01.jpg" alt="" class="img-responsive">
</div>
<!-- Client Item End -->

<!-- Client Item Start -->
<div class="item" data-id="2">
    <img src="img/testimonial-img/02.jpg" alt="" class="img-responsive">
</div>
<!-- Client Item End -->

2. Open Up 'main.js' file. Then Find The Comment '* OWL CAROUSEL" and Then update the code with below code:

var clientsSlider = $('.clients-slider')
,   feedbackSlider = $('.feedback-slider');

if ( clientsSlider.length ) {
    clientsSlider.owlCarousel({
        items: 1,
        autoplay: true,
        loop: true,
        dots: false,
        onChanged: function (e) {
            var tIndx = $(e.target).find('.owl-item').eq(e.item.index).children('.item').data('id'), tIndx = tIndx - 1;
            
            feedbackSlider.trigger('to.owl.carousel', [tIndx, 500, true]);
        }
    }).on('click', '.owl-item', function (e) {
        var tIndx = $(e.currentTarget).children('.item').data('id') - 1;
        
        clientsSlider.trigger('to.owl.carousel', [tIndx, 500, true]);
    });
}


if ( feedbackSlider.length ) {
    feedbackSlider.owlCarousel({
        items: 1,
        autoplay: false,
        loop: true,
        dots: false,
        mouseDrag: false,
        touchDrag: false
    });
}

FAQ

Q. How To Change Theme Color Scheme?

For HTML Template:

Available Color Schemes:

For WHMCS Template:

How can I change the "Logo"?




How can I change "Pricing Table"?




How can I change the "Mailchimp Subscription Link"?

We added a speacial feature 'mailchimp interrogation support' on this theme and will be add it to our future themes also.




How can I change "Counter Value"?




How can I change "Testimonial Text and Image"?




How can I change "Clients/Brands Logo"?

Make sure first you put your 'images' in the '/img/brands-img' folder.




How can I change the "Contact Address" (Footer Area)?




How can I change the "Twitter Widget"?




Where I will find the 'VPS Slider' information to change?




How can I change the "Goolge Map Position"?




How can I change "Name, Image, and Social Links" (Team Section)?

Make sure first you put your 'images' in the '/img/team-img' folder.




How can I change "Social Links" (Footer Area)?




How can I change "Copyright Text"?




How can I change "Slider Image and Text" (Hosting Pages)?

Make sure first you put your 'slider images' in the '/img/share-hosting-img' folder.




How can I change the "Slider Background Image Link" (Hosting Pages)?

Make sure first you put your 'slider images' in the '/img/background-img' folder.




How can I change "FAQ Questions and Answers"?




How can I change the "Contact Address" (Contact Page)?




How can I change the "Domain Search form action link" for my website to work with WHMCS?




How can I change the "Login Form action/forgot password/register link" for my website to work with WHMCS?




How can I change "Live Chat Widget"?




How can I add my "Email Address" (Sendmail.php)?




How can I change the "YouTube Video Link" (Blog Page)?




How can I change the "Vimeo Video Link" (Blog Page)?




How can I change the "Local Video Link" (Blog Page)?




How can I change the "Local Audio Link" (Blog Page)?




How can I change the "Soundcloud Audio Link" (Blog Page)?