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.
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
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 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.
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.
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.
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.
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.