Difference between revisions of "Client Area Template Files"
(→Customising to Match Your Website) |
(DOCS-6350) |
||
| Line 1: | Line 1: | ||
=Intro= | =Intro= | ||
| − | + | WHMCS always endeavours to make the system customisable. 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 [[Template Syntax|Smarty template system]] allows you to: | |
| − | *Customise the layout and content of the client area fully | + | *Customise the layout and content of the client area fully. |
| − | *Make use of file includes for common elements shared between pages | + | *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)''' | #'''Header Template (header.tpl)''' | ||
| Line 13: | Line 12: | ||
#'''Footer Template (footer.tpl)''' | #'''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 | + | 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. 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 | + | '''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== | ==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. So to do this, perform the following steps: | |
#Duplicate one of the standard folders in the templates folder (default, portal, classic) and rename it to a custom name | #Duplicate one of the standard folders in the templates folder (default, portal, classic) and rename it to a custom name | ||
#The directory name should be all one word and consist of just lowercase letters and numbers. | #The directory name should be all one word and consist of just lowercase letters and numbers. | ||
| − | #Now make your customisations and changes as desired | + | #Now make your customisations and changes as desired. See section below for more details on this. |
| − | #Once complete, upload | + | #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 info on this. |
| − | #Once | + | #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== | ==Customising to Match Your Website== | ||
| − | What most people want to do | + | 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 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. |
[[File:Videotutorial.png|center|link=https://www.youtube.com/watch?v=9VkbPoVTHYg&hd=1|Watch Video Tutorial]] | [[File:Videotutorial.png|center|link=https://www.youtube.com/watch?v=9VkbPoVTHYg&hd=1|Watch Video Tutorial]] | ||
| Line 41: | Line 37: | ||
===Customising how payment gateways are displayed=== | ===Customising how payment gateways are displayed=== | ||
| − | There may be occasion where it's desirable to customise the way payment gateways | + | 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 | + | 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 | + | 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''': |
<source lang="php"> | <source lang="php"> | ||
| Line 53: | Line 49: | ||
</source> | </source> | ||
| − | The image tag could be replaced with any code you wanted to display there. | + | 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. |
| − | Replace 'paypal' with the name of your payment module | ||
Revision as of 11:42, 29 December 2015
Contents
Intro
WHMCS always endeavours to make the system customisable. 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. 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 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. So to do this, perform the following steps:
- Duplicate one of the standard folders in the templates folder (default, portal, classic) 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 info on this.
- 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 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.