File size: 13.4Kb
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Uhost Documentation</title>
<link rel="stylesheet" href="css/bootstrap.css" type="text/css" media="screen">
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen">
</head>
<body>
<div class="container">
<section class="bg-color">
<div class="row">
<div class="col-md-3">
<h1 class="title">Uhost</h1>
</div>
<div class="col-md-7">Thank you for purchasing our theme. If you have any questions that are beyond the scope of this help file, please feel free to ask via item's comments. Also please don't forget to give item ratings! Thanks so much! :)
</div>
<div class="col-md-2 text-right"><a class="btn btn-primary mt15" href="http://themeforest.net/user/designesia/portfolio">View All Our Items</a></div>
</div>
</section>
<section>
<h2>Basics</h2>
<div class="expand">
<div class="title">HTML Structure</div>
<div class="content">This template using Bootstrap framework. Main content is placed between header and footer area. The content is nested within <strong><div id="content"></strong>.
<pre>... header area ...
<div id="<strong>content</strong>">
<div class="<strong>container</strong>">
<div class="<strong>row</strong>">
<div class="<strong>col-md-4</strong>">
this is your content
</div>
<div class="<strong>col-md-8</strong>"><strong>
</strong> this is your content
</div>
</div>
</div>
<section>
<div class="<strong>container</strong>">
<div class="<strong>row</strong>">
this is your content
</div>
</div>
</section>
</div>
... footer area ...
</pre>
</div>
</div>
<div class="expand">
<div class="title">Create Columns</div>
<div class="content">
<p>For a simple two column layout, create a <strong>.row</strong> and add the appropriate number of <strong>.col-md-*</strong> columns. As this is a 12-column grid, each <strong>.col-md-*</strong> spans a number of those 12 columns, and should always add up to 12 for each row (or the number of columns in the parent).</p>
<p>Please read more for Bootstrap grid system here: <a href="https://getbootstrap.com/docs/4.0/layout/grid/">https://getbootstrap.com/docs/4.0/layout/grid/</a></p>
<pre><div class="<strong>row</strong>"><br> <div class="<strong>col-md-6</strong>"> this is 1/2 columns </div><br> <div class="<strong>col-md-6</strong>"> this is 1/2 columns </div><br></div>
<div class="<strong>row</strong>"><br> <div class="<strong>col-md-4</strong>"> this is 1/3 columns </div><br> <div class="<strong>col-md-8</strong>"> this is 2/3 columns </div><br></div>
<div class="<strong>row</strong>"><br> <div class="<strong>col-md-3</strong>"> this is 1/4 columns </div><br> <div class="<strong>col-md-9</strong>"> this is 3/4 columns </div><br></div></pre>
</div>
</div>
</section>
<section>
<h2>General Settings</h2>
<div class="expand">
<div class="title">New: Change to dark mode</div>
<div class="content">
<p>For each template page insert class below inside body tag</p>
<pre>
<body class="dark-mode text-light"></pre>
</p>
</div>
</div>
<div class="expand">
<div class="title">Change scheme color</div>
<div class="content">
<p>For each template page, look at line 30 below</p>
<pre><link id="colors" href="css/colors/scheme-01.css" rel="stylesheet" type="text/css"></pre>
<p>Then replace scheme-01.css with another value. You can choose one of below: scheme-01.css, scheme-02.css, scheme-03.css, scheme-04.css.</p>
<p>All premade color on this template can be found inside folder css/colors/.</p>
</div>
</div>
<div class="expand">
<div class="title">Change navigation style</div>
<div class="content">
<p>Open file <strong>designesia.js</strong> then change <strong>de_nav_style</strong> value. </p>
<p>Value: 1 - solid, 2 - transparent</p>
</div>
</div>
<div class="expand">
<div class="title">Change navigation color</div>
<div class="content">
<p>Open file <strong>designesia.js</strong> then change<strong> de_nav_color </strong>value. </p>
<p>Value: 1 - default, 2 - light</p>
</div>
</div>
<div class="expand">
<div class="title">Change navigation color on scroll</div>
<div class="content">
<p>Open file <strong>designesia.js</strong> then change<strong> de_nav_color_scroll </strong>value. </p>
<p>Value: 1 - default, 2 - light</p>
</div>
</div>
<div class="expand">
<div class="title">Header sticky on mobile</div>
<div class="content">
<p>Insert class name <strong>header-mobile-sticky</strong> on header class name.</p>
</div>
</div>
<div class="expand">
<div class="title">Change website url for search from HTML to WHMCS</div>
<div class="content">
<p>Open file <strong>check.php</strong> then replace <strong>$whmcs_url</strong> value with url where your WHMCS was installed.</p>
</div>
</div>
</section>
<section>
<h2>Working with WHMCS Template</h2>
<div class="expand">
<div class="title">How to install WHMCS template?</div>
<div class="content">
<ol>
<li>Open FTP and go to WHMCS root directory then enter folder name 'template'.</li>
<li>Upload 'Uhost' folder (located inside folder UHOST_PACKAGE/WHMCS_THEME/uhost).</li>
<li>Now go to WHMCS administrator panel.</li>
<li>Navigate to Setup > General Settings > Set "Template" value to "Uhost".</li>
</ol>
</div>
</div>
<div class="expand">
<div class="title">How change logo on WHMCS template?</div>
<div class="content">
<ol>
<li>Replace an image file <b>logo.png</b> by navigate to UHOST_PACKAGE/WHMCS_THEME/uhost/img/logo.png</li>
</ol>
</div>
</div>
<div class="expand">
<div class="title">How change color scheme on WHMCS template?</div>
<div class="content">
<ol>
<li>Open file <b>color-scheme.css</b> by navigate to UHOST_PACKAGE/WHMCS_THEME/uhost/assets/css/color-scheme.css</li>
<li>Select color scheme you want then save once it done.</li>
</ol>
</div>
</div>
<div class="expand">
<div class="title">How change content for Homepage on WHMCS template?</div>
<div class="content">
<ol>
<li>Open file <b>hompage.tpl</b> by navigate to UHOST_PACKAGE/WHMCS_THEME/uhost/assets/homepage.tpl</li>
<li>Edit anything you want then save once it done.</li>
</ol>
</div>
</div>
<div class="expand">
<div class="title">How change content for footer on WHMCS template?</div>
<div class="content">
<ol>
<li>Open file <b>footer.tpl</b> by navigate to UHOST_PACKAGE/WHMCS_THEME/uhost/footer.tpl</li>
<li>Edit anything you want then save once it done.</li>
</ol>
</div>
</div>
<div class="expand">
<div class="title">How change section background image on WHMCS template?</div>
<div class="content">
<ol>
<li>Open file <b>background.tpl</b> by navigate to UHOST_PACKAGE/WHMCS_THEME/uhost/assets/css/background.css</li>
<li>Edit anything you want then save once it done.</li>
</ol>
</div>
</div>
<div class="expand">
<div class="title">How to use Uhost Pricing Table?</div>
<div class="content">
<ol>
<li>Open FTP and go to WHMCS root directory then navigato to folder 'template > orderforms'.</li>
<li>Upload folder 'uhost_pricing_table' to 'orderforms' (located inside folder UHOST_PACKAGE/WHMCS_THEME/uhost_pricing_table).</li>
<li>Now go to WHMCS administrator panel.</li>
<li>Navigate to Setup > General Settings > Ordering</li></li>
<li>Select 'Uhost Pricing Table' from the Default Order Form Template section.</li>
<li>Click 'Save Changes'.</li>
</ol>
</div>
</div>
<div class="expand">
<div class="title">Header sticky on mobile</div>
<div class="content">
<p>Open file designesia.js (in folder uhost\assets\js\) then change <strong>sticky_header_mobile</strong> value to <strong>true</strong></p>
</div>
</div>
</section>
<section>
<h2>jQuery, CSS & Plugins</h2>
<div class="expand">
<div class="title">List of javascipt files</div>
<div class="content">
<ul>
<li><strong>jquery.min.js</strong> - http://docs.jquery.com/Downloading_jQuery</li>
<li><strong>bootstrap.min.js</strong> - bootstrap js file</li>
<li><strong>designesia.js</strong> - custom js file</li>
<li><strong>jquery.isotope.min.js</strong> - used in gallery page</li>
<li><strong>jquery.magnific-popup.min.js</strong> - used to open popup image</li>
<li><strong>easing.js</strong> - http://archive.plugins.jquery.com/project/Easing</li>
<li><strong>jquery.ui.totop.js</strong> - used to scroll to top</li>
<li><strong>validation.js</strong> - used for contact form validation</li>
</ul>
</div>
</div>
<div class="expand">
<div class="title">List of CSS files</div>
<div class="content">
<ul>
<li><strong>animate.css</strong> - used to make animation </li>
<li><strong>bg.css</strong> - used to set background for all section and subheader</li>
<li><strong>bootstrap.css</strong> - main css framework for this theme</li>
<li><strong>color.css</strong> - used to load color for template</li>
<li><strong>magnific-popup.css</strong> - for maginfic popup jquery</li>
<li><strong>owl.carousel.css, owl.theme.css, owl.transitions.css</strong> - for owl carousel jquery</li>
<li><strong>plugin.css</strong> - overwrite default plugin css</li>
<li><strong>rev-settings.css</strong> - custom css for Revolution Slider</li>
<li><strong>style.css</strong> - main css file for this template</li>
</ul>
</div>
</div>
<div class="expand">
<div class="title">Animate object on scroll</div>
<div class="content"><p>Select an object that you want to animate. As example you want create animate for H1 element. You can see below: </p>
<pre><h1 class=<strong>"wow fadeIn"</strong> data-wow-delay=<strong>".2s" data-wow-duration=".5s"</strong>>Animate Text</h1>
</pre>
<ul>
<li>You must add class name "<strong>wow</strong>" for object that you want to animate.
</li>
<li><strong>fadeIn</strong>: sample type of animation. You can see all animation available from: <a href="http://daneden.github.io/animate.css/">http://daneden.github.io/animate.css/</a></li>
<li><strong>data-wow-delay</strong>: determine when animation will start (on second)</li>
<li><strong>data-wow-duration</strong>: determine duration of animation (on second)</li>
</ul>
</div>
</div>
<div class="expand">
<div class="title">Create parallax background</div>
<div class="content">
<ol>
<li>
Create a section tag then give it an id name.
<pre><section <strong>id</strong>="my-section">...content here...</section></pre>
</li>
<li>
Add attribute data-stellar-background-ratio for scroll speed.
<pre><section <strong>id</strong>="my-section" data-stellar-background-ratio=".2">...content here...</section> </pre></li>
<li>
Open <strong>bg.css</strong> file, set background image for your section.
<pre>#my-section{
background-image:my-bg-image.jpg;
}</pre>
</li>
<li> Done. </li>
</ol>
</div>
</div>
<div class="expand">
<div class="title">Change contact form email address </div>
<div class="content">Open > <strong>email.php</strong>. Change<strong> $to</strong> value with your email.</div>
</div>
<div class="expand">
<div class="title">Working with Slider Revolution </div>
<div class="content">Please read complete documentation here: <a href="https://revolution.themepunch.com/jquery/">https://revolution.themepunch.com/jquery/</a></div>
</div>
</section>
</div>
</body>
<script src="js/jquery.min.js"></script>
<script src="js/easing.js"></script>
<script src="js/custom.js"></script>
</html>