Revision as of 15:46, 29 March 2011

We've tried to make WHMCS as easy to customise as possible for our users. All pages of the client area is templated to allow you to change the look and feel of every aspect of the system. In WHMCS we use the powerful Smarty template system which allows you to:

• Customise the layout and content of the client area
• Add your own HTML & PHP code to enhance and extend
• Customise text strings within the lanuage files

A page is made up of three templates that are combined in this order:

header.tpl
The Page 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 numerous other template files, these take the place of 'The Page Template' above. These templates define what is displayed on each page and are named so that you can easily identify which template relates to which page. So 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.

The Basic Steps

1. Duplicate the "default" folder in the templates folder and rename it to a custom name
2. You can then make your changes to the template files as required - header.tpl and footer.tpl affect the header and footer of all pages - all other template files are for their respective pages
3. Once complete, upload your new templates folder to the templates directory of WHMCS on your server
4. You can then preview your new template by specifying it "on the fly" using an url such as www.yourdomain.com/whmcs/?systpl=xxxxx where xxxxx is the name of your new template. See Linking to WHMCS for more info.
5. Finally, once you're happy with it, to set it live for display by default, login to the admin area, go to Setup > General Settings and on the first tab of the general settings choose your custom template name from the Template dropdown menu.

Whichever template is selected here is referred to throughout the documentation as the active template folder. The same can be said of the order form template selected in Setup > General Settings > Ordering tab.

See also Template Syntax

Integrating Your Template

Following on from the above steps it is a simple process to customise the WHMCS templates to match your existing website design. Begin by copying and pasting the portion of the HTML code which controls the top of the page into the header.tpl file. Then copy and paste the footer code from your website design into footer.tpl as illustrated below.