Installing Templates

Antler Template

Step One - Unzip the download pack. Inside you can find six folders. Check "template" folder and run index.html file in any browser. You can display or edit without an internet connection;

Step Two - Open your FTP Client (FileZilla for example), and upload the content of the template folder on 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.

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.

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: Setup -> Products/Services and click Products/Services

After been product edit (details, pricing, etc..) you need customize product description. Go to Product Description in tab Details and replace code for:

<img class="svg" src="/whmcs/templates/orderforms/antler/fonts/svg/vps.svg">
<div class="list-info">
    <i class="icon-cpu"></i> 
    <span class="spec">CPU</span><br> 
    <span>2 Cores</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: Setup -> 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.
You should have particularly attention in the images directory, to upload the correctly files. In my case, I created "img" folder, inside the email folder at http://inebur.com/antler/email/img

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.

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>

Resources

Change Color

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. Follow the steps below.

Step One - Follow to header.html file and search for "data-rel="pink". You can find at the end of file.
Now, replace the data-rel="pink" and "class="pink" to "class="red" and data-rel="red" for example.
As the below example;

<li class="red"><a href="#" data-rel="red" class="styleswitch"></a></li>

Step Two - Now, go to the pink.css file (path: template -> css -> colors). Change the file name to red.css. Open the CSS file and replace "#ee5586" pink hexa color to "#f62a2a" red color in all class;

Step Three - Finally, change the link tag in all HTML files to:

<link href="css/colors/red.css" rel="stylesheet" title="red"/>

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);
        });
    });
}

Template Features

Sources and Credits

Mandatory Styles