Installing Templates

Antler Template

Step One - Unzip the download pack. Inside you can find seven 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, inside, you can find six folders. Check "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.
Path: whmcs -> templates;

Step Three - Finally, go to WHMCS admin panel. Click on Setup -> 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, inside, you can find five folders. Check "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 Setup -> 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, go to Setup -> 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

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

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

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

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

Sources and Credits

Mandatory Styles