Nuhost Documentation

Nuhost HTML & WHMCS template

template documentation version 1.0

Introduction

Thank you so much for purchasing our template and for being our loyal customer.You are awesome!
You are entitled to get free lifetime updates to this product + free support from the author directly.

This documentation is to help you regarding each step of customization. Please go through the documentation carefully to understand how this theme works and how to edit this properly. Basic HTML & CSS knowledge is required to customize this template. You may learn basics here, here Or by videos here.

before get started

we highly encourage you to get familiar with this documentation file. Spending half an hour reading the manual may save a lot of your time and avoid questions with obvious answers.

To quickly find the necessary information, you can use your browser's built-in "Search" tool

  • Press the CMD+F (in macOS)
  • press CTRL+F (in Windows)

Getting Started #back to top

This template, which is a responsive layout for tablet and other mobile devices, is based on the HTML5 structure and Twitter Bootstrap 4.1.1 Visit http://getbootstrap.com/ to learn more about bootstrap. For a detailed information about its grid system, click on http://getbootstrap.com/css/#grid.

This is a STATIC HTML template With WHMCS template inegration and is NOT WordPress theme

To use WHMCS template you must be running at least WHMCS 6.x.x , PHP5, mysql 5 or higher

you can read this tutorial: How to Customize an HTML Template

you can read this tutorial: The Best Way to Learn HTML

you can read this tutorial: Introduction to HTML

you can read this tutorial: Your First HTML Document in 60 Seconds

HTML template customize#back to top

Before customize the tempalte, please make sure you unpacked the archive and extracted template files. the screenshot below as an example only.

you can edit HTML and CSS files with in any text editor, example: notepad++.
The template is arranged in sections, each section(div) has an class or id, Ex: "anoncement-header", "header-area", "domain-header"", ...etc

HTML#back to top

The general HTML structure hould appear in the following format.

						<html>
						<body>
						<-- start preloader -->
						<div class="preloader">
						... 
						</div>
						<-- end preloader -->
						
						
						<-- start header -->
						<div id="header" class="homepagetwostyle d-flex mx-auto flex-column" >
						...
						...
						...
						</div>
						<-- end  header -->
					


                        <-- page started -->
						<section id="class="padding-100-0""> 
						...
						...
						...
						...
						...
						<section>
						<-- page ended -->


                        <-- start footer -->
						<section class="first-items-home"> 
						...
						...
						</section>
						<-- end footer -->

						</body>
						</html>

CSS #back to top

the main css file for this template is css/main.css
the responsive css file for this template is css/responsive.css

also we use another css files
  1. animate.css: Copyright (c) 2016 Daniel Eden
  2. bootstrap.min.css: Copyright 2011-2018 Twitter, Inc.
  3. bootstrap.offcanvas.min.css: Copyright 2011-2018 unknown.
  4. flickity.min.css: Copyright 2018 Flickity
  5. fontawesome-all.min.css: Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License
  6. modal-video.min.css: Copyright 2011-2018 unknown.

The general CSS structure hould appear in the following format.

						1.------------------------- General Styles /
						2.------------------------- background & buttons /
						3.------------------------- preloader /
						4.------------------------- top header navbar /
						5.------------------------- the header /
						6.------------------------- megamenu dropdown /
						7.------------------------- header animations /
						8.------------------------- header main text /
						9.------------------------- the breadcrumb /
						10.------------------------ header domain search /
						11.------------------------ header search block /
						12.------------------------ header login dropdown /
						13.------------------------ header nav styles /
						14.------------------------ services box styles /
						15.------------------------ banner hosting menu /
						16.------------------------ hosting plans megamenu /
						17.------------------------ our services megamenu /
						18.------------------------ second secvices box styles /
						19.------------------------ simple title styles /
						20.------------------------ our pertners styles /
						21.------------------------ third services box styles /
						22.------------------------ first hosting plans styles /
						23.------------------------ perlex section /
						24.------------------------ video model styles /
						25.------------------------ fourth services box styles /
						26.------------------------ services tabs styles /
						27.------------------------ server place maps styles /
						28.------------------------ counter section styles /
						29.------------------------ blog boxes styles /
						30.------------------------ homepage contact form styles /
						31.------------------------ footer styles /
						32.------------------------ fixed header styles /
						33.------------------------ responsive menu styles /
						34.------------------------ SECOND HOMEPAGE STYLES START /
						35.------------------------ second header styles /
						36.------------------------ header slider styles /
						37.------------------------ second header text area /
						38.------------------------ carousel services box /
						39.------------------------ homepage domain search section /
						40.------------------------ hosting plans with chekout  /
						41.------------------------ video modal popup styles /
						42.------------------------ custom conatiner styles /
						43.------------------------ sub pages header styles /
						44.------------------------ main services box /
						45.------------------------ grandient backrounds /
						46.------------------------ domain resulte page /
						47.------------------------ about us page /
						48.------------------------ reseller hosting page /
						49.------------------------ Filter List /
						50.------------------------ wordpress hosting page /
						51.------------------------ DDOS pages styles /
						52.------------------------ knowledgebase page styles /
						53------------------------- contact us page styles /
						54.------------------------ help center page styles /
						55.------------------------ 404 page styles /
						56.------------------------ blog & blog single styles /
						57.------------------------ header extra styles /
						58.------------------------ additionell styles & updates /

JAVASCRIPT #back to top

This template has 18 Javascript files.

scripts.js is Our custom javascript code.
  1. bootstrap.min
  2. bootstrap.offcanvas
  3. bootstrap.offcanvas.min
  4. demo
  5. flickity.pkgd.min
  6. jquery.countdown.min
  7. jquery.counterup.min
  8. jquery.min
  9. jquery.touchSwipe.min
  10. mailer
  11. modal-video.min
  12. parallax.min
  13. particles
  14. popper.min
  15. scripts
  16. smoothscroll
  17. typed
  18. waypoints.min

setup your logo #back to top

this template require two logos one for the white background and one for the dark background

made your logos and put it in img/header in png and without background

logo.png for the dark backgrounds , logo-b.png for the white backgrounds

header backgrounds #back to top

this template has 6 header background grandient you can chose one of them

for use one of them just copie the class of the grandient and past it in the header in line 118

				
						<-- start header -->
						<div id="header" class="homepagetwostyle d-flex mx-auto flex-column your_grandient_code" >
						...
						...
						...
						</div>
  1. first grandient: defaut
  2. second grandient: green-linear-background-header
  3. third grandient: purple-linear-background-header
  4. fourth grandient: blue-linear-background-header
  5. fiveth grandient: green-two-linear-background-header
  6. sixth grandient: purple-two-linear-background-header

Set the recipient email address#back to top

You can setup your email on the contact form easly
just add your email in mailer.php on line 24 In a place (youremail@domain.net) and save the file , that's it :)

Add new pages #back to top

There are 2 sub pages styles you can use them empty.html & empty-v2.html
if you want more pages you can started with those templates al fille them with our pre made sections easly

add new section

Our template includes a A large group of pre made section. It allows to create new pages for your project .

Before add new pages! make sure you have a backup for your older pages

don't forget to add title for your new page

WHMCS template instalation#back to top

How to install whmcs

How to install whmcs template

we give you 2 whmcs teplate version templates-nuhost and templates-nuhost-standard you can preview them in our demo

Support#back to top

Please remember you have purchased a very affordable theme and you have not paid for a full-time web design agency. Occasionally we will help with small tweaks, but these requests will be put on a lower priority due to their nature. Support is also 100% optional and we provide it for your connivence, so please be patient, polite and respectful.

Please visit our profile page or ask question @nedjai mohamed

Support for my items includes:
  1. Responding to questions or problems regarding the item and its features
  2. Fixing bugs and reported issues
  3. Providing updates to ensure compatibility with new software versions
Item support does not include:
  1. Customization & installation services
  2. support for third party software and plug-ins
Before seeking support, please...
  1. Make sure your question is a valid Theme Issue and not a customization request.
  2. Make sure you have read through the documentation and any related video guides before asking support on how to accomplish a task.
  3. Try disabling any active plugins to make sure there isn't a conflict with a plugin. And if there is this way you can let us know.
  4. If you have customized your theme and now have an issue, back-track to make sure you didn't make a mistake. If you have made changes and can't find the issue, please provide us with your changelog.
  5. Almost 80% of the time we find that the solution to people's issues can be solved with a simple "Google Search". You might want to try that before seeking support. You might be able to fix the issue yourself much quicker than we can respond to your request.
  6. Make sure to state the name of the theme you are having issues with when requesting support via ThemeForest.

Files & Sources #back to top

Included Stylesheets

These are the primary CSS files used for general front-end styling. Use these to customize your template even further. All included css codes under .../HTML/css/

  • main.css - Primary stylesheet
  • animate.css - animate stylesheet
  • bootstrap.min.css - bootstrap 4.1.1 stylesheet
  • bootstrap.offcanvas.min.css- bootstrap offcanvas menu stylesheet
  • flickity.min.css - flickity stylesheet
  • fontawesome-all.min.css - fontawesome icons
  • modal-video.min.css modal video stylesheet
  • responsive.css - our template responsive file
Included JavaScript

These are the various attribution inks to the Javascript files included or modified to work with in this template. All included JavaScript codes under .../HTML/js/

  • bootstrap.js - Bootstrap JavaScript
  • bootstrap.offcanvas.js - offcanvas menu Plugins
  • jquery.js - Base JavaScript
  • demo.js - demo JavaScript
  • flickity.pkgd.min.js - flickity JavaScript
  • jquery.countdown.min.js - countdown JavaScript
  • jquery.countup.min.js - countup JavaScript
  • jquery.touchSwipe.min.js - touchSwipe JavaScript
  • mailer.js - the mail sender JavaScript
  • modal-video.min.js - video modal JavaScript
  • parallax.min.js - parallax effect JavaScript
  • jquery.countdown.min.js - countdown JavaScript
  • particles.js - particles header animation JavaScript
  • popper.min.js - popper JavaScript
  • scripts.js - template JavaScript
  • smoothscroll.js - smoothscroll JavaScript
  • typed.js - text chenger JavaScript
  • waypoints.min.js - waypoints JavaScript

Version History (Changelog) #back to top

You can find the version history (changelog.txt) file on main directory folder or you can check changelog on template sale page.

Once again, thank you so much for purchasing this template. As I said at the beginning, I'd be glad to help you if you have any questions relating to this template. No guarantees, but I'll do my best to assist. If you have a more general question relating to the template on ThemeForest, you might consider visiting the forums and asking your question in the "Item Discussion" section.

Changelog


                                        -----------------------------------------------------------------------------------------
                                        Version 1.0.0 -
                                        -----------------------------------------------------------------------------------------

                                        - actual release

Copyright and license #back to top

With ThemeForest regular license you are licensed to use this theme to create one single End Product (the final website customized with your content) for yourself or for one client. In short:

What is allowed with single regular license:
  1. You can create one website for yourself or for your client and you can transfer that single website to your client for any fee. This license is then transferred to your client.
  2. You can install the theme on your test server for testing/development purposes (that installation shouldn't be available to the public).
  3. You can modify or manipulate the theme, you can combine it with other works to create the End Product.
What is not allowed:
  1. With single regular license you are not allowed to create multiple websites. For multiple websites you will need multiple regular licenses.
  2. To resell the same website (Single End Product) to another clients. You will need to purchase an extended license for this.

For more information regarding license regulations and policies, please check the links below:
License FAQ.
Licenses overview.
Regular license details.
Extended license details.