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="partners" class="container-fluid"> ... <div id="pricing" class="container-fluid"> ... <div id="testimonials" class="container-fluid"> ... <div id="contact" 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 Styles. 3. Top Content Styles. 4. Features Section Styles 5. Partners Section Styles. 6. More Features Section Styles. 7. Pricing Section Styles. 8. Search-box Section Styles. 9. Domain Pricing Section Styles. 10. Testimonials Section Styles. 11. Message Section Styles. 12. Contact Section Styles. 13. 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
- "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: 306px × height: 92px.
<img class="logo" src="images/logo.svg" alt="Spacehost">
Menu
To change the menu links, simply edit this code.
<ul class="nav navbar-nav navbar-right">
<li><a href="#features"><span>Features</span></a></li>
<li><a href="#pricing"><span>Purchase</span></a></li>
<li><a href="#contact"><span>Support</span></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>
Icons & text
The content in features section can be edited easily as follow:
You can change the icon, title and details text by editing this code for each one.
<div class="feature-box">
<div class="feature-icon">
<img src="images/feature1.svg" alt="">
</div>
<div class="feature-title">Site Bulilder</div>
<div class="feature-details">
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p>
<h4>Site Bulilder</h4>
</div>
</div>
You can use FontAwesome icons. Assume you needed twitter icon. To do that, replace the following code
<img src="images/feature1.svg" alt="">
With this
<i class="fa fa-twitter"></i>
To relplace the icon with an image, replace the img src="" with the image url, consider that the dimentions of the icon must be width: 146px × height: 146px.
Make sure to repeat the same modifications in this code as well.
Partners Images
You can add any number of images in the slider by editing the following code:
<div class="partners-slider">
<div><img src="images/partner1.png" alt=""></div>
<div><img src="images/partner2.png" alt=""></div>
<div><img src="images/partner3.png" alt=""></div>
<div><img src="images/partner4.png" alt=""></div>
<div><img src="images/partner5.png" alt=""></div>
<div><img src="images/partner6.png" alt=""></div>
<div><img src="images/partner7.png" alt=""></div>
</div>
To add more images, simply dublicate the following line:
<div><img src="images/partner1.png" alt=""></div>
To change the image, replace the src="" url of the img tag with your url.
Pricing tables
Every Pricing table start with the following line of code.
<div class="pricing-box">
You can add "Best Choise" icon at the top of the table by adding "best-choise" class next to other class as follow.
<div class="pricing-box best-choise">
The following code is for the pricing table. The title, price and the details can be changed easily
<div class="pricing-box">
<div class="pricing-content">
<div class="pricing-title">Starter</div>
<div class="pricing-price">$4.6</div>
<div class="pricing-info">Sed ut perspiciatis unde omnis iste natus error sit.</div>
<div class="pricing-details">
<ul>
<li>Sed ut perspiciatis unde</li>
<li>Sed ut perspiciatis unde</li>
<li>Sed ut perspiciatis unde</li>
<li>Sed ut perspiciatis unde</li>
<li>Sed ut perspiciatis unde</li>
</ul>
</div>
</div>
<div class="pricing-link">
<a class="order-link" href="#">Order now <i class="sphst sphst-arrow-down"></i></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>Sed ut perspiciatis unde</li>
<li>Sed ut perspiciatis unde</li>
<li>Sed ut perspiciatis unde</li>
<li>Sed ut perspiciatis unde</li>
<li>Sed ut perspiciatis unde</li>
</ul>
Domain Pricing
To edit the pricing domain details, simply edit the following code
<ul class="domain-list">
<li>
<div class="col-xs-6">.com</div>
<div class="col-xs-6">$12.95/yr*</div>
</li>
<li>
<div class="col-xs-6">.club</div>
<div class="col-xs-6">$9.95/yr*</div>
</li>
<li>
<div class="col-xs-6">.co</div>
<div class="col-xs-6">$12.95/yr*</div>
</li>
<li>
<div class="col-xs-6">.space</div>
<div class="col-xs-6">$9.95/yr*</div>
</li>
<li>
<div class="col-xs-6">.us</div>
<div class="col-xs-6">$5.95/yr*</div>
</li>
</ul>
Make sure to repeat the same modifications in this code as well.
And for the WHMCS template, it will come dynamically when you added the domain pricing from the WHMCS admin located in "Setup > Products/Services > Domain Pricing".
Testimonials
To edit the testimonial, simply edit the following code
You can change the image direction either left "left-img" or right "right-img"
<div class="testimonial-box right-img">
<div class="row">
<div class="col-xs-3 img-holder dot-color1"><img src="images/person1.jpg" alt=""></div>
<div class="col-xs-9">
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium</p>
</div>
</div>
</div>
Make sure to repeat the same modifications in this code as well.
Footer Details
To edit the footer information, simply change the text in this code.
<div class="col-md-6">
<div class="contact-box">
<h4>Get the right support</h4>
<p>Sed ut perspiciatis unde omnis iste natus<br>
error sit voluptatem accusantium<br>
Lorem ipsusm set amir</p>
<a href="#">Visit our support portal</a>
</div>
</div>
<div class="col-md-6">
<div class="contact-box">
<h4>Talk to customer service</h4>
<p>Olim ut perspiciatis unde omnis iste natus<br>
error sit voluptatem accusantium<br>
Lorem ipsusm set amir</p>
<a href="#">Call us on 38-244-64-23</a>
</div>
</div>
Form Setup
Set your email in the form:
Open "mailer.php" file in any text editor and replace this email "you@yourdomain.com" with your email, it's in the line 20 of the file.
WHMCS Theme Installation
- Copy "spacehost" folder to WHMCS templates folder.
- Copy "spacehost_cart" and "standard_cart" folders to WHMCS templates/orderforms folder.
- On your WHMCS admin panel go to Setup > General Settings, choose the template "Spacehost" and save changes.
- Go to Setup > General Settings then Ordering Tab, choose "Spacehost 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.
