Intro

WHMCS always endeavours to make the system as customisable as possible so that users can always tailor it to their exact needs. With that in mind, all pages of the WHMCS client area use templates. This allows a user to add/remove and change the look and feel of everything. In WHMCS, use of the powerful Smarty template system allows you to:

Customise the layout and content of the client area fully.
Make use of file includes for common elements shared between pages.
Make use of many other powerful features Smarty has to offer.

Most pages use three templates that combine to make up the output. These combine in this order:

Header Template (header.tpl)
Main Content Template (homepage.tpl, clientareahome.tpl, etc...)
Footer Template (footer.tpl)

The header and footer are common to every page displayed as a wrapper around the content. Within the template folders you will see many other template files. These take the place of 'The Page Template' above. These templates define the output on each page. The templates are also named so that you can identify which relates to which page. For example, the template that defines the WHMCS homepage at (yoursite.com/whmcs/) is homepage.tpl. The main client area page is clientareahome.tpl and so on.

Before starting, please refer to the Template Syntax section of the docs. This provides information on how to work with the templates in WHMCS.

Creating a Custom Template

When customising any WHMCS templates, the first step is to create another template folder. The default templates should never be edited directly. To do this, perform the following steps:

Duplicate one of the standard folders in the templates folder (six, five) and rename it to a custom name.
The directory name should be all one word and consist of just lowercase letters and numbers.
Now make your customisations and changes as desired. See section below for more details on this.
Once complete, upload the new templates folder to the templates directory of WHMCS.
Preview the new template by specifying it using an URL "on the fly". For example, www.yourdomain.com/whmcs/?systpl=xxxxx where xxxxx is the name of the new template. See Linking to WHMCS for more information.
Once happy with it, set it live by going to Setup > General Settings. On the first tab, choose the new custom template name from the Template's dropdown menu.

The template selected here will be referred to throughout the documentation as the active template folder. Likewise, the order form template selected in Setup > General Settings > Ordering.

Customising to Match Your Website

What most people want to do with customisation is integrate WHMCS to match the rest of their website. This can be a daunting task but it is fairly straightforward. Following on from the above, begin by copying the HTML which controls the top of your website design. Paste this into the header.tpl file of your custom template folder. Make sure to preserve the <head> section of code in the default WHMCS template. This contains the necessary CSS, Javascript Code & File Includes for WHMCS to function. Then copy and paste the footer code from your website design into footer.tpl.

Customising how payment gateways are displayed

There may be occasion where it's desirable to customise the way payment gateways display. For example, you may wish to add formatting, display images such as card logos, or any other code of your own.

Due to security considerations, it isn't possible to enter HTML into the display name or payment instruction fields. Instead, you can customise the relevant template to display your desired code.

For example, to display credit card logos when the PayPal is the payment method on the printable invoice, use the following code. This will be in /templates/*your active template*/viewinvoice.tpl:

{if $paymentmodule eq 'paypal'}
<img src="/images/creditcardlogos.png">
{/if}

The image tag could be replaced with any code you wanted to display there. Replace 'paypal' with the name of your payment module. The exact value can be obtained from the tblpaymentgateways table.

Customising the Six theme

Six is the name of the default client area template that ships with WHMCS 6.0 and later. With this template we have introduced a number of new resources that you can use to further customise your WHMCS installation. Two of these new features are briefly addressed below and detailed information on how to customise the Six theme can be found in the Customising_the_Six_Theme documentation.

Navigation and Sidebar Customisation

In the Six theme the look and feel of the navigation bar and sidebar elements can customised via the header.tpl and sidebar.tpl (located in /includes/) template files.

To make changes to the layout of the menus (i.e. adding, removing, and modifying items) please refer to the Editing Client Area Menus documentation.

Using GitHub

The Six theme is made available via GitHub and provides version-by-version changes of the “Six” template as published in WHMCS. The WHMCS "Six" template repository can be found at [[1]].