<!Doctype html>
<html lang="en-us">
<head>
<meta charset="utf-8">
<title>EcoHosting - Responsive HTML5 Hosting and WHMCS Template</title>
<meta name="description" content="EcoHosting - Multipurpose Hosting HTML Template">
<meta name="author" content="ThemeLooks">
<meta name="copyright" content="ThemeLooks">
<link rel="shortcut icon" type="image/x-icon" href="assets/images/favicon.png" />
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css" rel="stylesheet">
<link rel="stylesheet" href="assets/css/documenter_style.css" media="all">
<script src="assets/js/jquery.js"></script>
<script src="assets/js/jquery.scrollTo.js"></script>
<script src="assets/js/jquery.easing.js"></script>
<script>
document.createElement('section');
var duration = '500',
easing = 'easeInOutExpo';
</script>
<script src="assets/js/script.js"></script>
<style>
html {
background-color: rgb(243, 243, 243);
color: #383838;
}
::-moz-selection {
background: #444444;
color: #DDDDDD;
}
::selection {
background: #444444;
color: #DDDDDD;
}
#documenter_sidebar #documenter_logo {
color: #303030;
font-weight: 700;
font-size: 24px;
display: table-cell;
vertical-align: middle;
height: 155px;
text-align: center;
text-decoration: none;
text-shadow: 1px 1px 3px rgba(255, 255, 255, 0.3);
}
#documenter_sidebar #documenter_logo span {
color: #6aaf08;
}
a {
color: #0000FF;
}
.btn {
border-radius: 3px;
}
.btn-primary {
background-image: -moz-linear-gradient(top, #0088CC, #0044CC);
background-image: -ms-linear-gradient(top, #0088CC, #0044CC);
background-image: -webkit-gradient(linear, 0 0, 0 0088CC%, from(#DDDDDD), to(#0044CC));
background-image: -webkit-linear-gradient(top, #0088CC, #0044CC);
background-image: -o-linear-gradient(top, #0088CC, #0044CC);
background-image: linear-gradient(top, #0088CC, #0044CC);
filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#0088CC', endColorstr='#0044CC', GradientType=0);
border-color: #0044CC #0044CC #bfbfbf;
color: #FFFFFF;
}
.btn-primary:hover,
.btn-primary:active,
.btn-primary.active,
.btn-primary.disabled,
.btn-primary[disabled] {
border-color: #0088CC #0088CC #bfbfbf;
background-color: #0044CC;
}
hr {
border-top: 1px solid #EBEBEB;
border-bottom: 1px solid #FFFFFF;
}
#documenter_sidebar,
#documenter_sidebar ul a {
background-color: #DDDDDD;
color: #222222;
}
#documenter_sidebar ul a {
-webkit-text-shadow: 1px 1px 0px #EEEEEE;
-moz-text-shadow: 1px 1px 0px #EEEEEE;
text-shadow: 1px 1px 0px #EEEEEE;
}
#documenter_sidebar ul {
border-top: 1px solid #AAAAAA;
}
#documenter_sidebar ul a {
border-top: 1px solid #EEEEEE;
border-bottom: 1px solid #AAAAAA;
color: #444444;
}
#documenter_sidebar ul a:hover {
background: #444444;
color: #DDDDDD;
border-top: 1px solid #444444;
}
#documenter_sidebar ul a.current {
background: #444444;
color: #DDDDDD;
border-top: 1px solid #444444;
}
#documenter_copyright {
display: block !important;
visibility: visible !important;
}
/* CHANGE LOG ITEM */
.changelog--item p {
font-size: 16px;
}
.changelog--item pre {
font-family: 'Courier New';
font-size: 14px;
line-height: 18px;
background-color: #f5f5f5;
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(50%, #f5f5f5), color-stop(50%, #e6e6e6));
background-image: -webkit-linear-gradient(#f5f5f5 50%, #e6e6e6 50%);
background-image: linear-gradient(#f5f5f5 50%,#e6e6e6 50%);
background-size: 36px 36px;
border: 1px solid #e9e9e9;
padding-left: 5px;
}
</style>
</head>
<body class="documenter-project-radiofalgun">
<div id="documenter_sidebar">
<a href="#documenter_start" id="documenter_logo"><span><i class="fa fa-tree"></i> Eco</span>Hosting</a>
<ul id="documenter_nav">
<li><a class="current" href="#documenter_content">START</a></li>
<li><a href="#documenter_cover">INTRODUCTION</a></li>
<li><a href="#installation" title="INSTALLATION">INSTALLATION</a></li>
<li><a href="#template_structure" title="TEMPLATE STRUCTURE">TEMPLATE STRUCTURE</a></li>
<li><a href="#html_structure" title="HTML STRUCTURE">HTML STRUCTURE</a></li>
<li><a href="#css_files_and_structure" title="CSS FILES AND STRUCTURE">CSS FILES AND STRUCTURE</a></li>
<li><a href="#javascript" title="JAVASCRIPT">JAVASCRIPT</a></li>
<li><a href="#source_and_creadits" title="SOURCE AND CREADITS">SOURCE AND CREADITS</a></li>
<li><a href="#change_logs" title="CHANGE LOGS">CHANGE LOGS</a></li>
<li><a href="#faq" title="FAQ">FAQ</a></li>
</ul>
<div id="documenter_copyright">Copyright © <a href="http://www.themelooks.com/">ThemeLooks</a> 2016</div>
</div>
<div id="documenter_content">
<div id="banner">
<img src="assets/images/banner.png" alt="" />
</div>
<section id="documenter_start">
<h1>EcoHosting</h1>
<h2>Responsive HTML5 Hosting and WHMCS Template</h2>
<div id="documenter_buttons">
<a href="http://themeforest.net/user/themelooks#contact" class="btn btn-primary btn-large">Contact</a>
<a href="http://themelooks.com/" class="btn btn-primary btn-large">Support</a>
</div>
<hr>
<ul>
<li>created: 28/05/2016</li>
<li>by: <a href="http://themelooks.com/">ThemeLooks</a></li>
<li><a href="http://themelooks.com/">www.themelooks.com</a>
</li>
<li>email: <a href="mailto:support@themelooks.com">support@themelooks.com</a>
</li>
</ul>
<p>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!</p>
<h2>How to get help:</h2>
<hr class="notop">
<p>We will respond to buyers' questions via the contact form on our profile.</p>
<p>We run support 24/7. You can expect a response within 24 hours.</p>
<ul>
<li style="margin: 0px; padding: 0px; border: 0px; outline: 0px; font-weight: 700; font-style: inherit; font-family: inherit; vertical-align: baseline; color: rgb(125, 192, 29)"><strong>Support requests are for:</strong></li>
<li>- Help using templates</li>
<li>- Instructions setting up templates</li>
<li style="margin-bottom: 15px;">- Bug reports and fixes</li>
<li style="margin: 0px; padding: 0px; border: 0px; outline: 0px; font-weight: 700; font-style: inherit; font-family: inherit; vertical-align: baseline; color: rgb(255, 0, 0);"><strong>Support requests aren’t for:</strong></li>
<li>- Help with 3rd party plugins</li>
<li>- Integration of 3rd party plugins</li>
<li>- Free Customization Requests of our templates</li>
</ul>
</section>
<section id="documenter_cover">
<h5><strong>EcoHosting</strong> is a <strong>Responsive HTML5 Hosting and WHMCS Template</strong> designed for All kinds of <strong>Domain and Hosting Business</strong>. It's an HTML5 template based on Bootstrap 3.3.7. Also included <strong>30 WHMCS Template</strong> based on <strong>WHMCS 7.5.1.</strong> Anyone can easily update/edit this template to follow our <strong>Well Sorted Documentation.</strong></h5>
<h2>Main Features of "EcoHosting":</h2>
<ul>
<li>- Bootstrap v3.3.7 Ready</li>
<li>- <strong>WHMCS v7.5.1</strong> Ready</li>
<li>- <strong>3 Homepage</strong> Version</li>
<li>- <strong>Total 3 WHMCS Templates</strong> with 10 Different Color Version</li>
<li>- Retina Ready</li>
<li>- <strong>Total 51</strong> HTML Files</li>
<li>- 10 Default Color with Color Switcher</li>
<li>- Modern and Clean Design</li>
<li>- Fully Responsive</li>
<li>- <strong>Working Contact Form</strong> Integrated With Validetor</li>
<li>- <strong>Mailchimp Integrated</strong> With Validetor</li>
<li>- Twitter Widget Integrated</li>
<li>- Modern Cross Browser Support</li>
<li>- W3C Validate Code</li>
</ul>
<h2>Other Features of "EcoHosting":</h2>
<ul>
<li>- Google Fonts</li>
<li>- FontAwesome Icons</li>
<li>- Well Documented</li>
<li>- and much more features…</li>
</ul>
</section>
<section id="installation">
<div class="page-header">
<h3>INSTALLATION</h3>
<hr class="notop">
</div>
<div class="alert alert-danger">
<p>Our item included two types of Templates. One is the HTML Template to show your pricing/product/services and another one is the WHMCS Template for client area.</p>
<p>So, you have to use both templates for your website and need to link up manually all of your pricing/product/services with WHMCS (from HTML Template to WHMCS Template).</p>
</div>
<h2>HTML Template:</h2>
<ul>
<li>Open up your FTP Manager and connect to your Hosting</li>
<li><i>Browse to required directory (Normally public_html)</i></li>
<li>Upload the files inside <strong><i>'/EcoHostingV1C1'</i></strong> folder.</li>
</ul>
<h2>WHMCS Template:</h2>
<p><strong>You'll get the step by step instruction in whmcs folder readme.txt file.</strong></p>
</section>
<section id="template_structure">
<div class="page-header">
<h3>TEMPLATE STRUCTURE</h3>
<hr class="notop">
</div>
<ul style="font-weight: bold;">
<li style="margin: 5px 15px;">./main_files
<ul style="margin-top: 0;">
<li style="margin: 5px 15px;">/html-templates
<ul style="margin-top: 0;">
<li style="margin: 5px 15px;">/version-1</li>
<li>___ /index.html</li>
<li>___ /shared-hosting.html</li>
<li>___ /reseller-hosting.html</li>
<li>___ /vps-hosting.html</li>
<li>___ /dedicated-hosting.html</li>
<li>___ /domains.html</li>
<li>___ /about.html</li>
<li>___ /affiliate.html</li>
<li>___ /testimonial.html</li>
<li>___ /blog.html</li>
<li>___ /blog_sidebar-left.html</li>
<li>___ /blog_sidebar-right.html</li>
<li>___ /faq.html</li>
<li>___ /contact.html</li>
<li>___ /login.html</li>
<li>___ /signup.html</li>
<li>___ /404.html</li>
<li style="margin: 5px 15px;">/version-2</li>
<li>___ /index.html</li>
<li>___ /shared-hosting.html</li>
<li>___ /reseller-hosting.html</li>
<li>___ /vps-hosting.html</li>
<li>___ /dedicated-hosting.html</li>
<li>___ /domains.html</li>
<li>___ /about.html</li>
<li>___ /affiliate.html</li>
<li>___ /testimonial.html</li>
<li>___ /blog.html</li>
<li>___ /blog_sidebar-left.html</li>
<li>___ /blog_sidebar-right.html</li>
<li>___ /faq.html</li>
<li>___ /contact.html</li>
<li>___ /login.html</li>
<li>___ /signup.html</li>
<li>___ /404.html</li>
<li style="margin: 5px 15px;">/version-3</li>
<li>___ /index.html</li>
<li>___ /shared-hosting.html</li>
<li>___ /reseller-hosting.html</li>
<li>___ /vps-hosting.html</li>
<li>___ /dedicated-hosting.html</li>
<li>___ /domains.html</li>
<li>___ /about.html</li>
<li>___ /affiliate.html</li>
<li>___ /testimonial.html</li>
<li>___ /blog.html</li>
<li>___ /blog_sidebar-left.html</li>
<li>___ /blog_sidebar-right.html</li>
<li>___ /faq.html</li>
<li>___ /contact.html</li>
<li>___ /login.html</li>
<li>___ /signup.html</li>
<li>___ /404.html</li>
</ul>
</li>
<li style="margin: 0 15px;">/WHMCS
<ul style="margin-top: 0;">
<li>/EcoHostingV1<br><br></li>
<li>/EcoHostingV2<br><br></li>
<li>/EcoHostingV3</li>
<li>/orderforms</li>
</ul>
</li>
</ul>
</li>
</ul>
</section>
<section id="html_structure">
<div class="page-header">
<h3>HTML STRUCTURE</h3>
<hr class="notop">
</div>
<p>The "EcoHosting" template is a responsive HTML template based on Bootstrap 3.3.7. The structure based on a flexible grid that lets you change HTML pages quickly and logically with a nestable system.</p>
<p>If you would like to edit the layout of any elements in whole template, you would do the following:</p>
<p>Open any '.html' or, '.css', so that is extremely easy to change any html markup and css attributes. Simply find the related and commented heading in the html or, css file and make your magic.</p>
<img src="assets/images/Screenshot_html.png" alt="" />
<img src="assets/images/Screenshot_html2.png" alt="" />
</section>
<section id="css_files_and_structure">
<div class="page-header">
<h3>CSS FILES AND STRUCTURE</h3>
<hr class="notop">
</div>
<p style="margin: 18px 0px; padding: 0px; border: 0px; outline: 0px; font-family: Arial, verdana, arial, sans-serif; vertical-align: baseline; line-height: 1.5em; color: rgb(88, 88, 88); background-color: rgb(243, 243, 243);">
"EcoHosting" using the following CSS files:</p>
<p class="paragraph-style-one"><span>css/font-awesome.min.css</span><br> The css file for font-awesome icons. To see all the available icons and instructions on how to use them click <a href="http://fortawesome.github.io/Font-Awesome/icons/" target="_blank">here</a>
</p>
<p class="paragraph-style-one"><span>css/bootstrap.min.css</span><br> The main responsive grid stylesheets, from Bootstrap 3 framework. It is recommended to make any changes/additions to style.css and keep bootsrap.css and bootsrap-theme.css as it are. In this way, you can easily upgrade the grid framework when Bootstrap releases an update.</p>
<p class="paragraph-style-one"><span>css/jquery-ui-custom.min.css</span> <br> The main css file for vps slider</p>
<p class="paragraph-style-one"><span>css/owl.carousel.css</span><br> The css file for owl carousel.</p>
<p class="paragraph-style-one"><span>css/animate.min.css</span><br> The css file for slider animations.</p>
<p class="paragraph-style-one"><span>style.css</span> <br> The main css file</p>
<p class="paragraph-style-one"><span>css/responsive-style.css</span> <br> The main css file for responsive styles.</p>
<p class="paragraph-style-one"><span>css/theme-color-1.css<br>css/theme-color-2.css<br>css/theme-color-3.css<br>css/theme-color-4.css<br>css/theme-color-5.css<br>css/theme-color-6.css<br>css/theme-color-7.css<br>css/theme-color-8.css<br>css/theme-color-9.css<br>css/theme-color-10.css</span> <br> The main css file for color scheme.</p>
<img src="assets/images/Screenshot_html3.png" alt="" />
<img src="assets/images/Screenshot_css1.png" alt="" />
<img src="assets/images/Screenshot_css2.png" alt="" />
</section>
<section id="javascript">
<div class="page-header">
<h3>JAVASCRIPT</h3>
<hr class="notop">
</div>
<p class="paragraph-style-one"><span>js/jquery-3.1.0.min.js</span><br> The jQuery Framework</p>
<p class="paragraph-style-one"><span>js/jquery-ui-custom.min.js</span><br> The script that using for custom sliders.</p>
<p class="paragraph-style-one"><span>js/jquery.ui.touch-punch.min.js</span><br> The script that using for touch actions.</p>
<p class="paragraph-style-one"><span>js/bootstrap.min.js</span><br> The main js file that hook the supported scripts of Bootstrap 3 framework </p>
<p class="paragraph-style-one"><span>js/jquery.validate.min.js</span><br> The script that using for form validation</p>
<p class="paragraph-style-one"><span>js/owl.carousel.min.js</span><br> The script that using for slider</p>
<p class="paragraph-style-one"><span>js/jquery.waypoints.min.js</span><br> The script that using for scroll events</p>
<p class="paragraph-style-one"><span>js/jquery.counterup.min.js</span><br> The script that using for counter</p>
<p class="paragraph-style-one"><span>js/retina.min.js</span><br> The script that using for hight resolution images</p>
<p class="paragraph-style-one"><span>https://platform.twitter.com/widgets.js</span><br> The script that using for twitter posts</p>
<p class="paragraph-style-one"><span>js/vps-plans.js</span><br> The main script for the vps plans pricing data</p>
<p class="paragraph-style-one"><span>js/main.js</span><br> The main script for the template</p>
<img src="assets/images/Screenshot_html4.png" alt="" />
<img src="assets/images/Screenshot_js.png" alt="" />
</section>
<section id="source_and_creadits">
<div class="page-header">
<h2>SOURCE AND CREADITS</h2>
<hr class="notop">
</div>
<h4>Photos:</h4>
<ul>
<li><strong><i>All '<u>images</u>' used on the demo site is for demonstration purposes only and are not included in the main download file.</i></strong></li>
<li><strong>All Images Collected From <i><a href="https://images.google.com/">'Google Image Search'</a></i></strong></li>
</ul>
<h4>Fonts Used:</h4>
<ul>
<li><strong>Google Fonts (Raleway)</strong> - <a href="http://www.google.com/webfonts">http://www.google.com/webfonts</a></li>
<li><strong>Font Awesome</strong> - <a href="http://fontawesome.io/">http://fontawesome.io/</a></li>
</ul>
<h4>Frameworks / Libraries:</h4>
<ul>
<li><strong>jQuery</strong> - <a href="https://jquery.com/">https://jquery.com/</a></li>
<li><strong>Twitter Bootstrap</strong> - <a href="http://getbootstrap.com">http://getbootstrap.com</a></li>
</ul>
<h4>Plugins Used:</h4>
<ul>
<li><strong>jQuery Validation</strong> - <a href="http://jqueryvalidation.org/">http://jqueryvalidation.org/</a></li>
<li><strong>Waypoints</strong> - <a href="https://github.com/imakewebthings/waypoints/">https://github.com/imakewebthings/waypoints/</a></li>
<li><strong>jQuery CounterUP</strong> - <a href="https://github.com/bfintal/Counter-Up">https://github.com/bfintal/Counter-Up</a></li>
<li><strong>Owl Carousel</strong> - <a href="https://github.com/OwlFonk/OwlCarousel">https://github.com/OwlFonk/OwlCarousel</a></li>
<li><strong>jQuery UI Touch Punch</strong> - <a href="https://github.com/furf/jquery-ui-touch-punch">https://github.com/furf/jquery-ui-touch-punch</a></li>
<li><strong>jQuery UI Custom</strong> - <a href="https://jqueryui.com/">https://jqueryui.com/</a></li>
<li><strong>Twitter Fetcher Plugin</strong> - <a href="https://github.com/jasonmayes/Twitter-Post-Fetcher">https://github.com/jasonmayes/Twitter-Post-Fetcher</a></li>
<li><strong>RetinaJS Plugin</strong> - <a href="https://github.com/imulus/retinajs">https://github.com/imulus/retinajs</a></li>
<li><strong>Twitter Widget</strong> - <a href="https://platform.twitter.com/widgets.js">https://platform.twitter.com/widgets.js</a></li>
</ul>
</section>
<section id="change_logs">
<div class="page-header">
<h3>CHANGE LOGS</h3>
<hr class="notop">
</div>
<!-- Changelog Item Start -->
<div class="changelog--item">
<p><strong>08 August, 2018 - Version 2.9 (<a href="changelogs/changelog-2.9.txt" target="_blank">Changelog</a>)</strong></p>
<pre>// # List of updates
// ------------------------------
*. WHMCS template updated to be compatible with latest <strong>"WHMCS Version 7.6.0"</strong>
</pre>
</div>
<!-- Changelog Item End -->
<!-- Changelog Item Start -->
<div class="changelog--item">
<p><strong>24 April, 2018 - Version 2.8 (<a href="changelogs/changelog-2.8.txt" target="_blank">Changelog</a>)</strong></p>
<pre>// # List of updates
// ------------------------------
*. WHMCS template updated to be compatible with latest <strong>"WHMCS Version 7.5.1"</strong>
</pre>
</div>
<!-- Changelog Item End -->
<!-- Changelog Item Start -->
<div class="changelog--item">
<p><strong>04 April, 2018 - Version 2.7 (<a href="changelogs/changelog-2.7.txt" target="_blank">Changelog</a>)</strong></p>
<pre>// # List of updates
// ------------------------------
*. WHMCS template updated to be compatible with latest <strong>"WHMCS Version 7.5.0"</strong>
</pre>
</div>
<!-- Changelog Item End -->
<!-- Changelog Item Start -->
<div class="changelog--item">
<p><strong>17 January, 2018 - Version 2.6 (<a href="changelogs/changelog-2.6.txt" target="_blank">Changelog</a>)</strong></p>
<pre>// # List of updates
// ------------------------------
*. WHMCS template updated to be compatible with latest <strong>"WHMCS Version 7.4.2"</strong>
</pre>
</div>
<!-- Changelog Item End -->
<!-- Changelog Item Start -->
<div class="changelog--item">
<p><strong>22 November, 2017 - Version 2.5 (<a href="changelogs/changelog-2.5.txt" target="_blank">Changelog</a>)</strong></p>
<pre>// # List of updates
// ------------------------------
*. WHMCS template updated to be compatible with latest <strong>"WHMCS Version 7.4.1"</strong>
</pre>
</div>
<!-- Changelog Item End -->
<!-- Changelog Item Start -->
<div class="changelog--item">
<p><strong>11 October, 2017 - Version 2.4 (<a href="changelogs/changelog-2.4.txt" target="_blank">Changelog</a>)</strong></p>
<pre>// # List of updates
// ------------------------------
*. WHMCS template updated to be compatible with latest <strong>"WHMCS Version 7.3.0"</strong>
</pre>
</div>
<!-- Changelog Item End -->
<!-- Changelog Item Start -->
<div class="changelog--item">
<p><strong>29 January, 2017 - Version 2.3 (<a href="changelogs/changelog-2.3.txt" target="_blank">Changelog</a>)</strong></p>
<pre>// # List of updates
// ------------------------------
*. WHMCS template updated to be compatible with latest <strong>"WHMCS Version 7.2"</strong>
</pre>
</div>
<!-- Changelog Item End -->
<!-- Changelog Item Start -->
<div class="changelog--item">
<p><strong>18 January, 2017 - Version 2.2 (<a href="changelogs/changelog-2.2.txt" target="_blank">Changelog</a>)</strong></p>
<pre>// # List of updates
// ------------------------------
*. PHPMailer security update
</pre>
</div>
<!-- Changelog Item End -->
<p style="font-size: 16px;"><strong>28 December, 2016 - Version 2.1 (<a href="changelogs/changelog-2.1.txt">Changelog</a>)</strong></p>
<pre style="font-family: 'Courier New'; font-size: 14px; line-height: 18px; background-color: #f5f5f5; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(50%, #f5f5f5), color-stop(50%, #e6e6e6)); background-image: -webkit-linear-gradient(#f5f5f5 50%, #e6e6e6 50%); background-image: linear-gradient(#f5f5f5 50%,#e6e6e6 50%); background-size: 36px 36px; border: 1px solid #e9e9e9; padding-left: 5px;">// # List of updates
// ------------------------------
[*] PHPMailer security updated
</pre>
<p style="font-size: 16px;"><strong>19 December, 2016 - Version 2.0 (<a href="changelogs/changelog-2.0.txt">Changelog</a>)</strong></p>
<pre style="font-family: 'Courier New'; font-size: 14px; line-height: 18px; background-color: #f5f5f5; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(50%, #f5f5f5), color-stop(50%, #e6e6e6)); background-image: -webkit-linear-gradient(#f5f5f5 50%, #e6e6e6 50%); background-image: linear-gradient(#f5f5f5 50%,#e6e6e6 50%); background-size: 36px 36px; border: 1px solid #e9e9e9; padding-left: 5px;">// # List of updates
// ------------------------------
[+] WHMCS template updated to be compatible with latest <strong>"WHMCS Version 7.1"</strong> (For more information on changes of file to file, please look at it on <a href="https://github.com/WHMCS/templates-six/compare/v7.0.1-release.1...v7.1.0-release.1">github</a>)
[-] We stop offering an order form template with WHMCS for WHMCS 7.x, as you can use any standard WHMCS order form.
</pre>
<p style="font-size: 16px;"><strong>08 October, 2016 - Version 1.3 (<a href="changelogs/changelog-1.3.txt">Changelog</a>)</strong></p>
<pre style="font-family: 'Courier New'; font-size: 14px; line-height: 18px; background-color: #f5f5f5; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(50%, #f5f5f5), color-stop(50%, #e6e6e6)); background-image: -webkit-linear-gradient(#f5f5f5 50%, #e6e6e6 50%); background-image: linear-gradient(#f5f5f5 50%,#e6e6e6 50%); background-size: 36px 36px; border: 1px solid #e9e9e9; padding-left: 5px;">// # List of updates
// ------------------------------
[*] VPS Slider Code Updated. (Files affected: vps-hosting.html, main.js, vps-plans.js)
[+] WHMCS template and orderforms updated to be compatible with latest <strong>"WHMCS Version 7"</strong>
</pre>
<p style="font-size: 16px;"><strong>20 September, 2016 - Version 1.2</strong></p>
<pre style="font-family: 'Courier New'; font-size: 14px; line-height: 18px; background-color: #f5f5f5; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(50%, #f5f5f5), color-stop(50%, #e6e6e6)); background-image: -webkit-linear-gradient(#f5f5f5 50%, #e6e6e6 50%); background-image: linear-gradient(#f5f5f5 50%,#e6e6e6 50%); background-size: 36px 36px; border: 1px solid #e9e9e9; padding-left: 5px;">// # List of updates
// ------------------------------
[+] domain search form now redirects to whmcs domain search form (files affected: <strong>index.html, domains.html</strong>)
[+] login form now lets you login to whmcs from your html login page (files affected: <strong>login.html</strong>)
[+] added tawk live chat widget (files affected: <strong>main.js</strong>)
</pre>
<p style="font-size: 16px; margin-bottom: 5px;"><strong>HOW TO UPDATE THE "DOMAIN SEARCH FORM"?</strong></p>
<p style="font-size: 14px; margin-top: 0; margin-bottom: 0;">1. Open 'index.html' file</p>
<p style="font-size: 14px; margin-top: 0; margin-bottom: 0;">2. Find the comment <strong><i>"<!-- Offer Form Start -->"</i></strong></p>
<p style="font-size: 14px; margin-top: 0;">3. Compare the code with the new one below by you or, with this <a href="https://www.diffchecker.com/diff" target="_blank">tool</a> then replace necessary changes</p>
<pre style="font-family: 'Courier New'; font-size: 14px; line-height: 18px; background-color: #f5f5f5; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(50%, #f5f5f5), color-stop(50%, #e6e6e6)); background-image: -webkit-linear-gradient(#f5f5f5 50%, #e6e6e6 50%); background-image: linear-gradient(#f5f5f5 50%,#e6e6e6 50%); background-size: 36px 36px; border: 1px solid #e9e9e9; padding-left: 5px;"><strong><!-- Offer Form Start -->
<form action="http://billing.ywhmcs.com/domainchecker.php?systpl=EcoHostingV1C1" method="post" id="domainSearchForm">
<div class="row reset-gutter">
<div class="col-sm-6">
<input class="form-control" name="domain" type="text" placeholder="Enter your domain">
</div>
<div class="col-sm-3 select-box">
<select class="form-control" name="ext">
<option>.com</option>
<option>.net</option>
<option>.org</option>
<option>.info</option>
<option>.us</option>
<option>.eu</option>
</select>
</div>
<div class="col-sm-3">
<button class="btn submit-button-custom" type="submit">SEARCH</button>
</div>
</div>
</form>
<!-- Offer Form End --></strong></pre>
<p style="font-size: 14px; margin-top: 0; margin-bottom: 0;">4. Follow the steps about 1, 2, 3 for 'domains.html' file</p>
<p style="font-size: 16px; margin-bottom: 5px;"><strong>HOW TO UPDATE THE "LOGIN FORM"?</strong></p>
<p style="font-size: 14px; margin-top: 0; margin-bottom: 0;">1. Open 'login.html' file</p>
<p style="font-size: 14px; margin-top: 0; margin-bottom: 0;">2. Find the comment <strong><i>"<!-- Login Area Start -->"</i></strong></p>
<p style="font-size: 14px; margin-top: 0;">3. Compare the code with the new one below by you or, with this <a href="https://www.diffchecker.com/diff" target="_blank">tool</a> then replace necessary changes</p>
<strong>HTML:</strong>
<pre style="font-family: 'Courier New'; font-size: 14px; line-height: 18px; background-color: #f5f5f5; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(50%, #f5f5f5), color-stop(50%, #e6e6e6)); background-image: -webkit-linear-gradient(#f5f5f5 50%, #e6e6e6 50%); background-image: linear-gradient(#f5f5f5 50%,#e6e6e6 50%); background-size: 36px 36px; border: 1px solid #e9e9e9; padding-left: 5px;"><strong><!-- Login Area Start -->
<div id="login">
<div class="container">
<form action="http://billing.ywhmcs.com/dologin.php?systpl=EcoHostingV1C1" method="post" id="loginForm">
<div class="form-group">
<label for="loginEmail">Email address *</label>
<input type="email" name="username" class="form-control" id="loginEmail" placeholder="Email">
</div>
<div class="form-group">
<label for="loginPassword">Password *</label>
<input type="password" name="password" class="form-control" id="loginPassword" placeholder="Password">
</div>
<label for="loginRemember" class="checkbox"><input type="checkbox" name="rememberme" id="loginRemember"> Remember Me</label>
<p class="help-block clearfix">
<button type="submit" class="btn submit-button">login</button>
<a href="http://billing.ywhmcs.com/pwreset.php"><i class="fa fa-fw fa-key"></i>Forget Password ?</a>
</p>
</form>
</div>
</div>
<!-- Login Area End --></strong></pre>
<p style="font-size: 16px; margin-bottom: 5px;"><strong>HOW TO UPDATE/ADD "TAWK LIVE CHAT WIDGET"?</strong></p>
<p style="font-size: 14px; margin-top: 0; margin-bottom: 0;">1. Open 'main.js' file</p>
<p style="font-size: 14px; margin-top: 0; margin-bottom: 0;">2. Find the comment <strong><i>"* COLOR SWITCHER"</i></strong></p>
<p style="font-size: 14px; margin-top: 0;">2. Insert the below code before the comment <strong><i>"* COLOR SWITCHER"</i></strong></p>
<strong>JS:</strong>
<pre style="font-family: 'Courier New'; font-size: 14px; line-height: 18px; background-color: #f5f5f5; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(50%, #f5f5f5), color-stop(50%, #e6e6e6)); background-image: -webkit-linear-gradient(#f5f5f5 50%, #e6e6e6 50%); background-image: linear-gradient(#f5f5f5 50%,#e6e6e6 50%); background-size: 36px 36px; border: 1px solid #e9e9e9; padding-left: 5px;"><strong>/* ------------------------------------------------------------------------- *
* LIVE CHAT WIDGET
* ------------------------------------------------------------------------- */
var Tawk_API = Tawk_API || {},
Tawk_LoadStart = new Date(),
$tawk = document.createElement("script");
$tawk.async=true;
$tawk.src='https://embed.tawk.to/57dfd4b85dc7a25e92808cf6/default';
$tawk.charset='UTF-8';
$tawk.setAttribute('crossorigin','*');
$($tawk).appendTo('body');</strong></pre>
<p style="font-size: 16px;"><strong>2016 August 28 - Version 1.1</strong></p>
<pre style="font-family: 'Courier New'; font-size: 14px; line-height: 18px; background-color: #f5f5f5; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(50%, #f5f5f5), color-stop(50%, #e6e6e6)); background-image: -webkit-linear-gradient(#f5f5f5 50%, #e6e6e6 50%); background-image: linear-gradient(#f5f5f5 50%,#e6e6e6 50%); background-size: 36px 36px; border: 1px solid #e9e9e9; padding-left: 5px;">// # List of updates
// ------------------------------
[-] removed old twitter api
[+] added new twitter widget
</pre>
<p style="font-size: 16px; margin-top: 60px; margin-bottom: 5px;"><strong>HOW TO UPGRADE THE TWITTER WIDGET?</strong></p>
<p style="font-size: 14px; margin-top: 0;">1. Please, find the comments and include below <strong>'markup'</strong> in <strong>'blog.html'</strong> file:</p>
<pre style="font-family: 'Courier New'; font-size: 14px; line-height: 18px; background-color: #f5f5f5; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(50%, #f5f5f5), color-stop(50%, #e6e6e6)); background-image: -webkit-linear-gradient(#f5f5f5 50%, #e6e6e6 50%); background-image: linear-gradient(#f5f5f5 50%,#e6e6e6 50%); background-size: 36px 36px; border: 1px solid #e9e9e9; padding-left: 5px;"><del><!-- Tweets Widget Start -->
<div class="widget latest-tweets-widget">
<h4 class="widget-title">Latest Tweets</h4>
<div id="tweets" data-twitter-id="697371631589711872" data-posts="2"></div>
</div>
<!-- Tweets Widget End --></del>
becomes:
<strong><!-- Twitter Widget Start -->
<div class="widget latest-tweets-widget">
<h4 class="widget-title">Latest Tweets</h4>
<div id="sidebarTwitter" data-user-name="themelooks"></div>
</div>
<!-- Twitter Widget End --></strong>
</pre>
<p style="font-size: 14px; margin-top: 0;">and</p>
<pre style="font-family: 'Courier New'; font-size: 14px; line-height: 18px; background-color: #f5f5f5; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(50%, #f5f5f5), color-stop(50%, #e6e6e6)); background-image: -webkit-linear-gradient(#f5f5f5 50%, #e6e6e6 50%); background-image: linear-gradient(#f5f5f5 50%,#e6e6e6 50%); background-size: 36px 36px; border: 1px solid #e9e9e9; padding-left: 5px;"><del><!-- ====Twitter Fetcher Plugin Script==== -->
<script src="js/twitterFetcher.min.js"></script></del>
becomes:
<strong><!-- ====Twitter Widget==== -->
<script src="https://platform.twitter.com/widgets.js"></script></strong>
</pre>
<p style="font-size: 14px; margin-top: 0;">2. Please, find the comment and include below <strong>'CSS'</strong> in <strong>'css/style.css'</strong> file:</p>
<pre style="font-family: 'Courier New'; font-size: 14px; line-height: 18px; background-color: #f5f5f5; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(50%, #f5f5f5), color-stop(50%, #e6e6e6)); background-image: -webkit-linear-gradient(#f5f5f5 50%, #e6e6e6 50%); background-image: linear-gradient(#f5f5f5 50%,#e6e6e6 50%); background-size: 36px 36px; border: 1px solid #e9e9e9; padding-left: 5px;">/*------------------------------------*\
29. BLOG DETAILS PAGE
\*------------------------------------*/
<strong>#sidebarTwitter {
margin-top: 25px;
max-height: 270px;
border: 1px solid #e9e9e9;
overflow: auto;
}</strong>
</pre>
<p style="font-size: 14px; margin-top: 0;">3. Please, find the comments and include below <strong>'javascript'</strong> in <strong>'main.js'</strong> file:</p>
<pre style="font-family: 'Courier New'; font-size: 14px; line-height: 18px; background-color: #f5f5f5; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(50%, #f5f5f5), color-stop(50%, #e6e6e6)); background-image: -webkit-linear-gradient(#f5f5f5 50%, #e6e6e6 50%); background-image: linear-gradient(#f5f5f5 50%,#e6e6e6 50%); background-size: 36px 36px; border: 1px solid #e9e9e9; padding-left: 5px;"><del>/* ------------------------------------------------------------------------- *
* TWITTER FEED
* ------------------------------------------------------------------------- */
var tweetsContainer = $('#tweets');
if ( tweetsContainer.length ) {
var config = {
"id": tweetsContainer.data('twitter-id'),
"domId": 'tweets',
"maxTweets": tweetsContainer.data('posts'),
showTime: false,
showUser: false,
"showInteraction": false
};
twitterFetcher.fetch(config);
}</del>
becomes:
<strong>/* ------------------------------------------------------------------------- *
* TWITTER WIDGET
* ------------------------------------------------------------------------- */
var $sidebarTwitter = $('#sidebarTwitter');
if ( $sidebarTwitter.length ) {
twttr.widgets.createTimeline({
sourceType: "profile",
screenName: $sidebarTwitter.data('user-name')
}, document.getElementById('sidebarTwitter'));
}</strong>
</pre>
</section>
<section id="faq">
<div class="page-header">
<h3>FAQ</h3>
<hr class="notop">
</div>
<!-- Question Item Start -->
<h3><strong>How To Change Theme Color Scheme?</strong></h3>
<p><strong>For HTML Template:</strong></p>
<ul>
<li>Open <strong>'.html'</strong> file. (For Example: <strong>'index.html'</strong>)</li>
<li>Find the comment <strong>'Color Scheme Stylesheet'</strong></li>
<li>Update the file name <strong>'theme-color-1.css'</strong> to <strong>'theme-color-x.css'</strong> or change/update the color code with your desire/brand color code in the <strong>'theme-color-1.css'</strong> file.</li>
</ul>
<img src="assets/images/theme-color-stylesheet.png" alt="" class="img-responsive" />
<p>Available Color Schemes:</p>
<img src="assets/images/theme-color-stylesheet-list.png" alt="" class="img-responsive" />
<p><strong>For WHMCS Template:</strong></p>
<ul>
<li>Open <strong>'head.tpl'</strong> file from the <strong>includes</strong> folder.</li>
<li>Update the file name <strong>'theme-color-1.css'</strong> to <strong>'theme-color-x.css'</strong> or change/update the color code with your desire/brand color code in the <strong>'theme-color-1.css'</strong> file.</li>
</ul>
<!-- Question Item End -->
<h3><strong>How can I remove the "Preloader"?</strong></h3>
<ul>
<li>Open Up your Desired <strong><i>'.html'</i></strong> file. (For Example, <strong>'index.html'</strong>)</li>
<li>Then Search For the Comment <strong><i>'<!-- Preloader Start -->'</i></strong></li>
<li>And remove the markup</li>
</ul>
<br />
<img src="assets/images/preloader.png" alt="" />
<br />
<br />
<h3><strong>How can I change the "Logo"?</strong></h3>
<ul>
<li>Open Up your Desired <strong><i>'.html'</i></strong> file. (For Example, <strong>'index.html'</strong>)</li>
<li>Then Search For the Comment <strong><i>'<!-- Logo Start -->'</i></strong></li>
<li>Update The logo name <strong><i>'Eco Hosting'</i></strong> from there.</li>
</ul>
<br />
<img src="assets/images/logo_change.png" alt="" />
<br />
<br />
<h3><strong>How can I change "Social Links" (Topbar)?</strong></h3>
<ul>
<li>Open Your Desired <strong><i>'.html'</i></strong> file. (For Example, <strong>'index.html'</strong>)</li>
<li>Then Search For the Comment <strong><i>'<!-- Menu Topbar Social Start -->'</i></strong></li>
<li>Change The anchor links <strong><i>'href="#"'</i></strong> from there</li>
</ul>
<br />
<img src="assets/images/social-link_change.png" alt="" />
<br />
<br />
<h3><strong>How can I change "Slider Image and Text"?</strong></h3>
<ul>
<li>Open Up your Desired <strong><i>'.html'</i></strong> file. (For Example, <strong>'index.html'</strong>)</li>
<li>Then Search For the Comments <strong><i>'<!-- Header Slider Start -->'</i></strong></li>
<li>Update The <strong><i>'image and content'</i></strong> from there</li>
</ul>
<br />
<img src="assets/images/slider_change.png" alt="" />
<br />
<br />
<h3><strong>How can I change the "Slider Background Image"?</strong></h3>
<ul>
<li>Open Up your Desired <strong><i>'.html'</i></strong> file. (For Example, <strong>'index.html'</strong>)</li>
<li>Then Search For the Comment <strong><i>'<!-- Header Area Start -->'</i></strong></li>
<li>Update The <strong><i>'data-bg-src="img/background-img/hosting-slider-bg.jpg"'</i></strong> from there</li>
</ul>
<br />
<img src="assets/images/slider_bg_change.png" alt="" />
<br />
<br />
<h3><strong>How can I change the "Slider Background Video"?</strong></h3>
<ul>
<li>Open Up your Desired <strong><i>'.html'</i></strong> file. (For Example, <strong>'index.html'</strong>)</li>
<li>Then Search For the Comment <strong><i>'<!-- Header Area Start -->'</i></strong></li>
<li>Update The <strong><i>'data-bg-video="2GqExKSwTEA"'</i></strong> from there</li>
</ul>
<br />
<img src="assets/images/slider_bg_video_change.png" alt="" />
<br />
<br />
<h3><strong>How can I change "Pricing Table"?</strong></h3>
<ul>
<li>Open Your Desired <strong><i>'.html'</i></strong> file. (For Example, <strong>'index.html'</strong>)</li>
<li>Then Search For the Comment <strong><i>'<!-- Pricing Table Item Start -->'</i></strong></li>
<li>Update The <strong><i>'Price, Features and Link'</i></strong> from there</li>
</ul>
<br />
<img src="assets/images/pricing-table_change.png" alt="" />
<br />
<br />
<h3><strong>How can I change the "Mailchimp Subscription Link"?</strong></h3>
<p><strong>We added a speacial feature 'mailchimp interrogation support' on this theme and will be add it to our future themes also.</strong></p>
<ul>
<li>Open Your Desired <strong><i>'.html'</i></strong> file. (For Example, <strong>'index.html'</strong>)</li>
<li>Then Search For the Comment <strong><i>'<!-- Subscribe Form Start -->'</i></strong></li>
<li>Update The <strong><i>'action="..."'</i></strong> attribute address from there</li>
</ul>
<br />
<img src="assets/images/subscribe_change.png" alt="" />
<br />
<br />
<h3><strong>How can I change "Counter Value"?</strong></h3>
<ul>
<li>Open Up your Desired <strong><i>'.html'</i></strong> file. (For Example, <strong>'index.html'</strong>)</li>
<li>Then Search For the Comment <strong><i>'<!-- Counter Item Start -->'</i></strong></li>
<li>Change The <strong>'Title'</strong> and <strong>'Numbers'</strong> from there</li>
</ul>
<br />
<img src="assets/images/counter_change.png" alt="" />
<br />
<br />
<h3><strong>How can I change "Testimonial Text and Image"?</strong></h3>
<ul>
<li>Open Up your Desired <strong><i>'.html'</i></strong> file. (For Example, <strong>'index.html'</strong>)</li>
<li>Then Search For the Comment <strong><i>'<!-- Testimonial Item Start -->'</i></strong></li>
<li>Update The Image Link <strong><i>'data-recommender-thumb="img/testimonial-img/01.jpg"'</i></strong> and <strong>'Text'</strong> from there</li>
</ul>
<br />
<img src="assets/images/testimonial-1.png" alt="" />
<br />
<br />
<h3><strong>How can I change "Datacenter Locations"?</strong></h3>
<ul>
<li>Open Up your Desired <strong><i>'.html'</i></strong> file. (For Example, <strong>'index.html'</strong>)</li>
<li>Then Search For the Comment <strong><i>'<!-- Datacenter Locations Area Start -->'</i></strong></li>
<li>Update The Markers <strong>'title=""'</strong> and <strong>'position'</strong> from css</li>
</ul>
<br />
<img src="assets/images/datacenter1.png" alt="" />
<br />
<br />
<h3><strong>How can I change "Clients/Brands Logo"?</strong></h3>
<p><strong><i>Make sure first you put your 'images' in the '/img/brands-img' folder.</i></strong></p>
<ul>
<li>Open Up your Desired <strong><i>'.html'</i></strong> file. (For Example, <strong>'index.html'</strong>)</li>
<li>Then Search For the Comment <strong><i>'<!-- Brands Item Start -->'</i></strong></li>
<li>Update The Image Link <strong><i>'img/brands-img/01.png'</i></strong> from there</li>
</ul>
<br />
<img src="assets/images/brand-img_change.png" alt="" />
<br />
<br />
<h3><strong>How can I change the "About Us Text" (Footer Area)?</strong></h3>
<ul>
<li>Open Your Desired <strong><i>'.html'</i></strong> file. (For Example, <strong>'index.html'</strong>)</li>
<li>Then Search For <strong><i>'<!-- Footer About Widget Start -->'</i></strong></li>
<li>Update The <strong>'Text'</strong> and <strong>'Link'</strong></li>
</ul>
<br />
<img src="assets/images/about_widget.png" alt="" />
<br />
<br />
<h3><strong>How can I change the "Twitter User Name"? (Blog Sidebar)</strong></h3>
<ul>
<li>Open Up <strong><i>'blog.html'</i></strong> file.</li>
<li>Then Search For the Comment <strong><i>'<!-- Twitter Widget Start -->'</i></strong></li>
<li>Change the <strong><i>data-user-name="themelooks"</i></strong> to your username <strong><i>data-user-name="your_user_name"</i></strong></li>
</ul>
<br />
<img src="assets/images/sidebar_twitter.png" alt="" />
<br />
<br />
<h3><strong>Where I will find the 'VPS Slider' information to change?</strong></h3>
<ul>
<li>Open Up <strong><i>'vps-plans.js'</i></strong> file.</li>
<li>Update The <strong><i>'options'</i></strong> from there.</li>
</ul>
<br />
<img src="assets/images/vps_slider.png" alt="" />
<br />
<br />
<h3><strong>How can I change the "Goolge Map Position"?</strong></h3>
<ul>
<li>Open Up <strong><i>'main.js'</i></strong> file.</li>
<li>Then Search For the Comment <strong><i>'* MAP'</i></strong></li>
<li>Update latitude/longitude <strong><i>'lat: 23.790546, lng: 90.375583'</i></strong> from there</li>
</ul>
<br />
<img src="assets/images/google-map.png" alt="" />
<br />
<br />
<h3><strong>How can I change "Name, Image, and Social Links" (Team Section)?</strong></h3>
<p><strong><i>Make sure first you put your 'images' in the '/img/team-img' folder.</i></strong></p>
<ul>
<li>Open Your Desired <strong><i>'about.html'</i></strong> file.</li>
<li>Then Search For the Comment <strong><i>'<!-- Team Member Item Start -->'</i></strong></li>
<li>Update The <strong><i>'Name, Image and Social Links'</i></strong> from there</li>
</ul>
<br />
<img src="assets/images/team_change.png" alt="" />
<br />
<br />
<h3><strong>How can I change the "Domain Search form action link" for my website to work with WHMCS?</strong></h3>
<ul>
<li>Open Your Desired <strong><i>'.html'</i></strong> file. (For example, index.html/domains.html)</li>
<li>Then search for the comment <strong><i>'<!-- Offer Form Start -->'</i></strong></li>
<li>Update the form action link <strong><i>'action="http://subdomain.yourdomain.com/domainchecker.php"'</i></strong> with your website url.</li>
</ul>
<br />
<img src="assets/images/whmcs_domain_link.png" alt="" />
<br />
<br />
<h3><strong>How can I change the "Login Form action/forgot password/register link" for my website to work with WHMCS?</strong></h3>
<ul>
<li>Open <strong><i>'login.html'</i></strong> file.</li>
<li>Then search for the comment <strong><i>'<!-- Login Area Start -->'</i></strong></li>
<li>Update the links with your website url.
<ul style="margin: 0;">
<li><strong>Example Form Action Link: <code><i>action="http://subdomain.yourdomain.com/dologin.php"</i></code></strong></li>
<li><strong>Example Register Now Link: <code><i>action="http://subdomain.yourdomain.com/pwreset.php"</i></code></strong></li>
</ul>
</li>
</ul>
<br />
<img src="assets/images/whmcs_login_link.png" alt="" />
<br />
<br />
<h3><strong>How can I change "Live Chat Widget"?</strong></h3>
<ul>
<li>Open <strong><i>'main.js'</i></strong> file.</li>
<li>Then search for the comment <strong><i>'LIVE CHAT WIDGET'</i></strong></li>
<li>Update the widget code with your own widget code. <a href="https://www.tawk.to/knowledgebase/getting-started/adding-a-widget-to-your-website/">Read this?</a></li>
</ul>
<br />
<img src="assets/images/live_chat_widget.png" alt="" />
<br />
<br />
<h3><strong>How can I change "Copyright Text"?</strong></h3>
<ul>
<li>Open Your Desired <strong><i>'.html'</i></strong> file. (For Example, <strong>'index.html'</strong>)</li>
<li>Then Search For the Comment <strong><i>'<!-- Copyright Text Start -->'</i></strong></li>
<li>Update The <strong><i>'Link'</i></strong> from there</li>
</ul>
<br />
<img src="assets/images/copyright_change.png" alt="" />
<br />
<br />
<h3><strong>How can I change "FAQ Questions and Answers"?</strong></h3>
<ul>
<li>Open Your Desired <strong><i>'.html'</i></strong> file. (For Example, <strong>'faq.html'</strong>)</li>
<li>Then Search For the Comment <strong><i>'<!-- Accordion Item Start -->'</i></strong></li>
<li>Update The <strong><i>'Title and Content'</i></strong> from there</li>
</ul>
<br />
<img src="assets/images/faq.png" alt="" />
<br />
<br />
<h3><strong>How can I change the "Contact Address" (Contact Page)?</strong></h3>
<ul>
<li>Open Your Desired <strong><i>'.html'</i></strong> file. (For Example, <strong>'contact.html'</strong>)</li>
<li>Then Search For <strong><i>'<!-- Contact Address Start -->'</i></strong></li>
<li>Update The Address: <strong><i>' House #14, Road #09, Sector #12, Dhaka-1203, Bangladesh.'</i></strong>, Phone Number: <strong><i>'+000 000 000 000'</i></strong> and Email Address: <strong><i>'support@example.com'</i></strong></li>
</ul>
<br />
<img src="assets/images/contact-info_change.png" alt="" />
<br />
<br />
<h3><strong>How can I add my "Email Address" (Sendmail.php)?</strong></h3>
<ul>
<li>Open Up your <strong><i>'sendmail.php'</i></strong> file.</li>
<li>Then Search For the Comment <strong><i>'// Replace this with your own email address'</i></strong></li>
<li>Update The Email Address<strong><i>'example@example.com'</i></strong> and Owner Name <strong><i>'Example'</i></strong> from there</li>
</ul>
<br />
<img src="assets/images/email-address.png" alt="" />
<br />
<br />
<h3><strong>How can I change the "YouTube Video Link" (Blog Page)?</strong></h3>
<ul>
<li>Open Up your <strong><i>'blog.html'</i></strong> file.</li>
<li>Then Search For the Comment <strong><i>'<!-- Post YouTube Video Start -->'</i></strong></li>
<li>Update The <strong><i>'YouTube Vido Link'</i></strong> from there</li>
</ul>
<br />
<img src="assets/images/youtube-video_change.png" alt="" />
<br />
<br />
<h3><strong>How can I change the "Vimeo Video Link" (Blog Page)?</strong></h3>
<ul>
<li>Open Up your <strong><i>'blog.html'</i></strong> file.</li>
<li>Then Search For the Comment <strong><i>'<!-- Post Vimeo Video Start -->'</i></strong></li>
<li>Update The <strong><i>'Vimeo Vido Link'</i></strong> from there</li>
</ul>
<br />
<img src="assets/images/vimeo-video_change.png" alt="" />
<br />
<br />
<h3><strong>How can I change the "Local Video Link" (Blog Page)?</strong></h3>
<ul>
<li>Open Up your <strong><i>'blog.html'</i></strong> file.</li>
<li>Then Search For the Comment <strong><i>'<!-- Post Local Video Start -->'</i></strong></li>
<li>Update The <strong><i>'Vimeo Vido Link'</i></strong> from there</li>
</ul>
<br />
<img src="assets/images/local-video_change.png" alt="" />
<br />
<br />
<h3><strong>How can I change the "Local Audio Link" (Blog Page)?</strong></h3>
<ul>
<li>Open Up your <strong><i>'blog.html'</i></strong> file.</li>
<li>Then Search For the Comment <strong><i>'<!-- Post Local Audio Start -->'</i></strong></li>
<li>Update The <strong><i>'Vimeo Vido Link'</i></strong> from there</li>
</ul>
<br />
<img src="assets/images/local-audio_change.png" alt="" />
<br />
<br />
<h3><strong>How can I change the "Soundcloud Audio Link" (Blog Page)?</strong></h3>
<ul>
<li>Open Up <strong><i>'blog.html'</i></strong> file.</li>
<li>Then Search For the Comment <strong><i>'<!-- Post Soundcloud Audio Start -->'</i></strong></li>
<li>Update The <strong><i>'Vimeo Vido Link'</i></strong> from there</li>
</ul>
<br />
<img src="assets/images/sound-cloud.png" alt="" />
<br />
<br />
</section>
</div>
</body>
</html>