Hostbox - Documentation

### HTML Structure

The template is based on bootstrap library, please read more about bootstrap here: http://getbootstrap.com/getting-started/ To edit the template, a very basic knowledge in dealing with bootstrap is required.

The Html file can be edited in any text editor, best example is Adobe Dreamweaver.

Hostio template structure is based on bootstrap layout, the page is separated in rows, every row created like the following figure:

The template is arranged in sections, each section(div) has an id, Ex: "header", "features", "pricing", ...etc

For the WHMCS template you can edit this layout in "header.tpl", and the footer content in "footer.tpl".

    <div id="header" class="container-fluid">
    ...
    <div id="partners" class="container-fluid">
    ...
    <div id="features" class="container-fluid">
    ...
    <div id="pricing" class="container-fluid">
    ...
    <div id="info1" class="container-fluid">
    ...
    <div id="testimonials" class="container-fluid">
    ...

### CSS

There are five CSS files in the template. First is "bootstrap.min.css", used for layout — originally in bootstrap, the other file is "font-awesome.min.css", "slick.css" and "style.css" is used for style customisation, where the texts, colors, backgrounds and font styles can be changed and there are "purple-theme.css", "black-theme.css" and "blue-theme.css" files it depend on the theme color you choose.

We arrange the styles according to the order of the tags in the html.

    /*------------------------------------------------------------------
    [Table of contents]

    1. General styles.
    2. Header Styles.
    3. Partners Styles.
    4. Features Styles.
    5. Pricing Styles.
    6. Information Styles.
    7. Testimonials Styles.
    8. Contact Styles.
    9. Responsive Styles.
    -------------------------------------------------------------------*/

### JavaScript

This template imports eight Javascript files.

- "jquery.min.js": jQuery is a Javascript library that greatly reduces the amount of code that you must write.
- "bootstrap.min.js": Bootstrap is the most popular Javascript framework for developing responsive, mobile first projects on the web.
- "jquery.validate.min.js": This jQuery plugin makes simple clientside form validation easy.
- "createjs.min.js": CreateJS is a JavaScript suite for developers looking to control the true power of HTML5's canvas element.
- "logo.js": The logo animation code.
- "modernizr-custom.js": Modernizr is a JavaScript library that detects HTML5 and CSS3 features in the user’s browser.
- "slick.min.js": slick is a responsive carousel jQuery plugin that supports multiple breakpoints, CSS3 transitions, touch events/swiping & much more!
- "main.js": Our custom javascript code.

### Logo

To change the logo you have to replace these two lines

    <canvas id="logo-canvas" width="50" height="50"></canvas>
    <div class="logo-text">Hostbox</div>

With this line

    <div class="logo-img"><img src="" alt="" width="150" height="50" /></div>

Add your logo link in src="", the logo image should be in png format and the dimentions (300px x 100px).

### Menu

There are two types of menu in the Template, you can set that simply by changing id and class for the menu:

Fullscreen Menu code:

    <div id="default-button" class="menu-button">
        <div class="fa fa-circle-o"></div>
        <div class="fa fa-circle-o"></div>
        <div class="fa fa-circle-o"></div>
    </div>
    <div id="default-menu" class="fullpage-menu">
        <div class="close-btn"><img src="images/close-btn.png" alt=""></div>
        <div class="menu-holder">
            <ul>
                <li><a class="menu-link" href="#header">Home</a></li>
                <li><a class="menu-link" href="#features">Features</a></li>
                <li><a class="menu-link" href="#pricing">Pricing</a></li>
                <li><a class="menu-link" href="#contact">Contact Us</a></li>
            </ul>
        </div>
    </div>

Inline Menu code:

    <div id="main-button" class="menu-button">
        <div class="fa fa-circle-o"></div>
        <div class="fa fa-circle-o"></div>
        <div class="fa fa-circle-o"></div>
    </div>
    <div id="main-menu" class="inline-menu">
        <div class="close-btn"><img src="images/close-btn.png" alt=""></div>
        <div class="menu-holder">
            <ul>
                <li><a class="menu-link" href="#header">Home</a></li>
                <li><a class="menu-link" href="#features">Features</a></li>
                <li><a class="menu-link" href="#pricing">Pricing</a></li>
                <li><a class="menu-link" href="#contact">Contact Us</a></li>
            </ul>
        </div>
    </div>

The WHMCS version has only inline menu.

### Pricing tables

Every Pricing table start with this code. In the code there is class "pr-color1", this class is changing the main color of the table, there are four colors to use, "pr-color1", "pr-color2", "pr-color3" and "pr-color4".

    <div class="price-table pr-color1">

This code is for the pricing table. The title, price and the details can be changed easily

    <div class="price-table pr-color1">
        <div class="price-top-bar">
            <div class="pbar color1-bg"></div>
            <div class="diamond">
                <div class="diamond-back"><div class="color1-bg"></div></div>
                <div class="diamond-top"><div class="color1-bg"></div></div>
                <div class="diamond-bottom"><div class="color1-bg"></div></div>
            </div>
        </div>
        <div class="price-title color1-bg">Smallbox</div>
        <div class="price accent-color-text">
            <span class="monthly-num"><span class="currency">$</span>9.99</span>
        </div>
        <div class="duration accent-color-text">
            <span class="monthly-obj">/monthly</span>
        </div>
        <ul class="details-list">
            <li>GB 1000 Storage</li>
            <li>GB 2000 Monthly Traffic</li>
            <li>128Mb Ram</li>
            <li>10Subdomains</li>
            <li>Sharing data</li>
            <li>Unlimited Email accounts</li>
            <li>Support 24/7</li>
            <li>Linux server</li>
        </ul>
        <a href="#" class="price-btn"><div class="pr-signup-button accent-color-bg">Sign Up</div></a>
    </div>

In WHMCS template, you will be using this list code when you add the ordering list, to be looks like the Html template exactly.

    <ul class="details-list">
        <li>GB 1000 Storage</li>
        <li>GB 2000 Monthly Traffic</li>
        <li>128Mb Ram</li>
        <li>10Subdomains</li>
        <li>Sharing data</li>
        <li>Unlimited Email accounts</li>
        <li>Support 24/7</li>
        <li>Linux server</li>
    </ul>

### Testimonials

If you want to add a testimonial, duplicate this code and modify it with your data.

    <div class="testimonial-text t1 accent-color-text">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>
    </div>

Also dublicate the following code:

    <div class="person-details person-details-show" data-num="1">
        <div class="person-image-holder">
            <img class="person-image" src="images/people/1.jpg" alt="">
        </div>
        <div class="person-details-holder">
            <div class="person-name">Jane Doe</div>
            <div class="person-title">Job Title</div>
        </div>
    </div>

Be sure that the number in the class "t1" in the first code is connected to the "data-num='1'" in the second code, it must be same numbers.

### Form Setup

Set your email in the form:
Open "mailer.php" file in any text editor and replace this email "you@yourdomain.com" with your email, it's in the line 20 of the file.

### WHMCS Theme Installation

- Copy "hostbox-colourful","hostbox-black" and "hostbox-blue" folders to WHMCS templates folder.
- Copy "hostbox_cart" folder to WHMCS templates/orderforms folder.
- On your WHMCS admin panel go to Setup > General Settings, choose the template "Hostbox" and save changes.
- Go to Setup > General Settings then Ordering Tab, choose "Hostbox Cart" and save changes.

Once again, thank you so much for purchasing this template. We'd be glad to help you if you have any questions relating to this template. No guarantees, but We'll do our best to assist. If you have a more general question relating to the themes on ThemeForest, you might consider visiting the forums and asking your question in the "Item Discussion" section.