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.
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.
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">
<head>
<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='https://fonts.googleapis.com/css?family=Open+Sans:400,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="http://code.jquery.com/jquery.min.js"></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>
<![endif]-->
</head>
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">
<p>Login</p>
<input type="text" class="customer-login-input" name='login-input' placeholder="Login">
<p>Password</p>
<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>
</div>
<button class="btn btn-primary">Login</button>
</div><!-- modal-footer end -->
</div><!-- customer-login end -->
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">
<ul>
<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>
</ul>
</nav> <!-- end top-menu -->
</div> <!-- end top-menu-wrapper -->
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">
<ul>
<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>
<ul>
<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>
</ul>
</li>
<li><a href="about.html" data-description="our company">About</a>
<ul>
<li><a href="components.html">Theme components</a></li>
<li><a href="columns.html">Columns</a></li>
<li><a href="#">Third level navigation</a>
<ul>
<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>
</ul>
</li>
</ul>
</li>
<li><a href="blog.html" data-description="IT articles">Blog</a>
<ul>
<li><a href="single-article.html">Single article</a></li>
</ul>
</li>
<li><a href="contact.html" data-description="and quotes">Contact</a></li>
</ul>
</nav> <!-- end main-menu -->
index.html fileBase 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>
</ul>
<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>
</div>
<img class="slider-image" src="img/page-images/slider-image1.png" alt="Server">
</li>
</ul>
<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>
</ul>
</div>
</div>
</div> <!-- slider-container end -->
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.
<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 -->
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>
</form>
</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>
<ul>
<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>
</ul>
</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 -->
</footer>
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> <ul class="arrow"> <li>This will have an arrow</li> </ul> <ul class="check"> <li>This will have a check</li> </ul> <ul class="radial"> <li>This will have a blue radial</li> </ul> <ul class="check article"> <li>This will have a check and will be on a nice background</li> </ul>
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>
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>
</div>
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.
<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>
</ul>
<div class="tab-content">
<div class="tab-cont active" id="tab-one">
<p>Tab body number one</p>
</div>
<div class="tab-cont" id="tab-two">
<p>Tab body number two</p>
</div>
</div><!-- tab-content end -->
</div> <!-- tabs end -->
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">
<span>$10</span>
<p>per month</p>
</div><!-- plan-price end -->
<ul>
<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>
</ul>
<a href="#" class="button simple plan">Choose this plan</a>
</div><!-- plan-body end -->
</div><!-- plan-container end -->
</div><!-- span3 end -->
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. |
pie/pie.htcpie/pie.phppie/pie.js |
There is also a pie subfolder in css folder. Inside you will find 3 files Please note! The first file should work fine but if you run into problems please visit This link
|
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
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 |
contact.phpnewsletter.php |
PHP files to make contact form and newsletter signup work |
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.
/* GOOGLE MAP LOCATION FOR CONTACT PAGE ONLY IF MAP EXISTS
* ================= */
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,
});
map.addMarker({
lat: 40.714353,
lng: -74.005973,
});
}
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.
/* GOOGLE ANALYTICS
* ================= */
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-XXXXX-Y']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
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.
<?php $adminemail = "info@enteryouremailhere.com";
I've used the following images, icons or other files as listed.
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.