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.

The 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: "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 id="info" class="container-fluid">
...
<div id="services" class="container-fluid">
...
<div id="pricing" class="container-fluid">
...
<div id="features" class="container-fluid">
...
<div id="testimonials" class="container-fluid">
...
<div id="footer" class="container-fluid">
...

CSS

The template has "bootstrap.min.css", used for layout — originally in bootstrap, the other files are "bootstrap-slider.min.css", "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. info Section Styles.
5. Services Section Styles.
6. Message Section Styles.
7. Pricing Section Styles.
8. Custom Plan Section Styles.
9. Features Section Styles.
10. Testimonials Section Styles.
11. More Features Section Styles.
12. Footer Section Styles.
13. Sign in - Sign up Pages Styles.
14. Inner Pages Styles.
15. Responsive Styles.
-------------------------------------------------------------------*/

JavaScript

This template imports five 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.
  • "bootstrap-slider.min.js": Customizable Slider component.
  • "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 Style

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/style.css">

With this:

<link rel="stylesheet" type="text/css" href="css/style-darkblue.css">

For the WHMCS, replace the following code in the "head.tpl" file in the "includes" folder.

<link href="{assetPath file='style.css'}" rel="stylesheet">
<link href="{assetPath file='styles-modified.css'}" rel="stylesheet">

With this:

<link href="{assetPath file='style-darkblue.css'}" rel="stylesheet">
<link href="{assetPath file='styles-modified-darkblue.css'}" rel="stylesheet">

Note: there are four extra variations theme color, "blue", "darkblue", "green" and "grey" you just replace the CSS file name as above with the variation CSS file name that you want.

To change the logo, replace the logo file in the images folder with your logo, there are to versions of loge (light & dark), consider that the dimensions of the logo must be width: 124 px ×  height: 36px.

If you are using different dimensions, you should edit the following line with the new dimensions, located in "header.tpl","login.tpl" and "clientregister.tpl" for the WHMCS version and all HTML files for the HTML version.

<div class="logo" style="width:62px;height:18px"></div>

To change the menu links, simply edit this code.

<ul class="nav navbar-nav navbar-right">
    <li><a href="index.html">Home</a></li>
    <li class="dropdown">
        <a href="#pricing">Hosting <i class="s fa-caret-down"></i></a>
        <ul class="dropdown-menu">
            <li><a href="cloudhosting.html">Cloud Hosting</a></li>
            <li><a href="webhosting.html">Web Hosting</a></li>
            <li><a href="vpshosting.html">VPS Servers</a></li>
        </ul>
    </li>
    <li><a href="about.html">Company</a></li>
    <li><a href="#whmcs">WHMCS</a></li>
    <li><a href="contact.html">Contact us</a></li>
    <li><a class="login-button" href="signin.html">Login</a></li>
    <li class="support-button-holder support-dropdown">
        <a class="support-button" href="#">Support</a>
        <ul class="dropdown-menu">
            <li><a href="#"><i class="fas fa-phone"></i>Toll-Free 08-197-435-01</a></li>
            <li><a href="#"><i class="fas fa-comments"></i>Start a Live Chat</a></li>
            <li><a href="#"><i class="fas fa-ticket-alt"></i>Open a ticket</a></li>
            <li><a href="#"><i class="fas fa-book"></i>Knowledge base</a></li>
        </ul>
    </li>
</ul>

Mega Menu Icons & text

You can change the icon, title and details text by editing this code for each one.

<div class="unity-box">
    <div class="unity-icon">
        <img src="images/service-icon1.svg" alt="">
    </div>
    <div class="unity-title">
        Web Hosting
    </div>
    <div class="unity-details">
        Flexible shared-hosting
    </div>
</div>

Top Content

The header content can be edited by modifying the following code:

<div class="slide">
    <div class="noti-holder">
        <a href="#">
            <div class="noti">
                <span class="badge">New</span><span class="text">Added new packages in cloud hosting.</span>
            </div>
        </a>
    </div>
    <div class="spacer"></div>
    <div class="big-title">Your very <span>own space,</span><br>anywhere, anytime.</div>
    <p>At vero eos et accusamus et iusto odio dignissimos ducimus blanditiis atque corrupti quos dolores et quas molestias.</p>
    <div class="btn-holder">
        <a href="signup.html" class="ybtn ybtn-header-color">Register</a><a href="contact.html" class="ybtn ybtn-white ybtn-shadow">Contact Us</a>
    </div>
</div>

Features Icons & text

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 "htfy htfy-worldwide" with this "fab fa-twitter".

Also the feature title can be changed in the same code as follow:

<div class="feature-icon-holder feature-icon-holder1 opened" data-id="1">
    <div class="animation-holder"><div class="special-gradiant"></div></div>
    <div class="feature-icon"><i class="htfy htfy-worldwide"></i></div>
    <div class="feature-title">%99 Uptime</div>
</div>

And for the details, you have to modify the following code:

<div class="feature-box feature-d1 show-details">
    <div class="feature-title-holder">
        <span class="feature-icon"><i class="htfy htfy-worldwide"></i></span>
        <span class="feature-title">%99 Uptime</span>
    </div>
    <div class="feature-details">
        <p>At vero eos et accusamus et iusto odio dignissimos
        ducimus qui blanditiis praesentium voluptatum div
        atque corrupti quos dolores et quas molestias.</p>

        <p>dignissimos ducimus qui blanditiis praesentium
        voluptatum div atque corrupti quos dolores et quas
        unimo molestias.</p>
    </div>
</div>

Make sure to repeat the same modifications in this code as well.

Icons & text

This way of the layout is repeated in many different places in the template and can be edited easily as follow:

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 "htfy htfy-tick" with this "fab fa-twitter".

To relplace the icon with an image, replace this code <i class="htfy htfy-tick"></i> with this <img src="image/image.png" width"60" height="60" /> and modify the src="" with the image url.

<div class="mfeature-box">
    <div class="mfeature-icon">
        <i class="htfy htfy-tick"></i>
    </div>
    <div class="mfeature-title">%99.9 Uptime</div>
    <div class="mfeature-details">Mauris at libero sed justo pretium maximus ac non ex. Donec sit amet ultrices dolo.</div>
</div>

Make sure to repeat the same modifications in this code as well.

Pricing tables

Every Pricing table start with this code. In the code there is class "pricing-color1", this class is changing the main color of the table, there are three colors to use, "pricing-color1", "pricing-color2", "pricing-color3".

<div class="pricing-box pricing-color1">

You can add "featured" icon at the top of the table by adding "featured" class next to other classes as follow.

<div class="pricing-box pricing-color1 featured">
<div class="pricing-box pricing-color1">
    <div class="pricing-content">
        <div class="pricing-icon">
            <div class="special-gradiant"></div>
            <i class="htfy htfy-technology"></i>
        </div>
        <div class="pricing-title">Web Hosting</div>
        <div class="pricing-price">$4.8</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>Free Native Apps</li>
                <li>QNote Editor</li>
                <li>Offline File Access</li>
                <li class="not-included">Single Sign on</li>
                <li class="not-included">Unlimited Email accounts</li>
                <li class="not-included">Support 24/7</li>
                <li class="not-included">Linux server</li>
            </ul>
        </div>
        <div class="pricing-link">
            <a class="ybtn" href="#">Create New Account</a>
        </div>
    </div>
</div>

In the list items, the items that labeled as not included will have class name "not-included".

In WHMCS template, you will be using this list code when you add the ordering list, to be looks like the Html template exactly. The first part of the code "div" with class name "pricing-features" will be the info under the table title and next to the table title in the horizontal version.

<div class="pricing-features">
    <ul>
        <li>Great for Starting Website 1</li>
        <li>Small Websites 1</li>
        <li>Startups 1</li>
    </ul>
</div>
<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>Free Native Apps</li>
    <li>QNote Editor</li>
    <li>Offline File Access</li>
    <li class="not-included">Single Sign on</li>
    <li class="not-included">Unlimited Email accounts</li>
    <li class="not-included">Support 24/7</li>
    <li class="not-included">Linux server</li>
</ul>

Apps Icons & text

To change the image logo in the apps section located in hosting pages, replace the src="" url of the img tag with your url.

Also the app title can be changed in the same code as follow:

<div class="app-icon-holder app-icon-holder1 opened" data-id="1">
    <div class="app-icon"><img class="grayscale" src="images/wordpress.png" alt="wordpress"></div>
    <div class="app-title">Wordpress</div>
</div>

And for the details, you have to modify the following code:

<div class="app-details1 show-details">
    <div class="app-title">Wordpress Hosting</div>
    <div class="app-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</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>
    <div class="details-holder">
        <img class="photo" src="images/person1.jpg" alt="">
        <h4>Chris Walker</h4>
        <h5>CEO & CO-Founder @HelloBrandio</h5>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris egestas non ante non consequat. Aenean accumsan eros vel elit tristique, non sodales nunc luctus. Etiam vitae odio eget orci finibus auctor ut eget magna.</p>
    </div>
</div>

Footer - address & social

To edit the address in the footer, simply change the information in this code.

<div class="address-holder">
    <div class="phone"><i class="fas fa-phone"></i> 00 285 900 38502</div>
    <div class="email"><i class="fas fa-envelope"></i> hello@hostify.com</div>
    <div class="address">
        <i class="fas fa-map-marker"></i> 
        <div>City Avenue, Office 64,<br>
        Floor 6, Milbourne,<br>
        Australia.</div>
    </div>
</div>

To put a url to the social media icons, replace the # with your url.

<ul class="social-menu">
    <li><a href="#"><i class="fab fa-facebook"></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>
</ul>

Signup & Signin pages

To edit the slider details in the Signup and Signin pages, modify "signup.html" & "signin.html", for the WHMCS will be "clientregister.tpl" & "login.tpl".

"mapdate.html" page

We made this page to be the tool for creating and arranging the data in the servers map located in the "ourservers.html" page, follow the instructions in the "mapdate.html" page.

Note: don't upload the "mapdate.html" file to your website.

WHMCS Theme Installation

  • Copy "hostify" folder to WHMCS templates folder. Note: for RTL layout copy "hostify_rtl" folder instead of "hostify" folder.
  • Copy "hostify_cart", "hostify_horizontal_cart" and "standard_cart" folders to WHMCS templates/orderforms folder.
  • On your WHMCS admin panel, mouse over on "wrench" icon on top right of the page then go to System Settings > General Settings, then next to "System Theme" choose the template "Hostify Theme of WHMCS" and save changes.
  • In General Settings go to Ordering Tab, choose "Hostify 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.