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 or class, 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 class="features container-fluid"> ... <div class="pricing container-fluid"> ... <div class="latest-news container-fluid"> ... <div class="domain-search-holder container-fluid"> ... <div class="support-links container-fluid"> ... <div class="footer 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 "font-awesome.min.css", "slick.css", "styles-modified.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 - Features Section Styles 5 - Pricing Section Styles 6 - Latest News Section Styles 7 - Domain Search Section Styles 8 - Support Links Section Styles 9 - Services Section Styles 10- Blog Section Styles 11 - Support Details Section Styles 12 - Questions Section Styles 13 - Contact Section Styles 14 - Domain Pricing Section Styles 15 - Domain Features Section Styles 16 - Plain Content Section Styles 17 - Other Sections Styles 18 - Footer Styles 19 - Responsive Styles -------------------------------------------------------------------*/
JavaScript
This template imports four 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.
- "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 logo simply replace the url in the following code with your logo url or replace "logo.svg" file.
<a class="navbar-brand" href="index.html"><img src="images/logo.svg" alt="Hustbee"></a>
Menu
To change the menu links, simply edit this code.
<ul class="nav navbar-nav navbar-nav-centered">
<li class="nav-item active"><a class="nav-link" href="index.html">Home</a></li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown">Hosting Services</a>
<div class="dropdown-menu custom-dropdown-menu" aria-labelledby="navbarDropdown">
<div class="dropdown-items-holder">
<div class="items-with-icon">
<div class="row">
<div class="col-xs-6">
<a href="webhosting.html" class="link-with-icon">
<span class="icon"><img src="images/server1.svg" alt=""></span>
<span class="text">Web Hosting</span>
</a>
<a href="cloudhosting.html" class="link-with-icon">
<span class="icon"><img src="images/server2.svg" alt=""></span>
<span class="text">Cloud Hosting</span>
</a>
<a href="vpshosting.html" class="link-with-icon">
<span class="icon"><img src="images/server3.svg" alt=""></span>
<span class="text">VPS Hosting</span>
</a>
</div>
<div class="col-xs-6">
<a href="wordpresshosting.html" class="link-with-icon">
<span class="icon"><img src="images/server4.svg" alt=""></span>
<span class="text">Wordpress Hosting</span>
</a>
<a href="dedicatedhosting.html" class="link-with-icon">
<span class="icon"><img src="images/server5.svg" alt=""></span>
<span class="text">Dedicated Hosting</span>
</a>
<a href="domains.html" class="link-with-icon">
<span class="icon"><img src="images/server6.svg" alt=""></span>
<span class="text">Domain Names</span>
</a>
</div>
</div>
</div>
<div class="items">
<div class="row">
<div class="col-xs-6">
<a href="#" class="link">Hustbee Features</a>
</div>
<div class="col-xs-6">
<a href="#" class="link">Website builder</a>
</div>
</div>
</div>
</div>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="domains.html">Domains</a>
</li>
<li class="nav-item">
<a class="nav-link" href="contact.html">Support</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Pages</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="about.html">About</a></li>
<li><a class="dropdown-item" href="blog.html">Blog</a></li>
</ul>
</li>
</ul>
Top Content
There are four slides in the top of the home page, to modify it simply edit the following code:
<div id="main-slider">
<div class="slide">
... Your Content Here
</div>
<div class="slide">
... Your Content Here
</div>
<div class="slide">
... Your Content Here
</div>
<div class="slide">
... Your Content Here
</div>
</div>
Each slide has simple content, the last one has domain search input with some text, the text can be edited by modifying the following code:
<div class="b-text">Simple, affordable<br>Web Hosting</div>
And the other slides has image, text and button. You can edit it easily as follow:
<div class="row rtl-row">
<div class="col-sm-5">
<div class="img-holder">
<img src="images/slide-img3.png" alt="">
</div>
</div>
<div class="col-sm-7">
<div class="b-text">Build your site<br>with page builder</div>
<div class="m-text">Starting at only <span class="bold">$2.38/mo*</span></div>
<a href="#" class="hbtn hbtn-primary hbtn-lg">Learn more</a>
</div>
</div>
Features Images & text
You can change the image, title and details text by editing this code for each one.
<div class="row rtl-row">
<div class="col-sm-5">
<div class="img-holder">
<img src="images/feature1.png" alt="">
</div>
</div>
<div class="col-sm-7">
<div class="feature-info">
<div class="feature-title">Hosting For Every Website</div>
<div class="feature-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas posuere euismod dui eget ultrices. Cras condimentum dui eget erat commodo, in venenatis eros blandit.</div>
<div class="feature-link"><a href="#" class="hbtn hbtn-default">Get Started!</a></div>
</div>
</div>
</div>
Make sure to repeat the same modifications for the other codes as well.
Pricing tables
There are two different pricing table styles, the first one available in the homepage "index.html", you can modify it by editing the following code:
<div class="pricing-box">
<div class="pricing-title">Web Hosting</div>
<div class="pricing-icon">
<div class="icon"><img src="images/server1.svg" alt=""></div>
</div>
<div class="pricing-details">
<ul>
<li>User-friendly building tools</li>
<li>Host unlimited domains</li>
<li>Perfect for small sites/blogs</li>
</ul>
</div>
<div class="pricing-price">
<div class="price-info">Starting at only</div>
<div class="price">
<span class="currency">$</span><span class="num">2.75</span><span class="duration">/mo</span>
</div>
</div>
<div class="pricing-button">
<a href="#">Get Started!</a>
</div>
</div>
And the other one is available in the inner pages like "webhosting.html" and it will be in the WHMCS version, you can modify it by editing the following code:
<div class="pricing-box inner">
<div class="pricing-title">Starter plan</div>
<div class="pricing-price">
<div class="price">
<span class="currency">$</span><span class="num">2.75</span><span class="duration">/mo</span>
</div>
</div>
<div class="pricing-button">
<a href="#">Buy now</a>
</div>
<div class="pricing-details">
<ul>
<li>10GB Storage</li>
<li>1 Domain name</li>
<li>512Mb Ram</li>
<li>5GB Bandwidth</li>
<li>10 Emails</li>
</ul>
</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>10GB Storage</li>
<li>1 Domain name</li>
<li>512Mb Ram</li>
<li>5GB Bandwidth</li>
<li>10 Emails</li>
</ul>
Simple latest news
The latest news box has three bg colors, you can choose between them by changing the class to any of the three colors ("blue-bg", "grey-bg", "yellow-bg")
The details can be changed by editing the following code:
<div class="post-box blue-bg">
<div class="post-img" style="background-image: url('images/post-img1.png')"></div>
<span class="badge badge-danger">Hot</span>
<div class="post-title">Discover our new website builder</div>
<div class="post-link"><a href="#">Learn more</a></div>
</div>
To change the background image simply change the url "background-image: url('images/post-img1.png')".
Icons & text
This way of the layout is repeated in many different places in the template and can be edited easily as follow:
This example available at the end of "domains.html" page.
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 "hstb hstb-settings" with this "fa fa-twitter".
To relplace the icon with an image, replace this code <i class="hstb hstb-settings"></i> with this <img src="image/image.png" width"50" height="50" />, modify the dimensions and the src="" with the image url.
<div class="dfeature-box">
<div class="icon"><i class="hstb hstb-settings"></i></div>
<div class="title">Easy Control Panel</div>
<div class="details">Sed ut perspiciatis unde omnis iste natus error sit voluptatem ccusantium doloremque laudantium. aperiam inventore</div>
</div>
Make sure to repeat the same modifications in this code as well.
Footer - social media
To put a url to the social media icons, replace the # with your url.
<ul class="social">
<li><a href="#"><i class="fa fa-facebook-f"></i></a></li>
<li><a href="#"><i class="fa fa-youtube"></i></a></li>
<li><a href="#"><i class="fa fa-twitter"></i></a></li>
<li><a href="#"><i class="fa fa-instagram"></i></a></li>
</ul>
WHMCS Theme Installation
- Copy "hustbee" folder to WHMCS templates folder.
- Copy "hustbee_cart" and "standard_cart" folders to WHMCS templates/orderforms folder.
- On your WHMCS admin panel go to Setup > General Settings, choose the template "Hustbee" and save changes.
- Go to Setup > General Settings then Ordering Tab, choose "Hustbee 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.