Installing Templates

WHMCS Client Area

Step One - Unzip the download pack. Inside, you can find three folders. Check "dashboard" folder;

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

Step Three - Finally, go to WHMCS Admin Panel. Click on Setup -> General Settings. Set "template" to "horn" for example. That's it.

- Also learn how to install WHMCS Video

- Apply the same steps for RTL version

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 'horn' folder inside 'dashboard' folder the whole package you download from ThemeForest. The error could also mean that you are trying to install the Horn Theme on a WordPress platform. As already said, Horn is not a WordPress Theme.

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 Install again the Horn WHMCS Client Area;
7 If the above suggestions do not solve please contact your hosting provider.

WHMCS Order Form

Step One - Unzip the download pack. Inside, you can find three folders. Check "orderform" folder;

Step Two - Now, and assuming that your WHMCS platform was been yet installed, open your FTP Client (FileZilla for example), and upload the 'horn' folder to inside orderform 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 "horn" 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: 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/Horn/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 Horn WHMCS Email Template. You can use the Horn 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 Horn 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/Horn/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.

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 Horn 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 Horn 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/Horn/newsletter/img

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

Customize Layout

Elements

Editing Logo

You just need to upload of your logo with the name "logo.svg" to "whmcs -> templates -> horn -> assets -> img" Please note, If you have no skills with any vector image editor software, tell me and I will provide your custom logo according Horn logo.

Editing Favicon

You just need to upload of your favicon with the name "favicon.ico" to "whmcs -> templates -> horn -> assets -> img" Please note, If you have no skills with any vector image editor software, tell me and I will provide your custom logo according Horn logo.

Editing Navbar (menu)

To customize the Navbar, menus, submenus, links, icons and much more, according to your liking and style, just go to whmcs -> templates -> horn -> assets -> layout -> menu.tpl

Please Note! If you need to customize the Horn Theme to your liking and style, you should use "custom" files (custom.css & custom.js). Thus, you can added and replace all files or code lines updated, following the change-log file without losing your configurations already implemented. So, just add your codes in whmcs -> templates -> horn -> css -> custom.css

Sections

Edit Slider

Horn comes with the latest and modern Flickity plugin. So, to customize the slider, go to whmcs -> templates -> horn -> assets -> layouts -> sections -> slider.tpl. You can add, edit or delete the any slider you want. Each slider are commented to help you on customization. To learn all about Flickity plugin go to Flickity touch, responsive, flickable carousels.

<div class="carousel-cell overlay">
    <div> Content...</div> 
</div>

Edit Plans

To customize the plans section, go to whmcs -> templates -> horn -> assets -> layouts -> sections -> plans.tpl. You can add, edit or delete the any plans you want. Each plan are commented to help you on customization.

Please, remember! Horn was developed based on Bootstrap Framework and this case, you can build layouts of all shapes and sizes thanks to a twelve column system, five default responsive tiers, Sass variables and mixins, and dozens of predefined classes. However, I recomend only five columns (plans) for each row. Please, learn more about Bootstrap Grid here

<div class="col-md-4">
    <div> Content...</div> 
</div>

Edit Features

To customize the features boxs section, go to whmcs -> templates -> horn -> assets -> layouts -> sections -> features.tpl. You can add, edit or delete the any boxs you want. Each box are commented to help you on customization.

Please, remember! Horn was developed based on Bootstrap Framework and this case, you can build layouts of all shapes and sizes thanks to a twelve column system, five default responsive tiers, Sass variables and mixins, and dozens of predefined classes. However, I recomend only five columns (plans) for each row. Please, learn more about Bootstrap Grid here

<div class="col-md-4">
    <div> Content...</div> 
</div>

Resources

Change Color

Choice your delicious color in real time. Pink, Blue, Green or Dark mode. You can also create a specific color that fits your core business model easily and intuitively. Follow the steps below.

Step One - Follow to settings.tpl file and search for "data-rel="pink" as example.
Now, replace the data-rel="pink" and "class="pink" to "class="red" and data-rel="red" for example.
As the below example;

<div class="red" data-container="body" data-toggle="popover" data-trigger="hover" data-placement="left" data-content="Red Mode" ><a class="styleswitch" href="#" data-rel="red"></a></div>

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

Step Three - Finally, change the pink link tag to red tag, inside the "head.tpl" file, like below example. Path: (whmcs -> templates -> horn -> includes -> head.tpl)

<link href="{$WEB_ROOT}/templates/{$template}/assets/css/colors/red.css" rel="stylesheet" title="red"/>

Please Note! If you want to keep one of the standard colors already included, go to the end of "head.tpl" file and remove the another tag links that you not need.

Sticky Menu

If you want to keep the always fixed menu, do you just need put the below class, inside the "custom.css" file, like this: body#layout01 .navbar.header {position: fixed !important;}

Please Note! If you need to customize the Horn Theme to your liking and style, you should use "custom" files (custom.css & custom.js). Thus, you can added and replace all files or code lines updated, following the change-log file without losing your configurations already implemented. So, just add your codes in whmcs -> templates -> horn -> css -> custom.css

Settings Bar

Through the Settings Bar do you can manage, configuration and preview part of Horn layout. To remove the Settings Bar, open the "header.tpl" file and remove the include call, like this:
{include file="$template/assets/layout/settings.tpl"}

RTL Version

Horn theme is also available in the RTL version. As you may know Arabic, Hebrew, Persian, and Urdu are the most widespread RTL writing systems in modern times. Please, preview Horn RTL Demo Theme here

To set Horn to Arabic Language, open your WHMCS Admin Area and following the steps:
setup -> General Settings -> Localisation tab and change the Default Country to Arabic Language

Theme Features

Sources and Credits

Mandatory Styles