Cloud Hoster Documentation

Cloud Hoster is a clean, simple design that brings a modern approach to standard hosting theme. It’s a mix of standard and unique solutions for a new, fresh and exciting result.

Send me a ticket with your question

× Quick info! Support forum is under construction. After it launches it will hold all information about themes and will be main channel for delivering support.

Thank you for purchasing my theme. If you have any questions that are beyond the scope of this help file, please feel free to email via my user page contact form here or jue the Big Blue Button above to send me a ticket. Thanks so much!

This theme is a fixed layout that uses Twitter Bootstrap to control the width of content. For good understanding of what is happening here I will go through whole one page code to explain exactly what (and why) is going on behing the scenes.

Head markup

After declearing html tyle - which is html5 - and language we have a place for the title of your site. Change it accordingly to your needs.

Next part of code loads fonts from the Google CDN. If you would like to change fonts you should include them here.

Since the theme uses Twitter Bootstrap for columns we are importing it next. This is followed by the main.css file which holds the main styles of this theme.

Next - since we are using selectivizr later on - we should load jQuery. The code loads latest version from Google CDN and if for any reason it cannot get it it will load a backup local version.

Lastly we have some conditional comments that kicks in if the user is using IE8. This will load ie.css - fixes for Internet Explorer, html5shiv - a script that enables html5 elements for old browsers, and selectivizr - used in this theme for enabling the usage of css pseudo classes.

<!DOCTYPE html>
<html lang="en">
        <meta charset="utf-8">
        <!-- Set latest rendering mode for IE -->
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

        <title>Cloud Hoster - Modern hosting provider responsive HTML5 and CSS3 premium template.</title>
        <!-- Loading fonts in the header makes it work in IE<9 -->
        <link href=',700,800' rel='stylesheet' type='text/css'>

        <!-- Including bootstrap styles - includes normalize and reset, grid system, layouts, responsive styles and media queries -->
        <link rel="stylesheet" href="css/bootstrap.min.css">
        <!-- Including main template styles -->
        <link rel="stylesheet" href="css/main.css">

        <!-- Loading jQuery liblary from CDN with a local fallback when CDN not responding.
         This is done here not at the bottom of the page to support selectivizr for IE -->
      <!-- Load jQuery from CDN -->
        <script src=""></script>
        <!-- Check if "window" is available. If not that means jQuery didn't load from CDN so instead use local version (otherwise skip) -->
        <script>window.jQuery || document.write('<script src="js/jquery-1.8.3.min.js"><\/script>')</script>

        <!-- If the browser version of IE is less than 9 load HTML5 & CSS3 polyfills -->
        <!--[if lt IE 9]>
            <link rel="stylesheet" href="css/ie.css">
            <script type="text/javascript" src="js/html5shiv.min.js"></script>
            <script type="text/javascript" src="js/selectivizr.min.js"></script>       

Body markup: Login form

Body starts with the client login overlay. If you would like to modify its content this is the place you would do it.

If you are not going to use a client login feature you can simply delete this whole section.

<!-- Popover modal box containing client login form -->
<div id="customer-login" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">

    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
        <h5 id="myModalLabel">Customer area login:</h5>
    </div><!-- modal-header end -->

    <div class="modal-body">
        <input type="text" class="customer-login-input" name='login-input' placeholder="Login">
        <input type="password" class="customer-login-input" name='password-input' placeholder="Password">
    </div><!-- modal-body end -->
    <div class="modal-footer">
        <div class="customer-help-links">
            <a href="#">Forgot your password?</a>
        <button class="btn btn-primary">Login</button>
    </div><!-- modal-footer end -->

</div><!-- customer-login end -->

Body markup: Top menu

Heads up! In this theme we have two menus in the header - the top menu and the main menu. Top menu contains support links and login link. Main menu contains pages links. In this section we are covering top menu.

This top menu streacches over whole width of website. It holds all your support menus and login button. If you are not using any of those you are free to delete this section. If you do that you may need to adjust the css a little to "pull up" the rest of the page. Search for the navigation secion in css to do that.

<div class="top-menu-wrapper">

    <nav class="top-menu container">

            <li><a href="#"><i class="icon-headphones icon-white"></i><strong> Phone support:</strong> 1-234-567-890</a></li>
            <li><a href="#"><i class="icon-comment icon-white"></i><strong> Live caht</strong> support</a></li>
            <li><a href="#"><i class="icon-envelope icon-white"></i><strong> Submit</strong> a ticket</a></li>
            <li><a href="#customer-login" data-toggle="modal"><i class="icon-user icon-white"></i><strong> Customer</strong> login</a></li>

    </nav> <!-- end top-menu -->

</div> <!-- end top-menu-wrapper -->

Body markup: Main menu

This is the main menu containing page links: Home, About, Services, Contact etc.

To create a menu item put an ul with list items in the nav tag with class="main-menu". Each item is a top level navigation button.

To create a dropdown menu simply put another ul with li in the first level li

For a third (and any next level - you can go as far as you wish) navigation level put another ul with li in the second level li

You don't need any classes od id's. The css file will take care of creating all of the menus.

<nav class="main-menu">
        <li><a href="index.html" data-description="welcome" class="current-menu-item">Home</a></li>
        <li><a href="hosting-plans.html" data-description="hosting plans">Servers</a>
                <li><a href="website-hosting.html">Website hosting</a></li>
                <li><a href="cloud-hosting.html">Cloud hosting (VPS)</a></li>
                <li><a href="dedicated-servers.html">Dedicated servers</a></li>
                <li><a href="reseller-hosting.html">Resellers hosting</a></li>
        <li><a href="about.html" data-description="our company">About</a>
                <li><a href="components.html">Theme components</a></li>
                <li><a href="columns.html">Columns</a></li>
                <li><a href="#">Third level navigation</a>
                        <li><a href="#">And you can</a></li>
                        <li><a href="#">Have even more</a></li>
                        <li><a href="#">Levels if you want</a></li>
        <li><a href="blog.html" data-description="IT articles">Blog</a>
                <li><a href="single-article.html">Single article</a></li>
        <li><a href="contact.html" data-description="and quotes">Contact</a></li>
</nav> <!-- end main-menu -->

Body markup: The slider

This part of code is only present in index.html file

Base wrapper for slider is a div with id of slider-container and a div with class of sequence-theme inside it.

Slides are built out of list items wrapped in ul with a class of sequence-canvas

Each slide contains severel elements - title, subtitle, another feature list and image. You can put anything you want inside a slider list.

<div id="slider-container" class="clearfix">

    <div class="sequence-theme">
        <div id="sequence">

            <img class="sequence-prev" src="img/bt-prev.png" alt="Previous Frame" />
            <img class="sequence-next" src="img/bt-next.png" alt="Next Frame" />

            <ul class="sequence-canvas">
                <li class="animate-in">
                    <h2 class="title">Need cloud hosting?</h2>
                    <h3 class="subtitle"><strong>No problem. We’ve got you covered!</strong> full power of a dedicated server for the fraction of a pirce!</h3>
                    <ul class="slider-info">
                        <li><img src="img/icons/16x16/dedicated-server.png" alt="feature"><strong>10</strong> GB disk space</li>
                        <li><img src="img/icons/16x16/bandwidth.png" alt="feature"><strong>5</strong> TB bandwidth</li>
                        <li><img src="img/icons/16x16/database.png" alt="feature"><strong>5</strong> MySQL databases</li>
                        <li><img src="img/icons/16x16/email.png" alt="feature"><strong>10</strong> mailboxes</li>
                    <div class="slider-cta">
                        <a href="#" class="button"><strong>Buy</strong> this plan now »</a>
                        <a href="#" class="button"><strong>View other</strong> plans »</a>
                    <img class="slider-image" src="img/page-images/slider-image1.png" alt="Server">

            <ul class="sequence-pagination">
                <li><img src="img/page-images/slider-image1.png" alt="Model 1" /></li>
                <li><img src="img/page-images/slider-image2.png" alt="Model 2" /></li>
                <li><img src="img/page-images/slider-image3.png" alt="Model 3" /></li>


</div> <!-- slider-container end -->

Body markup: Content

Content sits in an id content section. After that you have two options: all white page and a page that goes white/blue back and forth. To accomplish this do one of two things:

For a all white page: Put a div with white-section class and than the rest of content inside.

for blue/white put part of the code in a div with white-section class and some of the code in a a div with blue-section class. Do it as many times as you like.

any section you choose (blue or white) needs a container inside followed by a row and div with the number of columns you would like to occupy with the content.

For more info about columns and spacing visit Twitter Bootstrap page. It will work exactly the same here.
<section id="content">
    <div class="white-section">
        <div class="container">

            <div class="row">

              <-- content goes here -->

            </div><!-- row end -->

        </div><!-- container end -->

    </div><!-- white-section end -->

    <div class="blue-section">
        <div class="container">
            <div class="row">
              <-- content goes here -->

            </div><!-- row end -->

        </div><!-- container end -->

    </div><!-- blue-section end -->

</section><!-- content end -->

Body markup: Footer

In the footer we have 4 columns but you can easily change it using different span classes. For example change span3 to span4 and delete one section to change footer to three columns layout.

After that we have a newsletter singup and social icons. Feel free to cahnge all links and icons thare.

<footer id="footer">

    <div class="container">
        <div class="row">

            <div class="span3">
                <-- content goes here -->

            </div><!-- span3 end -->

            <div class="span3">
                <-- links goes here -->

            </div><!-- span3 end -->

            <div class="span3">
                <-- links goes here -->

            </div><!-- span3 end -->

            <div class="span3">
                <-- links goes here -->

            </div><!-- span3 end -->                      

        </div><!-- row end -->

        <div class="row">

            <div id="newsletter-wrapper" class="span8">
                <div id="newsletter">
                    <h5 class="visible-desktop">Sign-up to our newsletter:</h5>
                    <h5 class="hidden-desktop">Newsletter sign-up:</h5>

                    <form method='post' name='ContactForm' id='newsletterForm'>
                        <input type="text" class="input-box" name="user-email" placeholder="Enter your email.">
                        <button type='submit' class='myinputbtn' name='submitf' id="submitf">Sign up</button>

                </div><!-- newsletter end -->

            </div><!-- newsletter-wrapper end -->
            <div id="social-icons-wrapper" class="span4">
                <div id="social-icons">
                    <h5 class="visible-desktop">Connect via:</h5>

                        <li><a href="#"><img src="img/social-icon-1.png" alt="Twitter"></a></li>
                        <li><a href="#"><img src="img/social-icon-2.png" alt="Facebook"></a></li>
                        <li><a href="#"><img src="img/social-icon-3.png" alt="Google+"></a></li>
                        <li><a href="#"><img src="img/social-icon-4.png" alt="Linked In"></a></li>

                </div><!-- social-icons end -->

            </div><!-- social-icons-wrapper end -->
        </div><!-- row end -->

        <!-- this is a container for the newsletter fail or success message -->
        <div id='message_post2'></div><!-- message_post2 end -->

        <hr />

        <div class="row">

            <p class="span12">© Copyright 2013. Cloud Hoster Theme by Rafał Borowski. All rights reserved.</p>
        </div><!-- row end -->

    </div><!-- container end -->

In this section I will cover main components used in theme and now to use and customize them. We will cover pricing tables, buttons, lists, accordions, tabs etc. Since this theme is using Twitter Bootstrap if you need any help on creating collumns you can visite this site


Creating buttons is very easy. Just create an anhor tag with a class of button. This is your basic button. Now you are ready to customize it. To do that add more classes.

simple makes a one color button

shiny makes a button with gradient color

arrow adds an arrow to the button

small makes button small

medium makes button medium

large makes big button

<a href="#" class="button simple">This is a one color button</a>

<a href="#" class="button simple arrow">This is one color button with arrow</a>

<a href="#" class="button simple small">This is one color small button</a>

<a href="#" class="button shiny">This is nice button with gradient and shiny top border</a>

<a href="#" class="button shiny medium">This is nice medium button with gradient and shiny top border</a>

<a href="#" class="button shiny arrow">This is a button with gradient and shiny top border and arrow</a>

<a href="#" class="button shiny arrow large">This is a large button with gradient, shiny top border and arrow</a>


You have four different list types to select from. To choose desired format simply add one of the following classes to the ul tag:

star star bullets

arrow arrow bullets

check check bullets

bullet blue radial bullets

You can also add another class to give the list a background with list icon. Looks very nice in articles (hence the name of the class). To do that add another class to ul:

article adds background

<ul class="star">
  <li>This will have a star</li>

<ul class="arrow">
  <li>This will have an arrow</li>

<ul class="check">
  <li>This will have a check</li>

<ul class="radial">
  <li>This will have a blue radial</li>

<ul class="check article">
  <li>This will have a check and will be on a nice background</li>


There are four different alert types: Info, Success, Warning and Error. To create one simply add an alert class to any element. After that you are ready to control you alert type. To do that add another class:

allert-info info allert

allert-success success allert

allert-warning warning allert

allert-error error allert

<div class="alert alert-info">Info allert</div>

<div class="alert alert-success">Success allert</div>

<div class="alert alert-warning">Warning allert</div>

<div class="alert alert-error">Error allert</div>

Message box

There is also a message box. It's a simple box with white background to draw attention more. To create it just add a class of message-box to a div. You may also need to add clearfix class if you are using floating elements like floating buttons inside.

<div class="message-box">This is a message box</div>

<div class="message-box clearfix">

    <p>This is a message box but it has a floating to right button so it has to be clearfixed</p>

    <a href="#" class="button simple pull-right">Pulled right button</a>



Accordions are great for diffrent tyfes of data for example Q&A section. To create one use the code like this:

create a div with id of accordion You can give it other ID but remember it since it is you accordion wrapper and you will need it later.

inside create a div with a class of accordion-group

Inside that we have the heading and the body of container represented by to divs with following classes accordion-heading and accodrion-body

Heading: inside you should have an anchor with class of accordion-toggle. By default it is closed. You can open it by adding a class of opened. This anchor should also have a data-toggle="collapse" and the data-parent attribute set to accodrion wrapper ID - in our case data-parent="#accordion". The href can be set to any ID you want. It will be a trigger for body that will have the same ID as this href. In this case href="#collapseOne"

Body: Inside the body div should have a class of accordion-body collapse. If you set the header to be opened add another class - in. This div also heeds an ID that is the same as the href trigger ID in the header. In this example this was #collapseOne

Inside this div you need na div with a class of accordion-inner. Then you can add inside whatever elements you wish - from paragraphs, to heading, images etc.

Remember to change all triggers in headings and body in each item so they are unique for every pair

<div id="accordion" class="accordion">

    <div class="accordion-group">

        <div class="accordion-heading">

            <a class="accordion-toggle opened" data-toggle="collapse" data-parent="#accordion" href="#collapseOne">Accordion header number one</a>

        </div><!-- accordion-heading end -->

        <div id="collapseOne" class="accordion-body collapse in">

            <div class="accordion-inner">

                <p>Body of accodrion number one</p>

            </div><!-- accordion-inner end -->

        </div><!-- accordion-body end -->

    </div><!-- accordion-group end -->

    <div class="accordion-group">

        <div class="accordion-heading">

            <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">Accordion header number two</a>

        </div><!-- accordion-heading end -->

        <div id="collapseTwo" class="accordion-body collapse">

            <div class="accordion-inner">

                <p>Body of accodrion number two</p>

            </div><!-- accordion-inner end -->

        </div><!-- accordion-body end -->

    </div><!-- accordion-group end -->

</div><!-- accordion end -->


You can use tabs to show any data you wish. Simply close the content in a div with a class of tabs, add list navigation by setting the ul class to tab-nav and to any list item inside add a data-toggle="tab". Then connect anchors links with body tabs with the sam ID.

For the tab you want to be opened by default you need to add an active class to the list item.

<div class="tabs">
    <ul class="tab-nav">
        <li class="active"><a href="#tab-one" data-toggle="tab">Tab one</a></li>
        <li><a href="#tab-two" data-toggle="tab">Our Two</a></li>

    <div class="tab-content">

        <div class="tab-cont active" id="tab-one">
          <p>Tab body number one</p>


        <div class="tab-cont" id="tab-two">
          <p>Tab body number two</p>

    </div><!-- tab-content end -->

</div> <!-- tabs end -->

Pricing tables

To set a desired width use the column spans. For example for 1/3 of width use class span4. Inside put a div with plan-container class. Then inside you will need two divs - plan-head and plan-body.

To feature a plan add another class to plan-container class div. The class you need to add is featured-plan

Head: You can controll the look of thed by adding more classes: green to make it green, black to make it black. If you dont add any it will be blue by default.

You can also add a cloud icon by adding a cloud class.

Body:inside you need to put a div with a class of plan-head and a list with all features.

<div class="span3">
    <div class="plan-container">
        <div class="plan-head">

            <h4>Micro Plan</h4>
            <p>to begin with</p>

        </div><!-- plan-head end -->

        <div class="plan-body">
            <div class="plan-price">
                <p>per month</p>

            </div><!-- plan-price end -->

                <li><strong>10GB</strong> Web storage</li>
                <li><strong>100GB</strong> Monthly Traffic</li>
                <li><strong>Unlimited</strong> accounts</li>
                <li><strong>cPanel</strong> admin</li>
                <li><strong>Free</strong> set up</li>
                <li><strong>Free</strong> backup</li>

            <a href="#" class="button simple plan">Choose this plan</a>

        </div><!-- plan-body end -->

    </div><!-- plan-container end -->

</div><!-- span3 end -->

Please note! I am not going to cover a lot here since CSS file is divided into smaller secions with comments so you can easily work with it
Heads up! I'm using three CSS files in this theme. The first one is bootstrap css. It is kept separate to make it easier if you would like to update it or put a custom Bootstrap built there. Second one is the main.css. It holds all the main styles. The last one is ie.css and is used only in Internet Explorer 8 or less.


Here's a list of the stylesheet files I'm using with this template, you can find more information opening each file: Each file i well commented. You can search for example for header and your search will take you to appropriate comment that will start all header styles.

File Name Description
bootstrap.min.css Minified section of bootstrap - custom one. Covers only the necessary things. You can update it with your own custom built or update it to full version.
main.css Holds all of the styles. It is devided into secions to help navigate you through it and find things you need to update or change.
ie.css Fixes for our beloved Internet Explorer 8 or lower.

There is also a pie subfolder in css folder. Inside you will find 3 files, pie.js and pie.php. First one is a set of behaviors for IE8. It's there to support CSS3 selectors in IE8. The PHP file is provided for you in case you have to work around your server and provide the apropriate MIME type for behavior file. JS file is provided if none of the above files would work for you and you would have to switch to a JavaScript version.

Please note! The first file should work fine but if you run into problems please visit This link

CSS Structure

The second file contains all of the specific stylings for the page. The file is separated into sections using:

* Basic styles

  basic styles after reset/normalize in bootstrap

* Elements styles

  single element styles like buttons, boxes, accordions, icons etc.

* Bootstrap fixes

  some bootstraf fixes

* Basic header and and anvigation styles

  Top manu, main menu, logo etc.

* Modal popover login form styles

  Login overlay styles

* Homepage slider styles

  Basic styles for homepage content - testimonials, feature boxes etc.

* Page styles

  Generic page styles, single post styles, white/blue section etc.

* Staff styles

  Staff page styles

* Blog styles
  Blog page styles

* Comments styles

  styles for comments in the single article page

* Pricing plans styles
  All pricing plans styles

* Footer styles

  All footer styles

* Contact page styles

  Contact page styles


JavaScript Files

Vestibulum id ligula porta felis euismod semper. Curabitur blandit tempus porttitor. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.

Tag Description
bootstrap.min.js Custom Bootstrap minified file containing all necessary scripts for accordions, toggles, modals, transitions etc.
html5shiv.min.js Minified polyfill HTML5 IE enabling script
jquery-1.8.3.min.js Backup in case google CDN is out
selectivizr.min.js Enable pseudo classes for IE8
main.js Custom scripts like slider, gmaps, google analytics etc.
gmaps.js Google maps script
PHP files to make contact form and newsletter signup work

Customize Map

If you want to change the map in the contact page map go to main.js file and search for the following code and change: lat and lng which stands for latitude and longitude. You can find them on this page

Be sure to change them both for the GMaps function and addMarker function.

* ================= */
if ($("#map").exists()) {
    var map;
    map = new GMaps({
        div: '#map',
        lat: 40.714353,
        lng: -74.005973,
        zoom: 15,
        zoomControl: true,
        zoomControlOpt: {
            style : 'SMALL',
            position: 'TOP_LEFT'
        streetViewControl: false,

        lat: 40.714353,
        lng: -74.005973,

Google Analytics

If you want to change the map in the google analytics code go to main.js file and search for the following code and change: UA-XXXXX-Y to your tracking number.

  * ================= */
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-XXXXX-Y']);

(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);

Contact and Newsletter forms

If you want to change the email address go to newsletter.php and contact.php file and search for the following code and change: Cange the email to yours.

$adminemail = "";

I've used the following images, icons or other files as listed.


  1. Twitter Bootstrap
  2. jQuery
  3. Gmaps
  4. Selectivizr
  6. Sequence Slider
  7. FitVids JS


  1. Twitter Bootstrap


  10. Spoke Logo
  11. Zigzaq Logo
  12. Hosting Icons


  1. Open Sans and Bitters font
  2. Font Awesome
  3. Patterns
  4. CSS3PIE
  7. Template theme by Ivory

Once again, thank you so much for purchasing this theme. As I said at the beginning, I'd be glad to help you if you have any questions relating to this theme. No guarantees, but I'll do my 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.