<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=no">
<title>Hustbee - Documentation</title>
<link rel="stylesheet" type="text/css" href="assets/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="assets/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="assets/css/prettify.css">
<link rel="stylesheet" type="text/css" href="assets/css/style.css">
</head>
<body>
<div id="header" class="container-fluid">
<div class="row">
<div class="col-xs-12">
<div class="doc-title"><div class="glyph-icon flaticon-document-1"></div>Hustbee - Documentation</div>
</div>
</div>
</div>
<div id="content" class="container-fluid">
<div class="row">
<div class="col-xs-12 col-md-3" style="padding:0;">
<div class="menu-holder">
<ul class="main-menu">
<li><a href="#html" class="active"><i class="fa fa-angle-right" aria-hidden="true"></i>HTML Structure</a></li>
<li><a href="#css"><i class="fa fa-angle-right" aria-hidden="true"></i>CSS & JavaScript</a></li>
<li><a href="#logo"><i class="fa fa-angle-right" aria-hidden="true"></i>Logo & Menu</a></li>
<li><a href="#top-content"><i class="fa fa-angle-right" aria-hidden="true"></i>Top Content</a></li>
<li><a href="#features"><i class="fa fa-angle-right" aria-hidden="true"></i>Features Icons & text</a></li>
<li><a href="#pricing"><i class="fa fa-angle-right" aria-hidden="true"></i>Pricing tables</a></li>
<li><a href="#latestnews"><i class="fa fa-angle-right" aria-hidden="true"></i>Simple Latest News</a></li>
<li><a href="#icons"><i class="fa fa-angle-right" aria-hidden="true"></i>Icons & text</a></li>
<li><a href="#social"><i class="fa fa-angle-right" aria-hidden="true"></i>Footer - social media</a></li>
<li><a href="#whmcs"><i class="fa fa-angle-right" aria-hidden="true"></i>WHMCS Theme Installation</a></li>
</ul>
</div>
</div>
<div class="col-xs-12 col-md-9 content">
<h3 id="html">HTML Structure</h3>
<p>The template is based on bootstrap library, please read more about bootstrap here: <a href="http://getbootstrap.com/getting-started/" target="_blank">http://getbootstrap.com/getting-started/</a>
To edit the template, a very basic knowledge in dealing with bootstrap is required.
</p>
<p>The Html file can be edited in any text editor, best example is Adobe Dreamweaver.
</p>
<p>The template structure is based on bootstrap layout, the page is separated in rows, every row created like the following figure:
</p>
<img src="assets/images/doc.jpg">
<br>
<p>The template is arranged in sections, each section(div) has an id or class, Ex: "nav", "top-content", "pricing", ...etc</p>
<p><b>Note:</b> for the WHMCS, the same layout can be found in "header.tpl".</p>
<pre class="prettyprint">
<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">
...</pre>
<h3 id="css">CSS</h3>
<p>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.</p>
<p>
We arrange the styles according to the order of the tags in the html.
</p>
<pre class="prettyprint">/*------------------------------------------------------------------
[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
-------------------------------------------------------------------*/</pre>
<h3 id="javascript">JavaScript</h3>
<p>This template imports four Javascript files.</p>
<ul>
<li>"jquery.min.js": jQuery is a Javascript library that greatly reduces the amount of code that you must write.</li>
<li>"bootstrap.min.js": Bootstrap is the most popular Javascript framework for developing responsive, mobile first projects on the web.</li>
<li>"slick.min.js": slick is a responsive carousel jQuery plugin that supports multiple breakpoints, CSS3 transitions, touch events/swiping & much more!</li>
<li>"main.js": Our custom javascript code.</li>
</ul>
<h3 id="logo">Logo</h3>
<p>To change logo simply replace the url in the following code with your logo url or replace "logo.svg" file.</p>
<pre class="prettyprint">
<a class="navbar-brand" href="index.html"><img src="images/logo.svg" alt="Hustbee"></a></pre>
<h3 id="menu">Menu</h3>
<p>To change the menu links, simply edit this code.</p>
<pre class="prettyprint">
<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></pre>
<br>
<h3 id="top-content">Top Content</h3>
<p>There are four slides in the top of the home page, to modify it simply edit the following code:</p>
<pre class="prettyprint">
<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></pre>
<p>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:</p>
<pre class="prettyprint">
<div class="b-text">Simple, affordable<br>Web Hosting</div></pre>
<p>And the other slides has image, text and button. You can edit it easily as follow:</p>
<pre class="prettyprint">
<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></pre>
<h3 id="features">Features Images & text</h3>
<p>You can change the image, title and details text by editing this code for each one.</p>
<pre class="prettyprint">
<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></pre>
<p>Make sure to repeat the same modifications for the other codes as well.</p>
<h3 id="pricing">Pricing tables</h3>
<p>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:</p>
<pre class="prettyprint">
<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></pre>
<p>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:</p>
<pre class="prettyprint">
<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></pre>
<p>In WHMCS template, you will be using this list code when you add the ordering list, to be looks like the Html template exactly.</p>
<pre class="prettyprint">
<ul>
<li>10GB Storage</li>
<li>1 Domain name</li>
<li>512Mb Ram</li>
<li>5GB Bandwidth</li>
<li>10 Emails</li>
</ul></pre>
<h3 id="latestnews">Simple latest news</h3>
<p>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")</p>
<p>The details can be changed by editing the following code:</p>
<pre class="prettyprint">
<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></pre>
<p>To change the background image simply change the url "background-image: url('images/post-img1.png')".</p>
<h3 id="icons-text">Icons & text</h3>
<p>This way of the layout is repeated in many different places in the template and can be edited easily as follow:</p>
<p>This example available at the end of "domains.html" page.</p>
<p>You can change the icon, title and details text by editing this code for each one.</p>
<p>You can use FontAwesome icons. Assume you needed twitter icon. To do that, replace this "hstb hstb-settings" with this "fab fa-twitter".</p>
<p>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.</p>
<pre class="prettyprint">
<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></pre>
<p>Make sure to repeat the same modifications in this code as well.</p>
<h3 id="social">Footer - social media</h3>
<p>To put a url to the social media icons, replace the # with your url.</p>
<pre class="prettyprint">
<ul class="social">
<li><a href="#"><i class="fab fa-facebook-f"></i></a></li>
<li><a href="#"><i class="fab fa-youtube"></i></a></li>
<li><a href="#"><i class="fab fa-twitter"></i></a></li>
<li><a href="#"><i class="fab fa-instagram"></i></a></li>
</ul></pre>
<h3 id="whmcs">WHMCS Theme Installation</h3>
<ul>
<li>Copy "hustbee" folder to WHMCS templates folder.</li>
<li>Copy "hustbee_cart" and "standard_cart" folders to WHMCS templates/orderforms folder.</li>
<li>On your WHMCS admin panel go to Setup > General Settings, choose the template "Hustbee" and save changes.</li>
<li>Go to Setup > General Settings then Ordering Tab, choose "Hustbee Cart" and save changes.</li>
</ul>
<hr>
<p>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.</p>
</div>
</div>
</div>
<div id="footer" class="container-fluid">
<div class="row">
<div class="col-xs-12">
<div class="doc-info">
<div><b>Created:</b> 7 Jul 2018</div>
<div><b>By:</b> Brandio</div>
<div><b>Support:</b> faisal@brandio.io</div>
</div>
</div>
</div>
</div>
<a id="back-to-top" href="#header"><i class="fa fa-chevron-up" aria-hidden="true"></i></a>
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/bootstrap.min.js"></script>
<script src="assets/js/prettify.js"></script>
<script src="assets/js/main.js"></script>
</body>
</html>