Introduction

Thank you very much for purchasing our latest HTML template. This documentation will give you an overview of the features and possibilities that come with it and how to customize them to suit your requirements. Please note that a basic understanding of both HTML and CSS are required in order to utilize this template. Don't hesitate to contact us via the template support form if you are in need of assistance.

Changelog

The changelog describes the updates that have been released for this template so far. Please exercise caution when updating to a newer version of this template should you've already modified a file listed below. Feel free to contact us if you require more information about an update and its changes.

Version 1.3

  • Changes
    1. Added domain names product page
    2. Added SSL certificates product page
    3. Added PHP contact form with ReCaptcha support
    4. Added various main and custom style declarations
    5. Added custom term selector script for product boxes
    6. Fixed module styling issues in WHMCS integration
  • Files
    1. template/php
    2. template/js/main.js
    3. template/js/main.min.js
    4. template/css/main.css
    5. template/css/main.min.css
    6. template/contact.php
    7. template/products-domain-names.html
    8. template/products-ssl-certificates.html
    9. whmcs/cloudhub-7.4.1.zip

Version 1.2

  • Changes
    1. Fixed styling error with custom search input fields
  • Files
    1. template/js/main.js
    2. template/js/main.min.js

Version 1.1

  • Changes
    1. Improved gesture detection on touch inputs
    2. Added custom WHMCS integration based on version 7.4.1
  • Files
    1. template/js/main.js
    2. template/js/main.min.js
    3. whmcs/cloudhub-7.4.1.zip

WHMCS

This template provides a custom WHMCS integration which implements the header and footer elements with the version 7.4.1 default template. Other content elements are only usable with the original static template and are not available in the WHMCS version. It is recommended to deploy your site using separate environments and integrate style changes with your WHMCS installation.

Installation

Unpack the archive cloudhub-7.4.1.zip locally or directly on your server and move its content to the templates directory of your WHMCS installation. Make sure to set the correct permissions required for your web server and navigate to Setup → General Settings to activate the template.

Customization

The header and footer elements can be easily customized using the respective template files found in cloudhub/template/tpl as well as the footer color class in the body template file. The color scheme can be changed using the custom template and its style sheets.

Products

Products should generally be presented using the default standard cart template to ensure a consistent and functional layout. Basic markup as shown in the code example can further enhance the presentation.

More detailed pricing options should be implemented using the main template and not the WHMCS integration. 

								<strong>8 GB</strong> ECC Memory
								<strong>6 Core</strong> Intel Processor
								<strong>80 GB</strong> RAID 10 SSD Storage
								<strong>4 TB</strong> Premium Bandwidth
								<strong>1 Gbit</strong> Network Uplink<br>
								<small>Dedicated IPv4 Address</small>
								<small>Powered by OpenStack</small>
								<small>99.99% Uptime SLA</small>
								<small>Load Balancing</small>

Header

The page header element is required to display important information like the logo and navigation items giving the user an immediate guidance about the content available on your site. Its behavior and appearance can be customized using the custom.css file and a variety of different classes listed below. 

						<header id="header">
							<div class="container">
								<a class="logo" href="index.html">
									<img src="img/logos/header-light.png">
								</a>
								<nav>
									<ul class="nav-primary">
										<li>
											<a href="features.html">Features</a>
										</li>
									</ul>
									<ul class="nav-secondary">
										<li>
											<a href="contact.html">Contact</a>
										</li>
									</ul>
								</nav>
							</div>
						</header>

Behavior

The header is displayed as a fixed element by default, always moving with the content independent of the scroll position. Alternative behaviors are static, always shown above the content, and dynamic, which hides the header automatically whenever the page is scrolled downwards.

  • header-static
  • header-dynamic

Styles

The default background of the header is the primary color and can be changed using the custom.css file or one of the following classes. Additionally, a fixed or scroll based shadow can be displayed.

  • header-light
  • header-gray
  • header-dark
  • header-shadow
  • header-shadow-scroll

Logo

Using an image is the recommended way to display the site logo. However, text logos are supported as well which can be customized using a variety of icons and text color classes. Apply the class logo-text-baseline to align the logo with the primary navigation menu instead of vertically centering it. 

								<a class="logo" href="index.html">
									<div class="logo-text logo-text-baseline">
										Cloudhub
									</div>
								</a>

Navigation

The site navigation is divided into primary and secondary lists to differentiate their importance and visibility. The primary navigation supports drop down menus and should be used as the main navigation point. You can force the mobile navigation by adding header-nav-overlay to the header class. 

								<header id="header" class="header-nav-overlay">
								</header>

Content

The content section is the most important part of this template providing the widest range of functionality in regards to customization and content management. Each page requires at least one content-row element followed by a container in which any content should be placed. 

						<section class="content-row">
							<div class="container">
							</div>
						</section>

Styles

The overall appearance of every content row can be easily customized with one or more of the following styling classes. Each assigned class affects the color and appearance of other additional classes being used.

  • content-row-gray
  • content-row-dark
  • content-row-color
  • content-row-clouds
  • content-row-border-top
  • content-row-border-bottom

Height

Each content row only uses the space required by its content. On larger devices the row height can be stretched in order to give the content more importance. Following classes are available to customize the height.

  • content-row-half-height
  • content-row-full-height

Content Headers

The content header gives the user an indication about the information available on a page or within a content row. Title and description should be brief but informative without distracting from the actual content. Style and alignment can be customized using the classes listed below. 

						<header class="content-header">
							<h2>
							</h2>
							<p>
							</p>
						</header>

Styles

The content header is sized to be displayed within content rows by default but can be modified in various ways by the following classes.

  • content-header-small
  • content-header-large
  • content-header-uppercase

Alignment

The following classes can be used to change the overall alignment of the header and its content. The content header is centered by default.

  • content-header-align-left
  • content-header-align-right

Content Backgrounds

Content rows and sliders can be extended using image, video or icon backgrounds to provide additional visual information to the user. Examples of different implementations can be found throughout the template. Details regarding the styling and scaling of backgrounds are listed below. 

						<section class="content-row">
							<div class="container">
							</div>
							<div class="content-background">
								<img src="uploads/gallery-1.jpg">
							</div>
						</section>

Styles

Scale and visibility of backgrounds as well as a simple parallax scrolling effect can be easily configured using one of the following classes.

  • content-background-blur
  • content-background-light
  • content-background-scale
  • content-background-scroll

Elements

Backgrounds are restricted to certain elements listed below. Each element may come with additional limitations depending on its type or size.

  • i
  • img
  • video
  • iframe

Notifications

Notifications allow you to prompt the user with an important piece of information ideally located in the upper part of the page and outside of the content container. The appearance of the notification bar can be customized with either the custom.css file or one of the contextual variation classes listed below. 

						<section id="notification" data-dismissible="true">
							<div class="container">
								<p>
								</p>
							</div>
						</section>

Appearance

The notification bar can be displayed with different background colors providing a visual indication of its current context.

  • notification-error
  • notification-warning
  • notification-success

Options

data-dismissible - Creates a dismiss icon to enable the user to hide the notification bar after it has been displayed.

data-title - Name of the cookie used when creating a persistent dismissible notification. Requires the following data option to be defined.

data-expires - Expiration value given in days or as date object of how long to hide the current notification from the user if previously dismissed.

Columns

This template uses the powerful and fully responsive CSS flexbox layout to align content in multiple columns. Examples for the use of columns can be found throughout the template, while specific examples are available in the template file elements-columns.html 

						<div class="column-row">
							<div class="column-25">
							</div>
							<div class="column-25">
							</div>
							<div class="column-50">
							</div>
						</div>

Widths

Column classes are defined by their width relative to the parent container. Each column row should add up to exactly 100 percent unless the flexible column class is being used within a column row.

  • column-20
  • column-25
  • column-30
  • column-33
  • column-40
  • column-50
  • column-60
  • column-66
  • column-70
  • column-75
  • column-80
  • column-flex

Alignment

The columns in each row can be aligned horizontally and vertically using one of the following classes within the column-row class attribute.

  • align-left-top
  • align-left-center
  • align-left-bottom
  • align-right-top
  • align-right-center
  • align-right-bottom
  • align-center
  • align-center-top
  • align-center-bottom
  • content-sidebar-left
  • content-sidebar-right

Flex

The class column-row-flex-width can be added to exclusively use flexible column widths with automated spacing. The specific example can be found in the template file knowledge-base.html starting at line 305. 

								<div class="column-row column-row-flex-width">
									<div class="column-flex">
									</div>
									<div class="column-flex">
									</div>
								</div>

Sidebars

Column rows can be utilized to display content sidebars with an alignment independent to their position in the DOM. For an example on how to use sidebars please take a look at the template file blog-sidebar.html 

								<div class="column-row">
									<div class="column-66">
									</div>
									<div class="column-33 content-sidebar-left">
									</div>
								</div>

Sliders

Content sliders are ideal to display a large amount of information in an attractive and compact format while offering a variety of different customization options. For detailed examples on how to implement and customize sliders please have a look at the template file elements-sliders.html 

						<section class="content-row">
							<div class="content-slider">
								<a class="slide" href="">
									<div class="container">
									</div>
									<div class="content-background">
										<img src="uploads/gallery-1.jpg">
									</div>
								</a>
								<a class="slide" href="">
									<div class="container">
									</div>
									<div class="content-background">
										<img src="uploads/gallery-2.jpg">
									</div>
								</a>
							</div>
						</section>

Animations

Slide transitions can be customized for both content and background using one of the following options in the content-slider class attribute.

  • animate-container-fade
  • animate-container-slide
  • animate-container-scale
  • animate-background-fade
  • animate-background-slide
  • animate-background-scale 
								<div class="content-slider animate-container-fade">
									<div class="slide">
									</div>
									<div class="slide">
									</div>
								</div>

Options

data-nav - Navigation displayed below the slides. Circular links will be shown should no labels be defined for each of the slides.

data-nav-directional - Directional navigation displayed as arrows left and right of the slides. Omitted for devices with smaller screen widths.

data-rotation - Automatic rotation of slides given in seconds. The rotation is terminated as soon as the user interacts with the navigation.

data-title - Label used for the standard slider navigation. Needs to be defined for each slide individually.

Masonry

Masonry is a layout technique that dynamically arranges child elements in a brickwork like grid using the optimal positions based on the vertical space available. This template uses a modified version of Bricks to achieve the grid layout. More examples can be found in the template file elements-masonry.html 

								<div class="grid">
									<div class="grid-item">
										<img src="uploads/gallery-1-small.jpg">
									</div>
									<div class="grid-item">
										<img src="uploads/gallery-2-small.jpg">
									</div>
									<div class="grid-item">
										<img src="uploads/gallery-3-small.jpg">
									</div>
									<div class="grid-item">
										<img src="uploads/gallery-4-small.jpg">
									</div>
								</div>

Options

data-grid-columns - Number of columns the grid layout should be displayed in. Dynamically adapts to changes in screen width.

data-grid-gap - Horizontal and vertical spacing set in pixels between columns and elements within the grid layout.

Pricing

Product pricing can be presented using either product boxes, sliders or classic tables. Each style brings its own advantages depending on what type of product is being offered. Examples for all available layouts and customizations can be found in the template file elements-pricing.html

Product Box 

								<div class="product-box">
									<div class="product-header">
										<h4>
										</h4>
										<p>
										</p>
									</div>
									<div class="product-price">
										<span class="term">
										</span>
									</div>
									<div class="product-features">
										<ul>
											<li>
											</li>
										</ul>
										<ul>
											<li>
											</li>
										</ul>
									</div>
									<div class="product-order">
										<a class="button" href="">
										</a>
									</div>
								</div>

The product box is the most common type of layout and can be used for almost every product. The different sections within the product box can be reorganized or removed without affecting the general layout. Groups of product boxes should be displayed using a column-row using a center bottom alignment in case their content varies in height.

Appearance

You can add the class product-box-popular to a product box including an additional element as shown below to give a specific plan or product more importance in an overview. 

								<div class="product-box product-box-popular">
									<div class="product-popular">
									</div>
								</div>

Product Slider 

								<div class="product-slider">
									<ul>
										<li>
											<span class="value"></span>
											<span class="label"></span>
										</li>
										<li>
											<div class="price">
												<span class="value"></span>
												<span class="label"></span>
											</div>
											<a class="button" href="">
											</a>
										</li>
									</ul>
									<ul>
										<li>
											<span class="value"></span>
											<span class="label"></span>
										</li>
										<li>
											<div class="price">
												<span class="value"></span>
												<span class="label"></span>
											</div>
											<a class="button" href="">
											</a>
										</li>
									</ul>
								</div>

The product slider is ideal to display a large number of similar packages with few changing features in a compact way. Very useful for products that are paid for in chunks like bandwidth or storage.

Styles

Product sliders resize dynamically based on the device screen width. You can also force smaller layouts, for example when displaying within columns, by using one of the following classes.

  • product-slider-small
  • product-slider-medium

Options

data-sync - Identifier to synchronize two or more sliders with an identical number of packages. Useful for tabs showing different billing periods.

Product Table 

								<table>
									<caption>
									</caption>
									<thead>
										<tr>
											<th></th>
											<th></th>
											<th></th>
										</tr>
									</thead>
									<tbody>
										<tr>
											<td></td>
											<td class="highlight"></td>
											<td><a class="button" href=""></a></td>
										</tr>
									</tbody>
								</table>

Classic pricing tables are perfect to present a larger number of available plans with just a few key features. Adding the thead element to the top enables the responsive table mode improving the user experience.

Layout

The default table layout resizes its column based on their content. Adding the following class enables the fixed table layout.

  • table-layout-fixed

Galleries

The gallery displays images in either a column or slider layout and enables common file types to be viewed in full screen when used in combination with links. Examples for all available gallery layouts are located in the template file elements-galleries.html 

						<div class="gallery">
							<ul>
								<li>
									<a href="uploads/gallery-1.jpg"><img src="uploads/gallery-1-small.jpg"></a>
								</li>
								<li>
									<a href="uploads/gallery-2.jpg"><img src="uploads/gallery-2-small.jpg"></a>
								</li>
								<li>
									<a href="uploads/gallery-3.jpg"><img src="uploads/gallery-3-small.jpg"></a>
								</li>
								<li>
									<a href="uploads/gallery-4.jpg"><img src="uploads/gallery-4-small.jpg"></a>
								</li>
							</ul>
						</div>

Layouts

Following layout classes are supported by the gallery container. Please note that the compact gallery layout should have an even number of pictures in relation to the column count in order to be displayed correctly.

  • gallery-slider
  • gallery-compact
  • gallery-3-columns
  • gallery-4-columns

Titles

You are able to display a short image title or description in the full screen view by adding the title attribute to the img element. 

								<div class="gallery">
									<ul>
										<li>
											<a href=""><img src="" title=""></a>
										</li>
									</ul>
								</div>

Forms

This template integrates with all common form elements including custom styling and alignment options for the best cross-browser user experience. Please have a look at the template file elements-forms.html for detailed examples of all available form elements. 

						<form class="form-full-width" method="post" action="">
							<div class="form-row">
								<label for="form-user">User</label>
								<input id="form-user" type="text" name="user">
							</div>
							<div class="form-row">
								<label for="form-password">Password</label>
								<input id="form-password" type="password" name="password">
							</div>
							<div class="form-row">
								<button>Submit</button>
							</div>
						</form>

Notifications

Following notifications can be used to inform the user about important changes or results after the form as been sent to the server.

  • form-error
  • form-success 
								<form method="post" action="">
									<div class="form-row form-error">
										<ul>
											<li>
											</li>
										</ul>
									</div>
								</form>

Tabs

Tabs allow you to display pieces of related information in discrete portions while giving an overview and letting the user decide what is relevant to them. You have the choice between the classic, switch or collapse style to display your content. Examples can be found in the template file elements-tabs.html 

						<div class="tab-group">
							<div class="tab-item" data-title="Tab 1">
							</div>
							<div class="tab-item" data-title="Tab 2">
							</div>
							<div class="tab-item" data-title="Tab 3">
							</div>
						</div>

Navigation

You can link to your tabs from other pages by defining a unique id for each tab item within a tab group and pointing to it using the hash symbol. Adding the class active to an item will display it first on page load.

Options

data-title - Label used for the tab item in the group navigation.

Styles

  • tab-group-switch-style
  • tab-group-collapse-style

Icons

This template implements the great icon collections Font Awesome and Material Icons to improve contextual interactions and provide additional means of decoration and styling. Icons use the i element and require and identifier as class attribute or content depending on which set is currently in use.

The following classes can be used to modify the size and margin of icons, while color and alignment should be adjusted using text classes.

  • icon-feature
  • icon-feature-large
  • icon-feature-inline
  • icon-left
  • icon-right 
								<a href="client-login.html">
									<i class="fa fa-lock"></i> Client Login
								</a>
							
								<a href="client-login.html">
									<i class="material-icons">lock</i> Client Login
								</a>

Credits

Many thanks to the creators of the following third party resources which were essential in creating this template.