Template Documentation for Bluerack - Powerful Hosting template with WHMCS template



Bluerack - Powerful Hosting template with WHMCS template

Bluerack is a clean,modern,colorful and fully responsive HTML5 Template with fully customized WHMCS template,it is built with illustration design in mind. Bluerack has unlimited options and ready to use layouts, perfect for hosting companies or any company which want to make "rebranding".With 3 different Pricing Tables, unique design pages, professional design and lightweight code, BlueRack is definitely one of the most Powerful web hosting template on ThemeForest.

Credits:

Author: Pleurat
Team: ThemeKolor
Year: 2018/2019
Email: themekolor@gmail.com

Table Of Contents:

- HTML Structure
- CSS Files and Structure
- JavaScript
- Icons and how to use fontawesome icons
WHMCS template documentation
- Sources and Credits

Message :)

Thank you for purchasing our template. 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



1.HTML Structure

Our template is based on Bootstrap framework,we also use Bootstrap grid system as well as default HTML Structure.


Want to know more about Bootstrap grid system? Here is an example :

Here is Bootstrap official documentation about grid system and other configuration : Official Bootstrap Documentation



2.CSS Files and Structure

We use two(2) different CSS Files: style.css and responsive.css
Each of these CSS files have different content


style.css - Is the main file,all colors,images,width,height,classes,navbar etc are within the style.css

responsive.css - Used only for responsive design.

Optional: bootsnav.css - is a default css file for our navbar.You don't really need to make custom changes on this file.


CSS Style Code example:

Lets take an example how to change the font size of our Main Title:

As you can see in the image below, our default font size is 33px, so if you want to change the font size to different PX you just need to change that number (33px).


3.JavaScript

Our main javascript file is custom.js - If you want to edit/add any javascript code, then this is the main file for that.


Javascript files used in this template:

js/jquery.js

js/AOS.js

js/bootstrap.min.js

js/validator.js

js/contact.js

js/bootsnav.js

js/custom.js - This is the main javascript file


Most of javascript files are used as "plugins", so you won't need to manually edit anything in the file.


3.9 On scroll animations

We use AOS Javascript library for our animations. You can read more about AOS library by following this link : AOS animation javascript library





4.FontAwesome Icons

We Use latest FontAwesome icons and some premium icons ( which are not available for commercial use ).
http://fontawesome.io/icons/

We use FontAwesome icons in two different ways :

1.Inside the HTML Code

Inside the CSS File (Style.css)

This is an example of FontAwesome icons using in HTML :
Here is a great documentation about FontAwesome icons : https://fontawesome.com/how-to-use/web-fonts-with-css


How to install Bluerack WHMCS template

Before you start with the installation, you need to connect to your host. You can do that by using FTP Connection (Remember: This tutorial is based on FileZilla FTP)

Now go to the downloaded file and you will see four(4) different folders:

Bluerack-WHMCS-template
Bluerack-HTML Template
Bluerack WHMCS Pricing tables
Documentation

Once you are connected to your host/server, go to the whmcs installation and look for a sub-directory named /templates and double click to navigate to it.

/public_html/whmcs/templates

Now upload "Bluerack-WHMCS-template" folder to your whmcs installation, exactly to: /public_html/whmcs/templates/

Once all the files and folders have been uploaded. Login to the Admin Panel of your WHMCS Installation and go to Setup > General Settings > General, look for the drop down selector that says “Template” select the template that you just uploaded, in our case is Bluerack-WHMCS-template. You are free to change the folder name, this is optional, you can use other name instead of "Bluerack-WHMCS-template".

How to Edit Bluerack WHMCS template

To change the WHMCS content or edit Bluerack Layouts, you need to edit these two files: Header.tpl and Footer.tpl

Open our WHMCS template folder and you will see some .tpl files and some folders. Now search for these two files and open with one of your code editors like (Visual Studio Code).

Please note: header.tpl is the main file, this is the file where you can edit most of the Bluerack Layouts or WHMCS Content.
footer.tpl contains only footer links and other footer content.
See images below

Start Editing header.tpl and footer.tpl

As we mentioned earlier, header.tpl contains all HTML Layouts that you see to the default HTML version.

So to start editing WHMCS Homepage you need to open header.tpl and start editing the HTML Code.


Please see the example below:

How to use WHMCS Images

All images and files that we use for Bluerack template are located in the "bluerack-files" folder. This folder is located inside the whmcs template.

Lets take an example:

We say that we want to replace the homepage header image:


Open header.tpl file and search for the home-header HTML Code (Please see the picture below)

The selected code is the code which you need to edit or even remove if you want to hide the image.


How to use WHMCS css sTYLING

If you want to make changes to any of the CSS that is applied by default, we recommend making those customisations inside of the bluerack-files/style/style.css file. This file is included after default WHMCS Style allowing you to override any of the CSS defined within it and will not be affected by future updates to the WHMCS software.


We strongly recommend adding your custom CSS rules to the bluerack-files/style/style.css file and not editing /css/styles.css directly as it will make updating easier.

How to install Bluerack Order Forms

One of the best Bluerack features is "Custom WHMCS Pricing tables".We have created custom pricing tables which you can use in your website.
In the download file you will see "Bluerack-WHMCS-Pricing-tables" folder. You just need to upload this folder to your whmcs installation (orderforms folder) and than active it by using your whmcs admin panel.

Navigate to: /public_html/whmcs/templates/ and upload "Bluerack-WHMCS-Pricing-tables" folder



Sources and Credits

We've used the following images, icons and javascript files:

Images:

unsplash.com

pexels.com

Icons:

fontawesome.io/icons/

Flaticon.com

Javascript:

Boostrap javascript file

Bootsnav

jQuery

fakelOader

Validator



Team: ThemeKolor

Author : Pleurat

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 ( contact us using themeforest contact form : ThemeKolor