Client Area Template Files

Home / Support / Documentation
From WHMCS Documentation
Jump to: navigation, search

Intro

We always endeavour to make WHMCS really customisable. So that users can always tailor it to their exact needs. So with that in mind, all pages of the WHMCS client area are templated to allow you to add/remove, and change the look and feel of everything. In WHMCS we use the powerful Smarty template system which allows you to:

  • Customise the layout and content of the client area fully
  • Make use of file includes for common elements shared between pages
  • Add your own PHP code directly into templates to compute or retrieve additional data
  • And make use of many other powerful features Smarty has to offer

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

  1. Header Template (header.tpl)
  2. Main Content Template (homepage.tpl, clientareahome.tpl, etc...)
  3. 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 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.

Before you start, please refer to the Template Syntax section of our docs for information on how to work with the templates in WHMCS.

Bootstrap Updates

Versions 5.0.x and below requires an update to the CSS bootstrap which can causes incompatibilities with heavily customized templates during the upgrade process. If upgrading from versions 5.0.x or below, it is recommended to create a new custom template from the updated bootstrap rather than attempting to update the old bootstrap. This is noted in the WHMCS 5.1 Change log ( http://docs.whmcs.com/Version_5.1_Changelog#Client_Area )

Creating a Custom Template

If you want to customise anything in the WHMCS templates, the first step we always recommend is to create your own template folder. You should never edit the default templates directly. So to do this, simply perform the following steps:

  1. Duplicate one of the standard folders in the templates folder (default, portal, classic) and rename it to a custom name
  2. The directory name should be all one word and consist of just lowercase letters and numbers.
  3. Now make your customisations and changes as desired (see section below for more details on this)
  4. Once complete, upload your new templates folder to the templates directory of WHMCS on your server
  5. You can preview your new template by specifying it using an url "on the fly" such as www.yourdomain.com/whmcs/?systpl=xxxxx where xxxxx is the name of your new template. See Linking to WHMCS for more info on this.
  6. Once you're happy with it and ready to show the world, you can set it live by going to Setup > General Settings and on the first tab of the general settings choosing your new custom template name from the Template's 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.

Customising to Match Your Website

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

Watch Video Tutorial


Customising how payment gateways are displayed

There may be occasion where it's desirable to customise the way payment gateways are displayed. 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 in v5.3 and above it isn't possible to enter HTML code into the display name or payment instruction fields. Instead you can customise the relevant template to display your desired code.

For example if you wanted to display some credit card logos when the PayPal payment method is selected on the printable invoice, the following code could be used 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.