Hostify - 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: "nav", "top-content", "pricing", ...etc

Note: for the WHMCS, the same layout can be found in "header.tpl".

<div id="top-content" class="container-fluid">
...
<div id="info" class="container-fluid">
...
<div id="services" class="container-fluid">
...
<div id="pricing" class="container-fluid">
...
<div id="features" class="container-fluid">
...
<div id="testimonials" class="container-fluid">
...
<div id="footer" 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 files are "bootstrap-slider.min.css", "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.

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

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

1. General Styles.
2. Header Styles.
3. Top Content Styles.
4. info Section Styles.
5. Services Section Styles.
6. Message Section Styles.
7. Pricing Section Styles.
8. Custom Plan Section Styles.
9. Features Section Styles.
10. Testimonials Section Styles.
11. More Features Section Styles.
12. Footer Section Styles.
13. Sign in - Sign up Pages Styles.
14. Inner Pages Styles.
15. Responsive Styles.
-------------------------------------------------------------------*/

JavaScript

This template imports five 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.
"bootstrap-slider.min.js": Customizable Slider component.
"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, replace the logo file in the images folder with your logo, there are to versions of loge (light & dark), consider that the dimensions of the logo must be width: 124 px × height: 36px.

If you are using different dimensions, you should edit the following line with the new dimensions, located in "header.tpl","login.tpl" and "clientregister.tpl" for the WHMCS version and all HTML files for the HTML version.

<div class="logo" style="width:62px;height:18px"></div>

To change the menu links, simply edit this code.

<ul class="nav navbar-nav navbar-right">
    <li><a href="index.html">Home</a></li>
    <li class="dropdown">
        <a href="#pricing">Hosting <i class="fa fa-caret-down"></i></a>
        <ul class="dropdown-menu">
            <li><a href="cloudhosting.html">Cloud Hosting</a></li>
            <li><a href="webhosting.html">Web Hosting</a></li>
            <li><a href="vpshosting.html">VPS Servers</a></li>
        </ul>
    </li>
    <li><a href="about.html">Company</a></li>
    <li><a href="#whmcs">WHMCS</a></li>
    <li><a href="contact.html">Contact us</a></li>
    <li><a class="login-button" href="signin.html">Login</a></li>
    <li class="support-button-holder support-dropdown">
        <a class="support-button" href="#">Support</a>
        <ul class="dropdown-menu">
            <li><a href="#"><i class="fa fa-phone"></i>Toll-Free 08-197-435-01</a></li>
            <li><a href="#"><i class="fa fa-comments"></i>Start a Live Chat</a></li>
            <li><a href="#"><i class="fa fa-ticket"></i>Open a ticket</a></li>
            <li><a href="#"><i class="fa fa-book"></i>Knowledge base</a></li>
        </ul>
    </li>
</ul>

Features Icons & text

You can change the icon, title and details text by editing this code for each one.

You can use FontAwesome icons. Assume you needed twitter icon. To do that, replace this "htfy htfy-worldwide" with this "fa fa-twitter".

Also the feature title can be changed in the same code as follow:

<div class="feature-icon-holder feature-icon-holder1 opened" data-id="1">
    <div class="animation-holder"><div class="special-gradiant"></div></div>
    <div class="feature-icon"><i class="htfy htfy-worldwide"></i></div>
    <div class="feature-title">%99 Uptime</div>
</div>

And for the details, you have to modify the following code:

<div class="feature-box feature-d1 show-details">
    <div class="feature-title-holder">
        <span class="feature-icon"><i class="htfy htfy-worldwide"></i></span>
        <span class="feature-title">%99 Uptime</span>
    </div>
    <div class="feature-details">
        <p>At vero eos et accusamus et iusto odio dignissimos
        ducimus qui blanditiis praesentium voluptatum div
        atque corrupti quos dolores et quas molestias.</p>

        <p>dignissimos ducimus qui blanditiis praesentium
        voluptatum div atque corrupti quos dolores et quas
        unimo molestias.</p>
    </div>
</div>

Make sure to repeat the same modifications in this code as well.

Icons & text

This way of the layout is repeated in many different places in the template and can be edited easily as follow:

You can change the icon, title and details text by editing this code for each one.

You can use FontAwesome icons. Assume you needed twitter icon. To do that, replace this "htfy htfy-tick" with this "fa fa-twitter".

To relplace the icon with an image, replace this code <i class="htfy htfy-tick"></i> with this <img src="image/image.png" width"60" height="60" /> and modify the src="" with the image url.

<div class="mfeature-box">
    <div class="mfeature-icon">
        <i class="htfy htfy-tick"></i>
    </div>
    <div class="mfeature-title">%99.9 Uptime</div>
    <div class="mfeature-details">Mauris at libero sed justo pretium maximus ac non ex. Donec sit amet ultrices dolo.</div>
</div>

Make sure to repeat the same modifications in this code as well.

Pricing tables

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

<div class="pricing-box pricing-color1">

You can add "featured" icon at the top of the table by adding "featured" class next to other classes as follow.

<div class="pricing-box pricing-color1 featured">

<div class="pricing-box pricing-color1">
    <div class="pricing-content">
        <div class="pricing-icon">
            <div class="special-gradiant"></div>
            <i class="htfy htfy-technology"></i>
        </div>
        <div class="pricing-title">Web Hosting</div>
        <div class="pricing-price">$4.8</div>
        <div class="pricing-details">
            <ul>
                <li>Unlimited Storage</li>
                <li>500 Protected Files</li>
                <li>All Sharing Features</li>
                <li>Realtime Revoke</li>
                <li>Access to Party Integrations</li>
                <li>Free Native Apps</li>
                <li>QNote Editor</li>
                <li>Offline File Access</li>
                <li class="not-included">Single Sign on</li>
                <li class="not-included">Unlimited Email accounts</li>
                <li class="not-included">Support 24/7</li>
                <li class="not-included">Linux server</li>
            </ul>
        </div>
        <div class="pricing-link">
            <a class="ybtn" href="#">Create New Account</a>
        </div>
    </div>
</div>

In the list items, the items that labeled as not included will have class name "not-included".

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>
    <li>Unlimited Storage</li>
    <li>500 Protected Files</li>
    <li>All Sharing Features</li>
    <li>Realtime Revoke</li>
    <li>Access to Party Integrations</li>
    <li>Free Native Apps</li>
    <li>QNote Editor</li>
    <li>Offline File Access</li>
    <li class="not-included">Single Sign on</li>
    <li class="not-included">Unlimited Email accounts</li>
    <li class="not-included">Support 24/7</li>
    <li class="not-included">Linux server</li>
</ul>

Apps Icons & text

To change the image logo in the apps section located in hosting pages, replace the src="" url of the img tag with your url.

Also the app title can be changed in the same code as follow:

<div class="app-icon-holder app-icon-holder1 opened" data-id="1">
    <div class="app-icon"><img class="grayscale" src="images/wordpress.png" alt="wordpress"></div>
    <div class="app-title">Wordpress</div>
</div>

And for the details, you have to modify the following code:

<div class="app-details1 show-details">
    <div class="app-title">Wordpress Hosting</div>
    <div class="app-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
</div>

Make sure to repeat the same modifications in this code as well.

Testimonials

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

<div>
    <div class="details-holder">
        <img class="photo" src="images/person1.jpg" alt="">
        <h4>Chris Walker</h4>
        <h5>CEO & CO-Founder @HelloBrandio</h5>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris egestas non ante non consequat. Aenean accumsan eros vel elit tristique, non sodales nunc luctus. Etiam vitae odio eget orci finibus auctor ut eget magna.</p>
    </div>
</div>

Footer - address & social

To edit the address in the footer, simply change the information in this code.

<div class="address-holder">
    <div class="phone"><i class="fa fa-phone"></i> 00 285 900 38502</div>
    <div class="email"><i class="fa fa-envelope"></i> hello@hostify.com</div>
    <div class="address">
        <i class="fa fa-map-marker"></i> 
        <div>City Avenue, Office 64,<br>
        Floor 6, Milbourne,<br>
        Australia.</div>
    </div>
</div>

To put a url to the social media icons, replace the # with your url.

<ul class="social-menu">
    <li><a href="#"><i class="fa fa-facebook"></i></a></li>
    <li><a href="#"><i class="fa fa-youtube-play"></i></a></li>
    <li><a href="#"><i class="fa fa-twitter"></i></a></li>
</ul>

To edit the slider details in the Signup and Signin pages, modify "signup.html" & "signin.html", for the WHMCS will be "clientregister.tpl" & "login.tpl".

WHMCS Theme Installation

Copy "hostify" folder to WHMCS templates folder.
Copy "hostify_cart" and "standard_cart" folders to WHMCS templates/orderforms folder.
On your WHMCS admin panel go to Setup > General Settings, choose the template "Hostify" and save changes.
Go to Setup > General Settings then Ordering Tab, choose "Hostify 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.

HTML Structure

CSS

JavaScript

Logo

Menu

Features Icons & text

Icons & text

Pricing tables

Apps Icons & text

Testimonials

Footer - address & social

Signup & Signin pages

WHMCS Theme Installation