Active Host

# Active Host HTML/CSS Documentation

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. Thanks so much!

# Documentation

## i. Overview

The theme comes with 6 example pages:

- index.html - the homepage
- hosting.html - the hosting page with blue background and plan comparison
- clients.html - the testimonial and client info page
- support.html - the page with purple background to get help
- blog.html - the blog overview page with featured posts
- single.html - the single blog post

Assets used in the theme are:

- Bootstrap
- Font Awesome
- Isotope
- ScrollTo
- jQuery
- custom.js - any custom jQuery code used in the template can be found here.

## ii. Changing Logo

#### The Image

The logo is an image (logo.png). You can replace this image with your own. The PSD for the example logo can be found in the PSD folder. Once replaced, you can edit the dimensions of the shown logo by editing the CSS (padding-left and height):

    .logo a{
    	display:block;
    	background:url(images/logo.png) top left no-repeat;
    	width:0;
    	height:26px;
    	padding-left:240px;
    	overflow:hidden;
    }

#### HTML

The following is the HTML which sets the logo. Change to your website title.

    <div class="logo"><a href="index.html">Active Host</a></div>

## iii. Homepage Slider

Each slide is designated by:

    <div class="row-fluid item active">

The class of item makes the div a slide item, the class active means this is the slide which will originally be shown. The class row-fluid is used from bootstrap as normal. The example slides contain plans are a mixture of hosting plans and other content although any content can be added within the slider item.

You can set various options for the slider by editing attributes on the following element (view bootstrap for details):

    <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">

## iv. Top Bar Dropdown Boxes

The top bar has dropdown boxes to shown login and support options. This is accomplished by:

    <li><a href="#" class="dropdown-toggle dropdown-bottom" data-toggle="supportbox"><span class="glyphicon glyphicon-headphones"></span> Support</a>

    <div class="hiddenbox" id="supportbox">

    </div>

    </li>

Note the data-toggle and the id of the hiddenbox are the same. Also note the dropdown-bottom class - this add the triangle to show the link can be used to shown more content.

## v. Domain Bar

The domain bar is an example section to search for domains and check price list. This is purely an example, it is not linked to any script to actually make it functional. To do so, you need to incorporate the script such as that of WHMCS.

Please note, not all price list items are shown on smaller browsers. Make sure the information you need to be shown does not have the class hidden-xs.

You can copy the domain bar into other pages by copying the whole code from <div class="wrapper" id="domainbar"> to the corresponding closing </div>. Also make sure to include the price list and bulk search content if you want them included.

## vi. CSS Structure

The CSS file style.css includes comments to show what each section is used for:

    /* Main Header Area */

In addition, the classes and IDs used are often representative.

## vii. Built-in Colour Options

Changing colours on this template is rather easy because a lot of the effects such as the plans used rgba rather than set colours. That means if you change the background for the plans, the darker overlay should still look good. In addition to this set up there are various example colours built in:

#### Plan Colours

    <div class="plan red featured">

You can change to blue, red, purple, green as the examples. If you search the CSS you can also add your own.

#### Content Block Background

    <div class="wrapper purple-content">

You can change to blue-content, green-content and red-content as well.

#### Content Options Bar

    <div class="wrapper purple" id="optionbar">

You can change to blue, red, purple, green as the examples.

#### Content Headings

    <div class="content-heading white">

If you want white text on the content heading, make sure to add the class white.

#### Post Widgets

    <div class="widget green">

You can change to blue, red, purple, green as the examples.

## viii. Content Block Background Patterns

Content blocks can be given patterns. The way it is currently set up is like so in CSS:

    .green-content, #featuredplans.green-content{
    	background:rgba(67,170,146,0.7) url(images/green-pattern.jpg) repeat-x bottom;
    	border-top:1px solid rgba(0,0,0,0.6)
    }
    .green-content:before, #featuredplans.green-content:before{
    	background:url(images/patterns/pentagon.png) repeat;}

The first section gives the background colour in rgba form, therefore 70% opacity in this case. It also gives the border colour and the pattern image for the top or bottom (the banded seperator).

The second section adds a background image which repeats under the 70% opacity colour. Using this method can add your own pattern image and colour. You can then alter the opacity to achieve the desired effect.

## ix. Options Bar

The options bar is a name for the bar on the hosting, blog, clients and support page. It allows the user to quickly toggle which content is visible:

    <div class="wrapper" id="optionbar">
        	<div class="container">
            	<ul>
                	<li class="active"><a href="#" class="hosting-toggle" data-toggle="hostingfeatures"><i class="fa fa-cog"></i>Our Features</a></li>
    				<li><a href="#" class="hosting-toggle" data-toggle="hostingcompare"><i class="fa fa-table"></i>Plan Comparison</a></li>
    				<li><a href="#" class="hosting-toggle" data-toggle="hostingguarantee"><i class="fa fa-thumbs-up"></i>Our Guarantee</a></li>
                </ul>
            </div>
        </div>

The active class makes the linked content box visible first. The data-toggle attribute is used to determine which content block is linked to this. For example data-toggle="hostingfeatures" means the following div with ID hostingfeatures is toggled by this link:

    <div class="row mainfeatures dropdown-box active" id="hostingfeatures"></div>

## x. Bootstrap Icons and Font Awesome

You can use boostrap and font awesome icons in this template. To do so:

#### Bootstrap

    <span class="glyphicon glyphicon-cloud"></span>

#### Font Awesome

    <i class="fa fa-twitter"></i>

More details can be found on their websites. Links are given at the start of this document.

## xi. Filterable Content

You can add a filterable grid content by the following:

The control buttons:

    <div class="suboptions">
                        <div class="btn-group">
                          <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
                            Filter <span class="caret"></span>
                          </button>
                          <ul class="dropdown-menu" role="menu" id="testimonialfilter">
                            <li><a href="#all" data-filter="*">All</a></li>
                            <li><a href="#business" data-filter=".business">Business</a></li>
                            <li><a href="#personal" data-filter=".personal">Personal</a></li>
                          </ul>
                        </div>
                    </div>

The grid:

    <div class="row" id="testimonialgrid">
                        <div class="col-sm-3 col-xs-6 personal">
                            <div class="post">
                                <a href="#">Website</a>
                                <h3>"Simply the best"</h3>
                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam aliquam massa quis mauris sollicitudin...</p>
                                <div class="testimonial-image"><img alt="testimonialpost" src="images/testimonials/1.jpg" ></div>
                                <small>website.com</small>
                             </div>
                        </div>
    </div>

Note the bolded text. The data-filter attribute should be equal to the selector you are using to select the relevant div. For example * will show all and .personal will find those with a class of personal.

Once you have the HTML, the js is as follows:

    var $container = $('#clientwebsites').isotope({});
    	$('#clientwebsitesfilter li a').on( 'click', function(e) {
    	  var textAlt = $(this).text();
    	  $(this).parent().parent().parent().find("button").html(textAlt+' <span class="caret"></span>');
    	  e.preventDefault();
    	  var filterValue = $(this).attr('data-filter');
    	  $container.isotope({ filter: filterValue});
    	});

The grid given by id (#clientwebsites) is used to call the isotope function. When a control button link is clicked (given by #clientwebsitesfilter li a), the filter is activated.