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
<div id="top-content" class="container-fluid"> ... <div id="features" class="container-fluid"> ... <div id="pricing" class="container-fluid"> ... <div id="info" class="container-fluid"> ... <div id="testimonials" class="container-fluid"> ... <div id="footer" class="container-fluid"> ...
CSS
There are three CSS files in the template. First is "bootstrap.min.css", used for layout — originally in bootstrap, the other file is "font-awesome.min.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. Features Section Styles. 5. Pricing Section Styles. 6. Info Section Styles. 7. More Info Section Styles. 8. More Features Section Styles. 9. Testimonials 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.
- "jquery-migrate.min.js": This plugin can be used to warn about and/or restore APIs and behaviors that have been deprecated and/or removed.
- "main.js": Our custom javascript code.
Logo
To change the logo, replace the img src="" with the logo url, consider that the dimentions of the logo must be width: 196 px × height: 58px.
<img class="logo" src="images/logo.png">
Menu
To change the menu links, simply edit this code.
<ul class="nav navbar-nav navbar-right">
<li><a href="about.html">About us</a></li>
<li class="dropdown">
<a href="hosting.html">Hosting <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="whosting.html">Web Hosting</a></li>
<li><a href="chosting.html">Cloud Hosting</a></li>
<li><a href="dhosting.html">Dedicated Hosting</a></li>
</ul>
</li>
<li><a href="support.html">Help & Support</a></li>
<li><a href="contact.html">Contact us</a></li>
<li><a class="login-button" href="login.html">Login</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
To change the page title and the entire text of any page, go to the #top-content div,
<div id="top-content" class="container-fluid"> ... <div class="big-title">Better Web Hosting, For You.</div> <div class="sub-title">Being on the web is crucial, get your website today to have more audience</div>
The domain search is linked to Name.com.
Header icons & links
To change the icons of the animation in the header, use http://fontawesome.io/FontAwesome icons, simply replace the class name of the icon with the class name of the icon you want. Assume you needed instagram icon. To do that, replace this "fa fa-thumbs-up" with this "fa fa-instagram".
To add link for the icon replace # with the link you need.
<div class="animation">
<img src="images/laptop.png" />
<ul class="icons-list">
<li><a href="#"><i class="fa fa-thumbs-up"></i></a></li>
<li><a href="#"><i class="fa fa-commenting"></i></a></li>
<li><a href="#"><i class="fa fa-wifi"></i></a></li>
<li><a href="#"><i class="fa fa-envelope"></i></a></li>
<li><a href="#"><i class="fa fa-share-alt"></i></a></li>
<li><a href="#"><i class="fa fa-bullhorn"></i></a></li>
</ul>
<canvas id="hand-animation"></canvas>
</div>
Features icons & text
In features section you can change the icon, title and details text by editing this code for each one.
You can use FontAwesome icons instead of the existed icons. Assume you needed twitter icon. To do that, replace this "hsto hsto-cloud-computing" with this "fa fa-twitter".
To relplace the icon with an image, replace this code <i class="hsto hsto-cloud-computing"> with this <img src="image/image.png" width"60" height="60" /> and modify the src="" with the image url.
<div class="feature-box">
<div class="box-bg"></div>
<div class="feature-icon"><i class="hsto hsto-cloud-computing"></i></div>
<div class="feature-title">Knowledge base</div>
<div class="feature-details">Collect customer data with one API and send it to hundreds of tools.</div>
<div class="feature-button">
<a class="all-feature-button" href="#info">All Features</a>
</div>
</div>
Clicking the button "All Features" will direct to the info section, to change the link, replace the #info with your url.
Make sure to repeat the same modifications in this code as well.
Pricing tables
There are two different pricing table in the template, one of them in "index.html","hosting.html" pages and the other one in "whosting.html", "chosting.html" and "dhosting.html" pages.
Every Pricing table start with this code. In the code there is class "green-after", this class is adding aborder at the bottom of the table in green color, there are four colors to use, "green-after", "pink-after", "purple-after" and "blue-after".
<div class="pricing-box green-after">
You can add "Best Seller" icon at the top of the table by adding "best-seller" class next to other classes as follow.
<div class="pricing-box green-after best-seller">
This code is for the pricing table in "index.html","hosting.html" pages. The icon, title، price and the details can be changed easily
You can use FontAwesome icons instead of the existing icons. To do that, replace this "hsto hsto-technology" with this "fa fa-server".
<div class="pricing-box green-after best-seller">
<div class="pricing-icon green-color"><i class="hsto hsto-technology"></i></div>
<div class="pricing-title">Web Hosting</div>
<div class="pricing-details">
<ul>
<li>SSD-based shared hosting solutions</li>
</ul>
</div>
<div class="pricing-amount">
<div>Starting at</div>
<div class="price">
<span class="currency">$</span>
<span class="amount">3.8</span>
<span class="duration"> / Month</span>
</div>
</div>
<div class="pricing-button"><a href="whosting.html" class="green-button">Start today</a></div>
</div>
The other pricing table in the inner pages is almost the same as the one in the home page, but with simple modifications. It has different list items, the items that labeled as not supported will have class name "not-supported".
<div class="pricing-box blue-after">
<div class="pricing-icon"></div>>
<div class="pricing-title">Warriors Plan</div>
<div class="pricing-amount">
<div class="price">
<span class="currency">$</span>
<span class="amount">3.8</span>
<span class="duration">/mo</span>
</div>
</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 class="not-supported">Free Native Apps</li>
<li class="not-supported">QNote Editor</li>
<li class="not-supported">Offline File Access</li>
<li class="not-supported">Single Sign on</li>
<li class="not-supported">Unlimited Email accounts</li>
<li class="not-supported">Support 24/7</li>
<li class="not-supported">Linux server</li>
</ul>
</div>
<div class="pricing-button"><a href="#" class="blue-button">I want this</a></div>
</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>
<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 class="not-supported">Free Native Apps</li>
<li class="not-supported">QNote Editor</li>
<li class="not-supported">Offline File Access</li>
<li class="not-supported">Single Sign on</li>
<li class="not-supported">Unlimited Email accounts</li>
<li class="not-supported">Support 24/7</li>
<li class="not-supported">Linux server</li>
</ul>
There are four colors for the button ready to use "green-button", "pink-button", "purple-button" and "blue-button", simply replace the class name of the button "blue-button" with any one you want.
<div class="pricing-button"><a href="#" class="blue-button">I want this</a></div>
Info text & images
To change the image in the info section, replace the src="" url of the img tag with your url, or simply replace info1.png in the images folder.
Replace the title and the brief easily as showing.
<div class="col-sm-4 col-md-4 info-img-holder">
<img class="info-img" src="images/info1.png" />
</div>
<div class="col-sm-8 col-md-8 info-text-holder">
<h3>Why Choose Hostio?</h3>
<p>Whether you are a seasoned Internet pro, or just starting out with your
first website, our professional staff is here to assist you every step of the way.
We are here 24/7/365 to assist you with any aspect of your hosting experience.
Allow us the opportunity to exceed your expectations.</p>
</div>
More features icons & text
In more-features section you can change the icon, title and details text by editing this code for each one. This will be the same for the services section in "about.html" page.
You can use FontAwesome icons instead of the existed icons. Assume you needed twitter icon. To do that, replace this "hsto hsto-cloud-computing" with this "fa fa-twitter".
If you want to relplace the icon with image, simply replace this code <i class="hsto hsto-cloud-computing"> with this <img src="image/image.png" width"60" height="60" /> and modify the src="" with your image url.
<div class="mfeature-box">
<div class="mfeature-icon">
<div class="icon-bg"><img src="images/cloud1.png" /></div>
<i class="hsto hsto-medal"></i>
</div>
<div class="mfeature-title">World Class Hosting</div>
<div class="mfeature-details">Our support staff is available 24/7/365 to assist you via Telephone, Live Chat,or Email with any hosting-related issues.</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 class="col-sm-6 col-md-4">
<div class="testimonial-box">
<div class="testimonial-image"><img src="images/t1.jpg" /></div>
<div class="testimonial-title">Great Services!</div>
<div class="testimonial-details">Lorem Ipsum which looks reasonable generated as default model as and search many web sites pass websites is therefore always.</div>
<div class="testimonial-info"><span class="name">John Doe</span> - Manager @ Brandio</div>
</div>
</div>
Footer - address & social
To edit the address in the footer, simply change the information in this code.
To put a url to the social media icons, replace the # with your url.
<div class="phone"><i class="fa fa-phone"></i> 00 285 900 38502</div>
<div class="email"><i class="fa fa-envelope"></i> hello@hostio.io</div>
<div class="address">
<i class="fa fa-map-marker"></i>
<div>Brizbin, Australia<br>
Road 398, Center<br>
Office 38, floor 3</div>
</div>
<div class="social">
<a href="#"><i class="fa fa-twitter"></i></a>
<a href="#"><i class="fa fa-facebook"></i></a>
<a href="#"><i class="fa fa-instagram"></i></a>
</div>
Platforms - Web hosting page
To change the image logo in the platforms section, replace the src="" url of the img tag with your url.
<ul class="platforms-list left-list">
<li>
<div class="platform-link active" data-pid="1">
<div class="tool-tip">Unbounce</div>
<img src="./images/unbounce.png" />
</div>
</li>
<li>
<div class="platform-link" data-pid="2">
<div class="tool-tip">Wordpress</div>
<img src="./images/wordpress.png" />
</div>
</li>
<li>
<div class="platform-link" data-pid="3">
<div class="tool-tip">Drupal</div>
<img src="./images/drupal.png" />
</div>
</li>
</ul>
Also same for the preview image, replace the src="" url of the img tag with your url. The size of the image must be width: 1104px x height: 706px.
<div class="browser">
<div class="webpage">
<img id="p1" class="active" src="./images/unbounce-page.jpg" alt="unbounce"/>
<img id="p2" src="./images/wordpress-page.jpg" alt="wordpress"/>
<img id="p3" src="./images/drupal-page.jpg" alt="drupal"/>
<img id="p4" src="./images/squarespace-page.jpg" alt="squarespace"/>
<img id="p5" src="./images/joomla-page.jpg" alt="joomla"/>
<img id="p6" src="./images/magento-page.jpg" alt="magento"/>
</div>
</div>
WHMCS Theme Installation
- Copy "hostio" folder to WHMCS templates folder.
- Copy "hostio_cart" and "standard_cart" folders to WHMCS templates/orderforms folder.
- On your WHMCS admin panel go to Setup > General Settings, choose the template "Hostio" and save changes.
- Go to Setup > General Settings then Ordering Tab, choose "Hostio 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.
