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: "mainNav", "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="features" class="container-fluid">
...
<div id="pricing" class="container-fluid">
...
<div id="apps" class="container-fluid">
...
<div id="testimonials" class="container-fluid">
...
<div id="footer" class="container-fluid">
...

CSS

There are four CSS files in the template. First is "bootstrap.min.css", used for layout — originally in bootstrap, the other files are "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 Section Styles.
3. Top Content Section Styles.
4. Info Section Styles
5. Features Section Styles.
6. Pricing Section Styles.
7. Apps Section Styles.
8. Testimonials Section Styles.
9. More Features Section Styles.
10. Get Started Section Styles.
11. Footer Section Styles.
12. Inner Pages Styles.
13. Responsive Styles.
-------------------------------------------------------------------*/

JavaScript

This template imports six 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.
  • "paper-full.min.js": Is an open source vector graphics scripting framework that runs on top of the HTML5 Canvas.
  • "slick.min.js": slick is a responsive carousel jQuery plugin that supports multiple breakpoints, CSS3 transitions, touch events/swiping & much more!
  • "metaball.js": the animation file.
  • "main.js": Our custom javascript code.

Switch the Style

To switch the style to the other style, simply add this code to the head of the page after all styles links as follow:

<link rel="stylesheet" type="text/css" href="css/blue-grey.css">

To be look like this:

<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="css/slick.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" type="text/css" href="css/blue-grey.css">

For the WHMCS, add this code to the "head.tpl" file in the "includes" folder.

<link href="{$WEB_ROOT}/templates/{$template}/css/blue-grey.css" rel="stylesheet">

And this should be look like the following code:

<link href="{$WEB_ROOT}/templates/{$template}/css/custom.css" rel="stylesheet">
<link href="{$WEB_ROOT}/templates/{$template}/css/styles-modified.css" rel="stylesheet">
<link href="{$WEB_ROOT}/templates/{$template}/css/slick.css" rel="stylesheet">
<link href="{$WEB_ROOT}/templates/{$template}/css/style.css" rel="stylesheet">
<link href="{$WEB_ROOT}/templates/{$template}/css/blue-grey.css" rel="stylesheet">

To change the logo, replace the img src="" with the logo url, consider that the dimentions of the logo must be width: 194 px ×  height: 34px.

<img class="logo" src="images/logo.png" alt="Hostino">

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="pages.html">Pages <span class="caret"></span></a>
        <ul class="dropdown-menu">
            <li><a href="about.html">About us</a></li>
            <li><a href="webhosting.html">Web hosting plans</a></li>
            <li><a href="domain.html">Domain names</a></li>
            <li><a href="blog.html">Blog</a></li>
        </ul>
    </li>
    <li><a href="support.html">Support portal</a></li>
    <li><a href="contact.html">Contact us</a></li>
    <li><a class="signin-button" href="signin.html">Sign in</a></li>
    <li><a class="chat-button" href="#">Chat now</a></li>
</ul>

Add a link to "Chat now" button, by replacing the # in href="#" 

<li><a class="chat-button" href="#">Chat now</a></li>

Top Content

There are three slides in the top of the home page, every slide has "title" attribute, the title value will shown as slide title, to change it simply edit the following code:

<div id="main-slider">
    <div class="slide domainsearch-slide" title="Welcome !">
        ...
    </div>
    <div class="slide info-slide1" title="Features">
        ...
    </div>
    <div class="slide info-slide2" title="Get started">
        ...
    </div>
</div>

Each slide has simple content, the first one has domain search input with some text, the text can be edited by modifying the following code:

<div class="b-title">Find a personal or professional domain<br>
that stands out.</div>

And the other slides has image, text and button. You can edit it easily as follow:

<div class="image-holder"><img src="images/main-slide-img1.png" alt="" /></div>
<div class="text-holder">Take your career to the next level<br>
Get your website today.</div>
<div class="button-holder"><a href="signup.html" class="blue-button">Sign up now</a></div>

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 "fa fa-star" with this "fa fa-twitter".

To relplace the icon with an image, replace this code <i class="fa fa-star"> 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">
        <div class="icon-bg"><img src="images/clouds-light.png" alt="" /></div>
        <i class="fa fa-star"></i>
    </div>
    <div class="mfeature-title">Uptime 100%. Guaranteed.</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 "pr-color1", this class is changing the main color of the table, there are three colors to use, "pr-color1", "pr-color2", "pr-color3".

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

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

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

This code is for the pricing table in "index.html","webhosting.html" pages. The title, price and the details can be changed easily 

<div class="pricing-box pr-color1">
    <div class="pricing-title" title="Starter">Starter</div>
    <div class="pricing-box-body">
        <div class="pricing-amount">
            <div class="price">
                <span class="currency">$</span><span class="amount">8.3</span>
            </div>
            <div class="duration">monthly</div>
        </div>

        <div class="pricing-details">
            <ul>
                <li>Storage — 10 GB</li>
                <li>Bandwidth ( Traffic ) — 15 GB</li>
                <li>Domain name — Free!</li>
                <li>Ram — 128 MB</li>
                <li>Subdomains — 10 GB</li>
                <li>Sharing data</li>
                <li>Unlimited Email Account</li>
                <li class="not-supported">Support 24/7</li>
                <li class="not-supported">One Click Install</li>
                <li class="not-supported">Private SSL & IP</li>
                <li class="not-supported">Free VoIP Phone Service</li>
            </ul>
        </div>

        <div class="pricing-button"><a href="#" class="pricing-button">Buy now</a></div>
    </div>
</div>

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

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>Storage — 10 GB</li>
    <li>Bandwidth ( Traffic ) — 15 GB</li>
    <li>Domain name — Free!</li>
    <li>Ram — 128 MB</li>
    <li>Subdomains — 10 GB</li>
    <li>Sharing data</li>
    <li>Unlimited Email Account</li>
    <li class="not-supported">Support 24/7</li>
    <li class="not-supported">One Click Install</li>
    <li class="not-supported">Private SSL & IP</li>
    <li class="not-supported">Free VoIP Phone Service</li>
</ul>

Apps Icons & text

To change the image logo in the apps section, 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 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>

Photo slider

To change any photo slider in the template, look at the following code:

<div class="photo-slider">
    <div><img src="images/photo1.jpg" alt=""></div>
    <div><img src="images/photo2.jpg" alt=""></div>
    <div><img src="images/photo3.jpg" alt=""></div>
</div>

You can add, remove or replace any photo by replacing the src="" url.

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@hostino.io</div>
    <div class="address">
        <i class="fa fa-map-marker"></i> 
        <div>Bahrain, Manama<br>
        Road 398, Block 125<br>
        The City Avenue<br>
        Office 38, floor 3</div>
    </div>
</div>

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

<div class="col-xs-2"><a href="#"><i class="fa fa-facebook"></i></a></div>
<div class="col-xs-2"><a href="#"><i class="fa fa-twitter"></i></a></div>
<div class="col-xs-2"><a href="#"><i class="fa fa-youtube-play"></i></a></div>
<div class="col-xs-2"><a href="#"><i class="fa fa-behance"></i></a></div>
<div class="col-xs-2"><a href="#"><i class="fa fa-dribbble"></i></a></div>
<div class="col-xs-2"><a href="#"><i class="fa fa-pinterest-p"></i></a></div>

WHMCS Theme Installation

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