<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>TeraHoster Documentation</title>
<link href="assets/css/bootstrap.min.css" rel="stylesheet">
<link href="assets/css/style.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Maven+Pro:400,500,700,900" rel="stylesheet">
</head>
<body data-spy="scroll" data-target=".doc-nav" data-offset="100">
<div class="doc-masthead">
<div class="container">
<nav class="doc-nav">
<a class="doc-nav-item" href="#">Welcome</a>
<a class="doc-nav-item" href="#install">Install</a>
<a class="doc-nav-item" href="#costumize">Costumization</a>
<a class="doc-nav-item" href="#headers">Headers</a>
<a class="doc-nav-item" href="#logo">Logo</a>
<a class="doc-nav-item" href="#css">How to use CSS</a>
<a class="doc-nav-item" href="#parallax">Parallax</a>
<a class="doc-nav-item" href="#fa">FontAwesome Icons</a>
<a class="doc-nav-item" href="#whmcs"><strong>WHMCS DOCUMENTATION</strong></a>
</nav>
</div>
</div>
<br>
<br>
<div class="container">
<div id="title">
<img src="assets/IMG/logo2.png" class="img-responsive" alt="TeraHoster">
<h1>WELCOME</h1>
<p>Created: 07/27/2017</p>
<p>Team:ThemeKolor</p>
<p>Author:Pleurat</p>
<p>E-mail / Support: hello@themekolor.co</p>
</div>
</div>
<div id="content">
<div class="container">
<div class="content">
<div id="title">
<h2>Thank you for purchasing our Template :)</h2>
<p>We are very happy that you have chosen TeraHoster HTML5 Template to start your own web project. If you need any further assistance please contact our lovely team hello@themekolor.co</p>
<h3>Why TeraHoster</h3>
<p>TeraHoster is a clean,unique,colorful,professional and fully responsive Web Hosting Template.It looks perfect on all major browsers, tablets and smartphones.TeraHoster is definitely a great solution for your web project.</p>
</div>
</div>
</div>
</div>
<br>
<br>
<div id="template-features" class="container">
<div class="title">
<hr>
<h2>TeraHoster Features</h2>
<hr>
<ul>
<li>Mega Menu</li>
<li>Parallax Effect</li>
<li>Smooth Scroll</li>
<li>Uniqe and Clean Design</li>
<li>Colorful and Modern Design</li>
<li>17+ HTML files</li>
<li>Valid HTML5 Pages</li>
<li>3 Different Pricing Tables</li>
<li>4 Different Style Boxes</li>
<li>Fully Responsive</li>
<li>Well Dcoumented</li>
<li>Sticky Navigation</li>
<li>Content Animation</li>
<li>Fontawesome icons</li>
<li>Modern google fonts</li>
<li>Bootstrap 3.x</li>
<li>Lovely Support (24h/7)</li>
</ul>
</div>
</div>
<div id="install" class="container">
<div class="title">
<hr>
<h2>How to install</h2>
<hr>
<h3>1. FTP Upload</h3>
<ul>
<li>Connect to your host through FTP Manager (we recommend FileZilla)</li>
<li>Copy all files inside main_file folder and transfer to your root/host (<strong>public_html</strong>)</li>
</ul>
</div>
</div>
<div id="costumize" class="container">
<div class="title">
<hr>
<h2>2. How to costumize</h2>
<hr>
</div>
<div class="container">
<div class="content">
<h3>2.1 First of all you need a code editor</h3>
<p><b>2.2</b>To have it easier, you should get an advanced code editor such as Brackets, Sublime or Notepad ++. We recommend to use Bracket, which you can download it here <a href="www.bracket.io">Bracket page</a></p>
</div>
</div>
</div>
<div class="container">
<div class="title">
<hr>
<h2>3. Costumization</h2>
<h4>We have created different types of Style Boxes, Title ,Testimonials ,Headers etc, which are pretty easy to change and arrange.</h4>
<hr>
</div>
<div class="container">
<div class="content">
<h3>3.1 Default Title / Example</h3>
<br>
<img src="assets/IMG/content-title.jpg" class="img-responsive">
<br>
<h3>3.2 How to Edit This Title</h3>
<h4>First you have to find his HTML Code</h4>
<p>Open one of our pages (e.g Index.html) and search for this code:</p>
<div class="code">
<p><div class"universal-title"></p>
<p><h1> <b>What Makes Tera Hoster Awesome</b> <h1></p>
<p><p> <b>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eveniet libero sit labore.</b> <p></p>
<p></div></p>
</div>
<hr>
<p>*As it can be seen,you can edit text between<b><H1>...<H1></b> and <b><P>...<P></b></p>
</div>
</div>
</div>
<div id="headers" class="container">
<div class="title">
<hr>
<h2>4. How to Costumize Page Headers</h2>
<hr>
</div>
<div class="content">
<h3>Here's an example of what a header looks like</h3>
<br>
<img src="assets/IMG/HEADER.jpg" class="img-responsive">
</div>
<h3>4.1 How to costumize</h3>
<p>Editing header text is very easy.</p>
<p>Below you have his HTML code which you need to edit.You can do that by using Text Editor (in our case - bracket):</p>
<br>
<img src="assets/IMG/headercode.jpg" class="img-responsive" alt="TeraHoster">
<br>
<div class="content">
<p>*As it can be seen,it is very easy to edit the content inside Header 1.To do that you just need to edit text between <<b>h4</b>>...<<b>h4</b>> and <<b>li</b>>...<<b>li</b>></p>
</div>
<div id="logo" class="container">
<div class="title">
<hr>
<h2>5. Logo </h2>
<hr>
<h3>5.1 How to change Logo</h3>
<br>
<img src="assets/IMG/logo.jpg" class="img-responsive">
<br>
<br>
<div class="content">
<h3>5.2 How to change logo width</h3>
<p>Default logo width is <b>210px (optional)</b> but you can change it to <b>180px</b> or less,to do that you need to open Megamenu-Style.css</p>
<p>Search for Megamenu-Style.css: (main_file/style/Megamenu-Style.css),open and and search for these classes <b> nav.navbar .navbar-brand img.logo</b>.</p>
<br>
<img src="assets/IMG/logocss.jpg" class="img-responsive">
</div>
</div>
</div>
<br>
<br>
<hr>
<h1>6. How to use Style Sheets (CSS)</h1>
<hr>
<div id="css" class="content">
<p>Cascading Style Sheets (CSS) are now the standard way to define the presentation of your HTML pages, from fonts and colours to the complete layout of a page.</p>
<p>To open Style Sheets (<b>like Megamenu-Style.css,navigation.css,Default-Style.css,Summer-Style.css etc</b>) you need the same code editor as in HTML.</p>
</div>
<div class="content">
<h3>CSS Toplogy</h3><br>
<p>1.General Style<br> 1.1 Font Size and Color<br> 1.3 Transition Effect and Duration<br> 1.4 Buttons<br> 1.5 Links<br> 1.6 Hover Effect<br> 1.7 Animations<br> 1.8 FontAwesome Icons<br> 2. Preload<br> 2.1Here you can style our Page Preloader<br>
<br> 3.Top bar<br> 3.1 Contact info,social icons and My Account Button
<br> 4.Navbar
<br> 4.1 Mega Menu<br> 4.2 Default List Menu with target links<br>
<br> 5.Headers and Sliders<br> 5.1 Page Headers (dedicaed,cloud,wordpress etc) and Home Sliders<br>
<br> 6.Other Sections<br> 6.1 Here you can find Pricing Tables,Features,Faq,Testimonials etc<br> 7.Footer
<br></p>
</div>
<h2>6.1 Finding Our CSS Styles</h2>
<p>CSS Styles are inside TeraHoster.zip file (TeraHoster.zip/HTML/main_file/style/):</p>
<h4>Open <b>TeraHoster.zip</b> > <b>main_file</b> > <b>HTML</b> > <b>style</b></h4>
<br>
<h3>6.2 How to make changes</h3>
<div class="content">
<p>As it can be seen,we have two Different Home Pages and all use different Style Sheets.</p>
<hr>
<p>Index-Default.html use <b>Default-Style.css</b></p>
<p>Index-2.html use <b>Index2.css</b></p>
<hr>
<p>If we want to style <b>Index-Default</b>,then we need to open his Style Sheet (default-style.css).
<br>
<h4>Here's an example of what a default-style.css code looks like</h4>
<br>
<img src="assets/IMG/css.jpg" class="img-responsive" alt="TeraHoster">
</div>
<br>
<br>
<hr>
<h1 id="parallax">7. How to use Parallax Effect</h1>
<hr>
<div id="css" class="content">
<p>We are using one of the best bootstrap parallax plugin.</p>
<p>To know more about Parallax Effect and how to use it,please follow this official author link: http://pixelcog.github.io/parallax.js/</p>
</div>
<div id="fa" class="title">
<hr>
<h2>8. How to use FontAwesome icons</h2>
<hr>
<h4>Please follow this official fontawesome link: http://fontawesome.io/examples/</h4>
</div>
<br>
<div id="whmcs"></div>
<hr>
<h2>6.1 WHMCS THEME Costumization</h2>
<hr>
<p>We have made very easy to costumize WHMCS Theme.You need to edit only two files : Header.tpl and Footer.tpl (the edit procedure is the same as html pages)</p>
<p>Follow these simple steps :</p>
<h4>Open <b>TeraHoster.zip</b> > <b>whmcs-theme</b> > Inside of WHMCS Theme folder search for : <strong>header.tpl</strong> and <strong>footer.tpl</strong><br>once you find those files,you have to open with one of your text editors (notepad,notepad++,brackets etc),same as HTML pages.</h4>
<hr>
<h2>6.1.2 CSS File of WHMCS</h2>
<hr>
<p>Inside WHMCS Theme you will see a folder called "css",open that folder and you will se a lot of CSS Files.To make changes to TeraHoster you need to open "New-Style.css" . These are the files that you need to use if you want to make custom design for WHMCS Theme.</p>
<h3>6.2 How to edit content inside header.tpl and footer.tpl</h3>
<div class="content">
<h4>Edit Header.tpl</h4>
<p>For example if you want to change this text : <strong>WHAT MAKES TERAHOSTER AWESOME</strong>,then you have to open header.tpl</p>
<p>Open header.tpl and search for that text (see the example):
</p>
<img src="assets/IMG/whmcs.jpg" class="img-responsive" alt="">
<br>
<h3>How to edit footer.tpl</h3>
<h4>Footer costumization procedure is the same as header.tpl.Open footer.tpl and you can edit the content very easily.</h4>
<p><em>After the changes have been made and you have save it,finally you can install your template (if you allready have done that,you can transfer header.tpl and footer.tpl to whmcs-theme folder).</em></p>
</div>
<hr>
<h1 id="parallax">7. How to use Parallax Effect</h1>
<hr>
<div id="css" class="content">
<p>We are using one of the best bootstrap parallax plugin.</p>
<p>To know more about Parallax Effect and how to use it,please follow this official author link: http://pixelcog.github.io/parallax.js/</p>
</div>
<br>
<br>
<br>
<div class="container">
<div class="title">
<b>Note: The images used on the demo site are for demonstration purposes only and are not included in the download file.</b>
<p>If You need further information or assisstance,please contact our lovely team : hello@themekolor.co</p>
</div>
</div>
<br>
<section id="footer">
<div class="container footer">
<div class="col-sm-12">
<img src="assets/IMG/logo2.png" class="img-responsive">
<h4>All Rights Reserved - <a href="www.themekolor.co">ThemeKolor</a></h4>
</div>
</div>
</section>
</body>