Difference between revisions of "Client Area Template Files"
| Line 1: | Line 1: | ||
We always endavour 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 [[Template Syntax|Smarty template system]] which allows you to: | We always endavour 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 [[Template Syntax|Smarty template system]] which allows you to: | ||
| − | *Customise the layout and content of the client area | + | *Customise the layout and content of the client area fully |
| − | *Add your own | + | *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: | A page is made up of three templates that are combined in this order: | ||
Revision as of 02:07, 28 October 2011
We always endavour 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:
- 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 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.
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:
- Duplicate the "default" folder in the templates folder and rename it to a custom name
- The name should 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 your new templates folder to the templates directory of WHMCS on your server
- 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.
- 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.
We have created a video tutorial to provide additional help & guidance with this process @ http://whmcs.com/tutorials.php?i=customisation