“ FlatHost - Responsive Hosting Template ”

---

Table of Contents

1. HTML Structure
2. CSS Files and Structure
3. JavaScript
4. Installing WHMCS Template
5. PSD Files
6. Sources and Credits

---

A) HTML Structure - top

This theme is a fixed layout with three columns. All of the information within the main content area is nested within a div with an class of "wrapper".The general template structure is the same throughout the template. Here is the general structure.

If you would like to edit the color, font, or style of any elements in one of these columns, you would do the following:

	.wrapper a {
		color: #someColor;
	} 

If you find that your new style is not overriding, it is most likely because of a specificity problem. Scroll down in your CSS file and make sure that there isn't a similar style that has more weight.

I.E.

	body .wrapper a {
		color: #someColor;
	}

So, to ensure that your new styles are applied, make sure that they carry enough "weight" and that there isn't a style lower in the CSS file that is being applied after yours.

---

B) CSS Files and Structure - top

I'm using three CSS files in this theme. Bootstrap, Responisive CSS

And "hosting.css" contains all of the specific stylings for the page. The file is separated into sections using:

	
1. GLOBAL STYLES
1. HEADER
2. MAIN FEATURES
3. MORE FEATURES
4. TESTIMONIALS
5. PLANS AND PRICING
6. FOOTER / CONTACT US
7. MODAL SIGNIN / SIGHUP
8. CUSTOM MEDIA QUERIES

If you would like to edit a specific section of the site, simply find the appropriate label in the CSS file, and then scroll down until you find the appropriate style that needs to be edited.

---

C) JavaScript - top

This theme imports four Javascript files.

1. jQuery
2. Mordernizer
3. Bootstrap
4. jquery easing

1. jQuery is a Javascript library that greatly reduces the amount of code that you must write.
2. Mordernizer helps fallbacks for older browsers
3. Bootsrtap JS and Modelbox
4. Jquery for easing
5. In addition to the custom scripts, I have added page scroll script. that you can fnd at bottom just before closing of </body>

               $(function() {
                   $('.nav li a').bind('click',function(event){
                       var $anchor2 = $(this).parent();
   				    var $anchor = $(this);
   					$('.nav  li').removeClass('active');
                       $anchor2.addClass('active');
   					
                       $('html, body').stop().animate({
                           scrollTop: $($anchor.attr('href')).offset().top - 50
                       }, 1500,'easeInOutExpo');
                       /*
                       if you don't want to use the easing effects:
                       $('html, body').stop().animate({
                           scrollTop: $($anchor.attr('href')).offset().top
                       }, 1000);
                       */
                       event.preventDefault();
                   });
               });

---

D) Integrating WHMCS - top

Easily install Flathost Template to your WHMCS.

NOTE: THE WHMCS TEMPLATE PROVIDES MATCHING VISUAL STYLES WITH THE FLATHOST HTML TEMPLATE
So, The HTML files should be on the root /public_html folder
And the WHMCS should be installed in a subfolder or subdomain. eg: /clients or /billing

1. Upload the "flathost" Folder to your WHMCS/templates folder. (This is the main Template)
2. Upload the "/orderforms/flathost" folder to your server in WHMCS/templates/orderforms folder
3. Activate "Flathost" Template from WHMCS Admin Panel Setup => General Settings
4. Set "Flathost" as default Order form Template from Setup => General Settings => Ordering
5. If you have existing Products/Services, Then change orderform to "Flathost" Template in Product Group Settings. Setup => Product/Services => Product/Services => Edit Group => Use system default
6. Refresh the Client Area.

If you need to update the WHMCS Header and footer for WHMCS, Open header.tpl and footer.tpl inside /flathost folder and edit accordingly. You can also copy paste from the HTML page to match with your website.

PS: Contact me if you need the v5.x compatible version.

DOMAIN SEARCH AND LOGIN FORM

To make Domain Search and Login Popup work, You should change the Form action Path inside both form

        Eg: <form action="CHANGE_YOUR__URL_HERE"></form>
        

To get the form action URL, go to WHMCS => Admin => Utilities Tab => Integration Code. There you can see the URL for each form

If you have any doubts in implementing, please open a support ticket here : https://support.surjithctly.in/

---

E) PSD Files - top

I've included Fully layered and grouped one psd with this theme: Compatible with CS3+

1. Index.psd

If you'd like to change the theme. you can open index.psd and edit.

All Sections are grouped. just find the group in the PSD, then edit.

---

F) Sources and Credits - top

I've used the following resources.

• Framework by Bootstrap
• Images by Ciprian Popescu on Flickr / Creative COmmons
• Mordernizr Plugin
• Icons by Iconfinder
• Page scrolling by codrops

---

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.

Surjith SM

Go To Table of Contents

---