Bredh Documentation

Bredh HTML & WHMCS template

template documentation version 1.1
(26/04/2019)

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.3.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 7.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.

there is tow HTML styles to use HTML_01 and HTML_02

you can edit HTML and CSS files with in any text editor, example: notepad++.
The template is arranged in sections,you can edit each section or replace their places or delete it permanently

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 class="padding-100-0"> 
						...
						...
						...
						...
						...
						<section>
						<-- page ended -->


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

						</body>
						</html>

you can edit the sections padding or margin with just adding classes, examples:
padding-100-0 :for adding 100px top and 100px bottom padding to element.
padding-100-0-0 :for adding 100px top padding to element.
padding-50-0-0 :for adding 50px top padding to element.
mr-tp-50 :for adding 50px top margin to element.
mr-bt-10 :for adding 10px bottom margin to element.

CSS #back to top

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

The general CSS structure hould appear in the following format.

						1.------------------------- font family import /
						2.------------------------- icons packs import hosting pack /
						3.------------------------- icons packs import electronic pack /
						4.------------------------- wide container styles /
						5.------------------------- General Styles /
						6.------------------------- megamenu styles /
						7.------------------------- General Styles /
						8.------------------------- homepage styles /
						9.------------------------- first pricing plans styles /
						10.------------------------ second pricing plans styles /
						11.------------------------ first pricing plans styles /
						12.------------------------ first pricing plans styles /
						13.------------------------ sdie text right  /
						14.------------------------ display on hover box /
						15.------------------------ perlex section styles /
						16.------------------------ server places styles /
						17.------------------------ footer styles /
						18.------------------------ animated header bg /
						19.------------------------ megamenu styles /
						20.------------------------ responsive menu styles /
						21.------------------------ Owl Carousel styles /
						22.------------------------ Flickity /
						23.------------------------ about us - our services /
						24.------------------------ about us - how it works /
						25.------------------------ about us - customers carousel /
						26.------------------------ webhosting - hostingsplans /
						27.------------------------ questions accordions /
						28.------------------------ servers - banner /
						29.------------------------ features style two /
						30.------------------------ slider form plan /
						31.------------------------ features box tree /
						32.------------------------ dedicated hosting table /
						33.------------------------ domain prices box /
						34.------------------------ domain prices box /
						35.------------------------ contact form styles /
						36.------------------------ help center styles/
						37.------------------------ Filter List /
						38.------------------------ knowledgebase page styles /
						39.------------------------ signin styles /
						40.------------------------ demo color changer styles /
						41.------------------------ colors settings styles /
						42.------------------------ responsive style /
						43.------------------------ menu styles  /

JAVASCRIPT #back to top

This template has 18 Javascript files.

template-scripts.js is Our custom javascript code.
  1. bootstrap.min
  2. animated-bg
  3. anime.min
  4. bootstrap.offcanvas.min
  5. demo
  6. flickity.pkgd.min
  7. jquery.min
  8. jquery.touchSwipe.min
  9. mailer
  10. mailchamp
  11. parallax.min
  12. popper.min
  13. template-scripts

setup your logo #back to top

put your logo in in img/header in png and without background

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

header backgrounds #back to top

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

for use one of them just copie the class of the grandient and past in body tag

				
						<-- start header -->
						<body class="your_grandient_code" >
						...
						...
						...
						</body>
  1. first grandient: defaut
  2. second grandient: second-color-styles
  3. third grandient: third-color-styles
  4. fourth grandient: fourth-color-styles

add you coutry to the dotted map#back to top

You can add your country to this map easly
just go to server-place-section serction and creat new span under the map image like this 

						<span style="top: X%;left: Y%;" >  <b> country name </b>  <small class="good">99.99%</small> </span>
  • country name : your server place
  • X : Vertical coordinates
  • Y : Horizontal coordinates

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 13 In a place (youremail@domain.net) and save the file , that's it :)

Setup the mailchamp#back to top

You can setup your maillchip list easly

just remplace the xxx with your Mailchimp signup URL ps:Where do I find the Mailchimp signup URL?
						<form action="xxx" method="get" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate form-subscribe">

Add new pages #back to top

you can use empty.html to create new pages
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 bredh-standard-two and bredh-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



-----------------------------------------------------------------------------------------
bredh version 1.2 (13/04/2019)
-----------------------------------------------------------------------------------------
- Add Gaming Servers Page
- Add SSL Certificate Page
- Add Services Status Page
- Add TeamSpeak Servers page

- add bredh moon RTL for WHMCS ( new )

-----------------------------------------------------------------------------------------
bredh version 1.1 (22/03/2019)
-----------------------------------------------------------------------------------------
- add new HTML style
- add new WHMCS style
- fix Responsive issue
- add new WHMCS template
- add 2 new WHMCS orderforms
- fix smoothscroll issue (js/smoothscroll.js)

-----------------------------------------------------------------------------------------
bredh 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.