Thank You!

Thank you for purchasing X-DATA - WMHCS & HTML Web Hosting Template. This documentation will help you understand basic structure of the template. If you have any questions that are beyond the scope of this help file, you can create support ticket at https://whmcsdes.com/ca or email us on [email protected].

Folder & HTML Structure

X-DATA - WMHCS & HTML Web Hosting Template So, mostly you will need one .html file & supporting .css, .js,files with some images. Structure of your the template would look like following image.

X-DATA

Install WHMCS Template


CSS

Following css files must be included in your HTML file to make this Template work. Make sure path of the css folder is mentioned correctly.

<!-- ========== Bootstrap & Other CSS Files ========== -->
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/owl.carousel.css">
<link rel="stylesheet" href="css/owl.theme.css">
<link rel="stylesheet" href="css/responsive.css">
<link rel='stylesheet' href='//fonts.googleapis.com/css?family=Raleway+Slab:400,100,300,700' type='text/css'>
<link rel='stylesheet' href='//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css' type='text/css'>

<!-- ========== Main Style CSS ========== -->
<link rel="stylesheet" href="css/style.css">

Fonts

We have used 2 different web fonts for text in this theme. 'Open Sans' and 'Roboto Slab'. Following two lines of code fetch web fonts from Google.

<link rel='stylesheet' href='//fonts.googleapis.com/css?family=Raleway:400,700' type='text/css'>
<link rel='stylesheet' href='//fonts.googleapis.com/css?family=open+sans:400,700' type='text/css'>

Javascripts

Following js files are required to be added to your HTML page to make this Template work.

<!-- ========== Include jQuery ========== -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

<!-- ========== Other JS ========== -->

<script src="js/jquery.plugin.js"></script> <!-- CountDown -->
<script src="js/jquery.countdown.js"></script> <!-- CountDown -->
<script src="js/owl.carousel.min.js"></script> <!-- Carousel -->
<script src="js/bootstrap.js"></script> <!-- Bootstrap -->
<script src="js/jquery.nicescroll.min.js"></script> <!-- NiceScroll -->

<!-- ========== Main js file ========== -->
<script src="js/plugins.js"></script> <!-- Main custom javascript file -->

CountDown Setup

Adding countdown is easy. Make sure you have added following js files at end of body:

<script src="js/jquery.plugin.js"></script> <!-- CountDown -->
<script src="js/jquery.countdown.js"></script> <!-- CountDown -->

edit the date 2016, 12 , 25

;
(function ($) {
    var austDay = new Date(2016, 12 - 1, 25);
    austDay = new Date(austDay.getFullYear() + 1, 1 - 1, 26);
    $('#defaultCountdown').countdown({
        until: austDay
    });
})(jQuery);

and add this id

defaultCountdown

Icons

We have used two different font icons for wider variety of icons. Following two lines are for these font icons:

<link rel='stylesheet' href='//maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css' type='text/css'>
Glyphicons

List of icons and classes to be used for them can be found on

FONT Awesome
FONT Glyphicons

Changin Google Maps api_key

                <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"></script> <!-- GoogleMaps -->

replace YOUR_API_KEY with your key and enjoy ;)

Credits