|
|
| (13 intermediate revisions by 8 users not shown) |
| Line 1: |
Line 1: |
| − | =Intro= | + | <div class="docs-alert-info"> |
| − | 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 [[Template Syntax|Smarty template system]] which allows you to:
| + | <span class="title">Note</span><br /> |
| − | | + | This page has moved to [https://developers.whmcs.com/themes/ https://developers.whmcs.com/themes/] |
| − | *Customise the layout and content of the client area fully
| + | </div> |
| − | *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.
| |
| − | | |
| − | ==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.
| |
| − | | |
| − | | |
| − | ==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 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 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.
| |
| − | | |
| − | [[File:Videotutorial.png|center|link=http://www.youtube.com/watch?v=YbYkZSWymsk|Watch Video Tutorial]] | |