###### Hybrid Design With ♥ by inebur

# Welcome

Thank you so much for purchasing the Antler - Hosting Provider & WHMCS Template.
If you have any questions that are not present this help document, please feel free to contact support here.

Before get started, I highly recommend you read with carefully this documentation file. Is simply a way of saving your time and avoid questions with obvious answers.

Item Name: Antler - Hosting Provider & WHMCS Template
Description: Antler Responsive Premium Template Designed for all web hosting providers
Author Envato: https://themeforest.net/user/inebur
Author: inebur (Rúben Rodrigues)
Copyright: 2024 inebur
Item Version: 3.8.1

Antler template was developed in HTML5 and CSS3 technology, based on the latest Bootstrap Framework. So, Basic HTML & CSS knowledge is required to customize Antler template. You may learn basics, through the links below:

HTML5 Tutorial here
CSS3 Introduction here
How to Customize an HTML Template here
The Best Way to Learn HTML here
Bootstrap Toolkit Framework here

## What is included?

Antler is the most complete hosting template of the Envato Market-Themeforest.
After downloading the Antler template, you will find 7 folders:

documentation - Everything you need to know will find inside this folder. WHMCS and Template Installation, Language Translation i18next system, set style change (settings), features, rules and support policy and much more. Please, preview Documentation Folder here

email - Install and customize your Antler WHMCS Email Template. You can use the custom email template for your own and send manually via WHMCS for all your customers.
Please, preview WHMCS Email Template here

graphic - If you need customize your patterns, graphics or logo, check this folder. All files are in fully customizable AI format. To edit your logo, do you just need open the logo.ai file in Adobe Illustrator or any vector image editor software. Please note, If you have no skills with any vector image editor software, contact us and we will provide your custom logo according the Antler logo.

newsletter - Like the Email Template, you are free to customize and add new component or sections according to your requirements. You can use the WHMCS Newsletter Template on your own newsletter templates (Email) and send manually or massive via WHMCS any time.
Please, preview WHMCS Newsletter Template here

order-form - WHMCS Order Form Templates define the look and feel of the shopping cart process.
Please, preview WHMCS Order Form Template here

template - Antler is a professional and responsive premium template developed with the latest HTML5 and CSS3 technology, based on the Bootstrap Framework and not a WordPress or CMS theme. Comes with 50+ powerful page templates, and 35+ custom short-code elements with special reference to the professional Filter of Dedicated Servers and Domains - Switch prices dynamically - And customize servers according to your needs
Please, preview Antler Demo Template here

whmcs-template - WHMCS Client Area or Custom Default SIX Template of WHMCS. WHMCS Client Area Template is a turn-key project developed by the WHMCS Group, allowing you to launch a new online business easily and efficiently. Basically, we only customize the standard layout, based on the Antler Demo Template.
Please, preview WHMCS Client Area Template. Please note, you can also find, inside this folder, the WHMCS template in RTL version. here

## Antler Highlights

- FYI, Antler load a single header and footer page included in several HTML pages to get more performance and easy customization. So, if you run your item in localhost, the header and footer not appear. You must upload the item to your server, i.e, in your hosting account.
- Antler comes with "i18next" Language Translation. I18next is a Internationalisation framework written in and for JavaScript and only menu "header" was been translation was example. Please learn more about I18next here or check below how to configure.
- WHMCS Order Form available and integrated with Antler Demo Template. Order Form Templates define the look and feel of the shopping cart process. Please, check below how to configure.
- WHMCS Email and Newsletter Templates fully customised, allow messages that go out to your customers when actions occur inside WHMCS. Please, check below how to configure.
- 70+ Illustration and Patterns in SVG or AI editable format. You are free to use and edit all illustration SVG images on any project. Or if you prefer, we can customize for you with costs.
- Choice your delicious color in real time. Purple, Blue and Green or simply create a specific color that fits your core business model easily and intuitively. Please, check Resouces Tab how to configure.

Hybrid Designer: Rúben Rodrigues
Contact Support: support@inebur.com
If you enjoy please: Rate Antler

## WHMCS Client Area

Antler Template included the Latest WHMCS and Order Form Template designed for all web hosting, business, multi purpose, domain sale websites, online business, personal blogs and similar sites.

WHMCS Client Area Template is a turn-key project developed by the WHMCS Group, allowing you to launch a new online business easily and efficiently. Basically, we only integrated and built the layout based on the Antler HTML demo template. To customize the WHMCS Client Area Platform, do you also need knowledge of the Front-end (HTML, CSS + PHP) code.

Please note that we are not WHMCS Platform expert and not developed any code to WHMCS Group. For this reason I recommend that you carefully read the documentation provided by the WHMCS Group here

# Installing Templates

## Antler Template

Step One - Unzip the download pack. Inside you can find 7 folders. Please, check the "template" folder and run/open the "index.html" file in any browser only to test. You can display or edit without an internet connection on your localhost. However, is recommended to upload the full content into your server;

Step Two - Open your FTP Client (FileZilla for example), and upload the full content inside the "template" folder to your Server Root;

Step Three - Finally, and once the files are done uploading, go to www.yourdomain.com

Please Note! It is likely that some links do not work. You need to remove the ".html" extension through the .htaccess file. The .htaccess file is a hidden text file that allows you to control the way visitors access your site. Some common uses of the .htaccess file would be restricting access to certain files or redirecting URLs.
By default you should have a .htaccess file created on your account in the following directory: /home/user/public_html/.htaccess Put the next code inside .htaccess file:
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^([^\.]+)$ $1.html [NC,L]

## WHMCS Client Area

Step One - Unzip the download pack, and find the "whmcs-template" folder;

Step Two - Now, and assuming that your WHMCS platform was been yet installed, open your FTP Client (FileZilla for example), and upload the 'antler' folder to inside "Templates" folder on your server
Path: whmcs -> templates;

Step Three - Finally, go to WHMCS admin panel. Click on Tool Icon (top right corner) -> General Settings. Set "template" to "Antler" for example. That's it.

Note - To check your template in RTL version, you just need enable the Hebrew or Arabic Language on "choose language" at the top of WHMCS Client Area page. RTL version

FYI - To select and start with a Hebrew or Arabic Language, go to WHMCS Language Settings

Learn - How to install WHMCS Video

Please Note! If you find some error installing the template like "Missing style.css" or something similar, please, make sure you are uploading the correct folder. It is important to have into account that the file you must to install is the 'Antler' folder inside 'whmcs-template' folder the whole package you download from ThemeForest.
If you see an "Oops" error page like this indicates an error occurred during the generation of the page. The error can be anything, from a simple notice or warning to a fatal error that halts execution. It's the PHP error reporting level on your server that determines which types of errors will trigger it.
Some suggestions to fix the issue:
1 Missing or corrupted files / incomplete uploads;
2 Server not meeting minimum system requirements;
3 PHP, Apache or Ioncube related errors;
4 Incompatible hooks or addons;
5 Syntax errors in custom modules, hooks or templates.
6 If the above suggestions do not solve please contact your hosting provider.

## Antler Order Form

Step One - Unzip the download pack and find the "order-form" folder;

Step Two - Now, and assuming that your WHMCS platform was been yet installed, open your FTP Client (FileZilla for example), and upload the "antler" folder to inside "orderforms" folder.
Path: whmcs -> templates -> orderforms;

Step Three - Finally, go to WHMCS admin panel. Click on Tool Icon (top right corner) -> General Settings -> Tab Ordering and set "Standard Cart" to "Antler" for example. That's it.

Apply the same steps for RTL version

Please Note! Next, you need to create and customize the plans. Go to Products and Services and create a new VPS Group for example. Path: Icon (tools) -> System Settings -> and click Products/Services
After been product edit (details, pricing, etc..) you need customize your Product Description. Go to Product Description in tab Details and implement the follow HTML code:

    <img class="svg" src="/whmcs/templates/orderforms/antler/fonts/svg/cloudlinux.svg">
    <div class="list-info"><i class="icon-drives"></i> <span class="spec">DISK</span><br> <span>90GB Disk Space</span></div>
    <div class="list-info"><i class="icon-speed"></i> <span class="spec">Bandwidth</span><br> <span>500GB Bandwidth</span></div>
    <div class="list-info"><i class="icon-email"></i> <span class="spec">Email Accounts</span><br> <span>35 Email Accounts</span></div>
    <div class="list-info"><i class="icon-domains"></i> <span class="spec">Domains</span><br> <span>10 Domains</span></div>

## WHMCS Email

Install and customize your Antler WHMCS Email Template. You can use the Antler Email Template your own email templates to serve as custom in all email you send manually via WHMCS.
To do that, do you just need config the header, footer and global CSS style in your WHMCS Admin Panel.
Please, follow the below steps:

Step One - Go to your WHMCS Admin Panel in the following directory: Icon (Tools) -> System Settings -> General Settings -> Email tab;

Step Two - Unzip the download Antler pack, and open the "email" folder. Inside email folder, you can find three files (header.html, footer.html and global.css) and one folder (img);

Step Three - Open the global.css file and copy all code. After, replace code inside "Global Email CSS Styling" field. Do the same process for the other elements;

Step Four - Finally, login to your FTP account, and upload "img" folder to your server.
Then, you must change the path/directory of the images, inside the header and footer files respectively.
Please check the follow example:

"img" Folder Directory: http://inebur.com/antler/email/img

Logo Image Directory: http://inebur.com/antler/email/img/logo.png

Please Note!
"Global Email CSS Styling" field should include the contents of the global.css file.
"Client Email Header Content" field should include the contents of the header.html file.
"Client Email Footer Content" field should include the contents of the footer.html file.
After copying the code, click on "Save Changes" and enjoy your newly configured email template.

Please Note!
The email templates allow you to customise the messages that go out to your customers when actions occur inside WHMCS. To customise an email template, click on the Tool Icon (top right corner) -> System Settings -> Email Templates and click the edit icon next to the template you want to change.

## WHMCS Newsletter

Like the Email Template, you are free to customize and add new component or sections according to your requirements. You can use the Antler Newsletter Template on your own newsletter templates (Email) and send manually or massive via WHMCS any time.
The newsletter will function only as the Email Template Content, ie, the header and footer already been configured during the installation of the Email Template and now, do you just need to configure the content.
Now, I'll explain how you can send Mass Newsletter (Mail) or to selective groups of your clients.
Let's go and Follow the below steps.

Step One - Go to your WHMCS Admin Panel in the following directory: Clients -> Mass Mail Tools. Now, choose the message type and some criteria;

Step Two - Unzip the download Antler pack, and open the "newsletter" folder. Inside newsletter folder, you can find a single "content.html" file, and one folder "img";

Step Three - Click in the Compose Message -> Help -> Source Code. Now, Open the "content.html" file and copy all code to window. Click in "OK" button to close the window and then click "Send Message";

Step Four - Finally, login to your FTP account, and upload "img" folder to your server. You should have particularly attention in the images directory, to upload the correctly files. In my case, I created "img" folder, inside the newsletter folder at http://inebur.com/antler/newsletter/img

Remember!
To install the Newsletter Template, do you need to first configure the Email Template.

# Language Translation

Antler comes with language translation. I18next is a Internationalisation framework written in and for JavaScript. If you would like to translate your html pages or add new language, see below how to do.

##### How Edit Translations Files?

All translations are stored inside simple JSON files, which can be edited even using simple Notepad. You can find this files in the following directory: template -> locales. Inside en-US folder, you can find translations.json file. This is the English translation file. Here is a small example of how JSON looks:

    "header": {
        "home": "Home",
        "services": "Hosting",
        "pages": "Pages",
        "features": "Features",
        "support": "Support",
        "login": "Client Area"
    },

Step One - Basically, you only need to provide a new locale’s folder name and then, put translations (JSON files) inside. It is a common practice to prefix the keys with the name (home, services. in this example). Keys are usually written in lowercase, with individual words separated by hyphens.

Step Two - Then add some HTML tag on the page with the "data-i18n" attribute. This attribute should have the value equal to the translation key you want to employ:

    <a class="h-stroke" href="index" data-i18n="[html]header.home"> </a>

Step Three - Now create a new switch (Button) inside the "header.html" file according your locale’s folder name created.

To set any language translation by default, open the "scripts.js" file and change the "localStorage.setItem('lng', 'en-US') & ; language = 'en-US';" according your requirements in 341 and 342 lines

This is it! The library will automatically search for all data-i18n attributes and replace the tag’s contents with the corresponding value. If you are not completely clear, please check all the documentation on the official i18next website at https://www.i18next.com/

Please Note! To add a new language translation, do you just need create a new folder for example de-DE and add translation.json file. You can find and change the translation buttons, inside header.html file. The translation by default is English Language, but you can change this inside scripts.js file from 139 to 172 line.
As an example, only the header was been translated. Please, check now.

##### How translate custom attributes with i18next (placeholder, value)

All you need is to put the custom attribute in front of the translation element, like this:

    <input data-i18n="[placeholder]header.login"> </input>

So just enter the attribute's name between [ ] and then the translation. more info

# Resources

## Change Settings

The settings bar was created to help you with your website settings. Adjust the Layout, Background, Color Scheme, Body font and more according your liking and requirements with a single click.

So, to set and change any style switch, open the "js/settings-init.js" file, and get inspired.
The settings are divide to 8 big section:

[layout, background, color, header, font, textDirection, radius and showSettings.]

    var optionSettings = {
        layout:"wide",
        background:"origin",
        color:"pink",
        header:"static",
        font:"opensans",
        textDirection:"ltr",
        radius:"defaultradius",
        showSettings:"show",
    };

Each section is divided into several styles, namely:

Layout Mode wide, frame, boxed, and wideboxed;

Background Style origin, dark or light. (Modern style in progress);

Color Scheme pink, blue, green and black;

Header Position static and fixed;

Body Font opensans, poppins, nunito and raleway;

Text Direction ltr or rtl;

Border Radius defaultradius, threeradius, sixradius or twelveradius ;

Settings show or hide.

NOTE: In case of WHMCS Client Area template, to remove the "Settings & Demo" buttons on the right side screen, open the "header.tpl" file and remove the following line of code:
{include file="$template/assets/layout/settings.tpl"}

IMPORTANT: If for some reason you need to use the settings sidebar according the Antler demo template live, you must change the (showSettings: "hide" to showSettings: "show") variable, via "js/settings-init.js" file.

## Load Header & Footer

If we say that we Antler Template only loads two common files (header.html and footer.html), across multiple HTML pages? Yes it's true! This allows you to save time on your customization and code multiplication, making your website with hight performance.

#### HTML Code - Put header and footer #id tags, inside ".index.html" for example

    <header id="header"> </header>
    <footer id="footer"> </footer>

#### Javascript Code - You can find inside scipts.js file

    function headerfooter(){
        $("#header").load("header.html", function(res, status, xhr){
            $('#drop-lng [data-lng="' + localStorage.getItem('lng') + '"]').addClass('xpto active');
            $('#drop-lng label').click(function(e){
                e.preventDefault();
                localStorage.setItem('lng', $(this).attr('data-lng'));
                location.reload(true);
            });
        });
        $("#footer").load("footer.html", function(res, status, xhr){
            $('#drop-lng [data-lng="' + localStorage.getItem('lng') + '"]').addClass('xpto active');
            $('#drop-lng label').click(function(e){
                e.preventDefault();
                localStorage.setItem('lng', $(this).attr('data-lng'));
                location.reload(true);
            });
        });
    }

## PHP Mail

Email setup is ready and works fine and you just have to set the recipient email inside the form-process.php file on 8 line, like this $EmailTo = "yourmail@antler.com";

#### PHP Code - Set the recipient email address

    <?php
    $name = $_POST["name"];
    $email = $_POST["email"];
    $subject = $_POST["subject"];
    $department = $_POST["department"];
    $message = $_POST["message"];

    $EmailTo = "yourmail@antler.com";
    $Subject = "New Message Received";

    ...
    ?>

# Template Features

Hot Latest Bootstrap Framework Ready

Hot Latest WHMCS Ready

Hot WHMCS Template Included

Hot Custom Order Form Template Available

Hot 50+ Real Hosting Demos

Hot 35+ Custom Shortcode Elements

Top Login and Domain Checker Integration

Pro I18next language translation available

Pro Filter of Dedicated Servers and Domains

Hot Switch prices dynamically

Hot Custom VPS Servers with interactive slider

Top Login, Register and Countdown full screen

Top Scalable vector graphics animation

Hot 70+ Illustration and Patterns in SVG & AI

Free Cloudicon - 300 Simple Line icons (Save $16)

- W3C validated HTML & CSS code

- Video modal and banner full screen

- Font Awesome Icons (Easy to use)

- Full Width Responsive Pricing Tables

- Responsive Layout Design

- Retina Display Ready)

Hot Choice your delicious color in real time

- Clean and Simple Design

- Google Fonts Supported

- Modern Browsers Compatible

- Custom Blog Page

- Free Live Chat

- Detailed Documentation

# Sources and Credits

#### Sources Fonts

Open Sans from google webfont;

Font Awesome vector icons and social logos

Cloudicon 300 simple line icons (Save $16)

#### Included Libraries

Bootstrap by Twitter

Mixitup by KunkaLabs

Isotope plugin by Metafizzy

Magnific-Popup plugin by Dimsemenov

Circliful plugin by Pguso

Swipper plugin by iDangero

Flickity by Metafizzy

#### Used Photos in Demo

Images used from Pixabay

Images used from Pexels

Images used from Unsplash

Images used from Freepik

All images are just used for preview purposes only and not included in the final purchase files.

# Mandatory Styles

#### Stylesheets (CSS)

Here's a list of the mandatory Stylesheet files. You can find more information opening each file:

vendors.min.css - Find all mandatory styles from third parties within this file

theme.min.css - Find all mandatory custom styles by INEBUR

bootstrap.min.css - Basic bootstrap stylesheet file Page

aos.min.css - Small javascript plugin that allows you to add animated effects Page

custom.css - Any custom styling you want to apply should be defined inside this file Page

#### JavaScript (JS)

Here's a list of the mandatory JavaScript files. You can find more information opening each file:

bootstrap.min.js - Basic bootstrap javascript file Page

scripts.js - Important JavaScript file for this template. Please note, that script.js unminified file is not running on any HTML files. However, were kept for safety and reference.

scripts.min.css - Most Important stylesheet file for this template. Please note, that scripts.min.css minified file, has been added and is running into the all HTML files, to get more performance for your website.

flickity.pkgd.min.js - JavaScript plugin for the full slider Page

slick.min.js - JavaScript file for all carousel on this template Page