WHMCS 7.1 Asset Changes

Most of the template changes in the Six template involve the updated, faster rendering scripting provided by Version 7.1 If you have not modified the Six template, you are good to go! If you have modified the template, changes will be necessary for it to properly integrate with WHMCS.

First Things First

Check out the changelog for the Six template and Order forms, here:

Checking against the changelog will make sure the templates are up to date, as some changes were made to the location and contents of files, and some changes to form fields may require updates for the customized templates to interoperate with the back end.

Old File Includes Must Be Removed

Previous versions of the Six theme used individual files for each CSS stylesheet or JavaScript included in the application. In order to speed up the application and reduce concurrent connections, we now combine and minify Javascript and CSS files into a new include statement.

Any customizations made to your built-in CSS files will need to be moved to the "custom.css" file provided in your template directory, and any customized Javascripts will need to be included separately in your template.

All links, except to the Google Fonts API, the "all.min.css" file, the "custom.css" file, and the "scripts.min.js" file should be removed from the head.tpl and footer.tpl files.

Failure to remove stale links may cause Javascript errors, or odd rendering due to conflicting CSS rules.

Client area deprecated files

{$BASE_PATH_CSS}/bootstrap.min.css
{$BASE_PATH_CSS}/font-awesome.min.css
{$WEB_ROOT}/templates/{$template}/css/overrides.css
{$WEB_ROOT}/templates/{$template}/css/styles.css
{$BASE_PATH_CSS}/bootstrap-markdown.min.css
{$BASE_PATH_JS}/bootstrap.min.js
{$BASE_PATH_JS}/jquery.min.js
{$BASE_PATH_JS}/bootstrap-markdown.js
{$WEB_ROOT}/templates/{$template}/js/whmcs.js
{$BASE_PATH_JS}/AjaxModal.js

Admin Area also Deprecates

{$BASE_PATH_JS}/lightbox.min.js
{$BASE_PATH_JS}/icheck.min.js
{$BASE_PATH_JS}/Admin.js
{$BASE_PATH_JS}/AjaxModal.js
{$BASE_PATH_JS}/AdminDropdown.js
{$BASE_PATH_JS}/jquery-ui.min.js
{$BASE_PATH_JS}/selectize.js
{$BASE_PATH_JS}/bootstrap-switch.min.js
{$BASE_PATH_JS}/jquery.growl.js
{$BASE_PATH_JS}/AdminAdvSearch.js
templates/{$template}/head.js
{$BASE_PATH_CSS}/icheck/flat/blue.css
{$BASE_PATH_CSS}/jquery.growl.css
templates/{$template}/style.css
{$BASE_PATH_CSS}/jquery-ui.min.css
{$BASE_PATH_CSS}/bootstrap-switch.min.css
{$BASE_PATH_CSS}/lightbox.css
{$BASE_PATH_CSS}/selectize.bootstrap3.css

Flush the Smarty Cache

Delete the contents of the WHMCS install's /template_c/ directory before refreshing the site. There is also an option to clear the cache in Utilities > System > System Cleanup. This will ensure that Smarty recompiles all the templates as needed, and won't accidentally includes an old template into the application.

How to know things are working

Using the web browser's Inspector, take a look at the Network log for a page load. There should be only one JS file downloaded: "scripts.min.js", and only 2 CSS files downloaded: "all.min.css" and "custom.css". Any other CSS or JS files being downloaded and applied may cause page rendering failure or failures within JavaScripts.

No changes in styling were made to the Client Area, so the new files should cause the client area to look exactly the same as before.

Common Problems

Web Browser is still downloading extra files

Make sure to do a "hard refresh" (typically Shift+F5 on WIndows or Cmd+Shift+R on a Mac, but some browsers allow a right click on the refresh button), as the browser may have cached older versions of the website's files, which still contain the extra includes.

Ensure that the /template_c/ directory is cleaned out after updating the template files, to ensure that Smarty cleans up after itself.

Documentation