Customizing the Six Themes inside WHMCS

Using WHMCS Source Control

WHMCS provides the Six theme as a read-only repository through Github. This enables you to create your template as it is controlled with Git. Through Git, you have the ability to pull in and auto-merge future changes.

Unable to use WHMCS Source Control

If you are unable to use the Source Control, you will need to create a new folder with the chosen name of your template. The directory name has to be all lowercase a-z 0-9 characters. Once the folder is created, upload a copy of the source files from the six template folder into your newly created folder. This will create a custom directory allow you to ensure that any changes aren’t lost when upgrading the theme. During the development and update of the Six theme, you have the ability to preview how your template looks without changing what your customers see on the live site. To review your changes before making them live, visit the URL: http://www.yourdomain.com/whmcs/?systpl=yourtemplatename

Third Party Assets by the WHMCS Six Theme

The six theme uses the latest available versions of the following libraries allowing you to can use any of the functionality offered by these libraries within the template files. Bootstrap – http://www.getbootstrap.com/ Font Awesome – http://fortawesome.github.io/Font-Awesome/ jQuery – http://www.jquery.com/

Bootstrap

Bootstrap is the HTML and CSS framework most commonly used inside the admin and client areas. For greater information on Bootstrap, visit their official website http://www.getbootstrap.com/ WHMCS stores all of the Bootstrap files in the /assets/ directory and are shared by the admin and client area. It is recommended that you do not make any changes to files inside the bootstrap files directly.

Customising the Design/Layout of WHMCS Six Theme

Header & Footer

The header and footer files are common on every page inside WHMCS The majority of users looking to personalize WHMCS first look to make changes to these two areas. By customizing these files allows you to match your website, and create a seamless experience for your customers. When editing the header and footer, we recommend you maintain all of the template includes and output variables in the default template files. This ensures full compatibility with add-ons and extensions you may install later. The navigation bar and sidebar content are defined inside WHMCS and then passed to the templates for output. Using this format allows current and future modules and add-ons to interact with and manipulate the header and footer areas of the client area dynamically. Listed in the footer template file are a number javascript codes immediately before the tag. These scripts are essential to how the client area operates. If these codes are removed from the footer template file, the site may not work correctly.

Include Files

Listed inside the WHMCS Six theme, are Include templates that are shared and used by multiple pages. These templates are located in the /includes/ sub-directory. The following include models are used on several pages in WHMCS. Please remember that editing any of these include templates it will affect everything inside WHMCS that uses the templates. Making sure to have a location to edit, and another to test during the upgrade process will allow you review all changes before published.

head.tpl This file defines the CSS & Javascript files included inside the section of a page.

navbar.tpl This controls the output of the navigation bar menu items listed inside WHMCS.

sidebar.tpl This include template controls the output of the sidebar menu items.

captcha.tpl This is used to output the captcha verification image wherever it is used in your system.

pwstrength.tpl Used to output the password strength meter and tooltip wherever used

tablelist.tpl Tablelist.tpl controls the output of all data that can be filtered inside the client area.

The Navigation bar

The WHMCS client area has two navigation bars inside of it. The primary navigation bar contains the majority of customer options and is located to the left of the secondary navigation bar. The secondary navigation bar contains items that are client specific and changes when a customer is logged in to WHMCS. If a client is not currently logged into WHMCS, then the secondary navigation bar will contain a login link. If the customer is logged into WHMCS, then the secondary menu contains links to the different areas of the customer’s account. WHMCS Responsive mode allows WHMCS to be viewed on different size screens. It is activated when the WHMCS client area is seen on a smaller device, and it will collapse the navbar into a fold out menu. Inside WHMCS the navigation bar elements are controllable allowing modules and hooks to interact with the menu bar but if you only want to edit how the bar looks and feels you can customise it inside the header.tpl and navbar.tpl template files. These two files are located in the /includes/ folder.

Configuring your Custom CSS Styling

Often developers want to make changes to the CSS that is default inside WHMCS. To edit the default CSS, it is recommended that you make all changes inside of the /css/custom.css file. The /css/custom.css file is included after styles.css allowing you to override any of the CSS inside the file. Any changes made to the /css/custom.css file will not be affected by updates to WHMCS. Please remember that we discourage you from making any changes to the /css/styles.css template. Making amendments to these files may cause WHMCS not to work correctly.

How to make your custom WHMCS Template Live

After you have done all of your changes and are happy with the results, you can follow the steps below to make the changes appear live on your site. 1. Login to the Admin Area of WHMCS. 2. Hover over the Setup menu and select General Settings. 3. In the General tab, you want to look under the Template setting. In this area select the name of the template you created. 4. After selecting your new template, click on Save Changes to make the template live. After the new template has been published any client logging into WHMCS will see the new changes to your site.

Was this article helpful?

Yes (19)
No (1)

We're sorry you didn't find this article very helpful. Please help us improve it by leaving your feedback below.

Error