HTML Structure
The template is based on bootstrap library, please read more about bootstrap 4 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: "header", "features", "pricing", ...etc
For the WHMCS template you can edit this layout in "header.tpl"، "homepage.tpl", and the footer content in "footer.tpl".
<div id="header" class="header"> ... <div id="partners-section" class="container-fluid partners-section"> ... <div id="features-section" class="container-fluid features-section"> ... <div id="pricing-section" class="container-fluid pricing-section"> ... <div class="container-fluid info-section"> ... <div class="container-fluid info-section"> ...
CSS
There are five CSS files in the template. First is "bootstrap.min.css", used for layout — originally in bootstrap, the other file is "fontawesome-all.min.css", "slick.css" and "style.css" is used for style customisation, where the texts, colors, backgrounds and font styles can be changed and there are "theme-dev.css", "theme-prpl.css", "theme-pomi.css", "theme-yel.css" and "theme-sky.css" files it depend on the theme color you choose.
We arrange the styles according to the order of the tags in the html.
/*------------------------------------------------------------------ [Table of contents] 1. General styles. 2. Header Styles. 3. Partners Styles. 4. Features Styles. 5. Pricing Styles. 6. Information Styles. 7. Testimonials Styles. 8. Contact Styles. 9. Responsive Styles. -------------------------------------------------------------------*/
JavaScript
This template imports eight 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.
- "jquery.validate.min.js": This jQuery plugin makes simple clientside form validation easy.
- "modernizr-custom.js": Modernizr is a JavaScript library that detects HTML5 and CSS3 features in the user’s browser.
- "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.
Switch the Theme
To change the theme to the other theme variation, simply replace the following code in the head of the page:
<link rel="stylesheet" type="text/css" href="css/theme-prpl.css" />
With this:
<link rel="stylesheet" type="text/css" href="css/theme-dev.css" />
For the WHMCS, replace the following code in the "head.tpl" file in the "includes" folder.
<link href="{assetPath file='theme-prpl.css'}" rel="stylesheet">
<link href="{assetPath file='styles-modified-prpl.css'}" rel="stylesheet">
With this:
<link href="{assetPath file='theme-pomi.css'}" rel="stylesheet">
<link href="{assetPath file='styles-modified-pomi.css'}" rel="stylesheet">
Note: there are four extra variations theme color, "dev", "pomi", "yel" and "sky" you just replace the CSS file name as above with the variation CSS file name that you want.
Logo
To change the logo, replace the logo file in the images folder with your logo.
Logo
To change the logo you have to replace these two lines
<img class="logo-icon" src="images/logo.svg" alt="" /> <div class="logo-txt">Hostbox</div>
With this line
<img class="logo-img" src="images/logo.png">
Add your logo link in src="".
To modify the size add the following CSS code to "custom.css" file and change the height:
#header .logo-img{
height: 30px;
}
Menu
To change the menu links, simply edit this code.
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="#features-section">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#pricing-section">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#contact-section">Contact us</a>
</li>
<li class="nav-item">
<a class="nav-link signup-button" href="#">Start today</a>
</li>
</ul>
</div>
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 four colors to use, "pr-color1", "pr-color2", "pr-color3" and "pr-color4".
<div class="price-table pr-color1">
This code is for the pricing table. The title, price and the details can be changed easily
<div class="price-table pr-color1 sm-3">
<div class="price-title">Small box</div>
<div class="tab-content price">
<div role="tabpanel" class="tab-pane fade in active show" id="monthly1">
<span class="monthly-num"><span class="currency">$</span>9.99</span>
</div>
<div role="tabpanel" class="tab-pane fade" id="yearly1">
<span class="monthly-num"><span class="currency">$</span>99.99</span>
</div>
</div>
<ul class="duration nav nav-tabs" role="tablist">
<li role="presentation"><a href="#monthly1" aria-controls="monthly1" role="tab" data-toggle="tab" class="active">Monthly</a></li>
<li role="presentation"><a href="#yearly1" aria-controls="yearly1" role="tab" data-toggle="tab">Yearly</a></li>
</ul>
<ul class="details-list">
<li>GB 1000 Storage</li>
<li>GB 2000 Monthly Traffic</li>
<li>128Mb Ram</li>
<li>10Subdomains</li>
<li>Sharing data</li>
<li>Unlimited Email accounts</li>
<li>Support 24/7</li>
<li>Linux server</li>
</ul>
<a href="#" class="price-btn">Choose this box</a>
</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 class="details-list">
<li>GB 1000 Storage</li>
<li>GB 2000 Monthly Traffic</li>
<li>128Mb Ram</li>
<li>10Subdomains</li>
<li>Sharing data</li>
<li>Unlimited Email accounts</li>
<li>Support 24/7</li>
<li>Linux server</li>
</ul>
Testimonials
If you want to add a testimonial, duplicate this code and modify it with your data.
<div class="testimonial-text-holder">
<div class="testimonial-text">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</div>
Also dublicate the following code:
<div class="person-details">
<div class="person-details-holder">
<img class="person-image" src="images/people/2.jpg" alt="" />
<div class="person-name">Jane Doe</div>
<div class="person-title">Job Title</div>
</div>
</div>
WHMCS Theme Installation
- Copy "hostbox" folders to WHMCS templates folder.
- Copy "hostbox_cart" folder to WHMCS templates/orderforms folder.
- On your WHMCS admin panel go to Setup > General Settings, choose the template "Hostbox" and save changes.
- Go to Setup > General Settings then Ordering Tab, choose "Hostbox 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.
