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.
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.9
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
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 gateio login 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
Hybrid Designer: Rúben Rodrigues
Contact Support: support@inebur.com
If you enjoy please: Rate Antler
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
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]
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. gate io
FYI - To select and start with a Hebrew or Arabic Language, go to gate.io app
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.
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>
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.
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.
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.
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.
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
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.
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.
<header id="header"> </header> <footer id="footer"> </footer>
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); }); }); }
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 $name = $_POST["name"]; $email = $_POST["email"]; $subject = $_POST["subject"]; $department = $_POST["department"]; $message = $_POST["message"]; $EmailTo = "yourmail@antler.com"; $Subject = "New Message Received"; ... ?>
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
Open Sans from google webfont;
Font Awesome vector icons and social logos
Cloudicon 300 simple line icons (Save $16)
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 gate.io app
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