WHMCS Zionhost Template Description

There are total 6 whmcs templates included for you in the WHMCS/templates folder of your purchased zip file (Zionhost – Web Hosting and Corporate WP Theme.zip). The 6 templates are:

  1. zionhost-alt-v8.3 [*Recommended]
  2. zionhost-alt-v8.2
  3. zionhost-alt-v8.1
  4. zionhost-alt-v8.0
  5. zionhost-alt-v7.10
  6. zionhost-alt-v7.9

You need to use just 1 of them in your WHMCS installation. Which one? It depends on which version of WHMCS you are using. Here we are going to explain more so that you can choose the correct one for you:

  1. Use zionhost-alt-v8.3 template [*Recommended] [ If your WHMCS version is 8.3 or later ]
  2. Use zionhost-alt-v8.2 template [ If your WHMCS version is 8.2.0 to 8.2.1 ]
  3. Use zionhost-alt-v8.1 template [ If your WHMCS version is 8.1.0 to 8.1.3 ]
  4. Use zionhost-alt-v8.0 template [ If your WHMCS version is 8.0.0 to 8.0.4 ]
  5. Use zionhost-alt-v7.10 template [ If your WHMCS version is between 7.10.0 to 7.10.2 ]
  6. Use zionhost-alt-v7.9 template [ If your WHMCS version is 7.9 to 7.9.2 ]

NOTE: To simplify the documentation, we are describing here how to use ‘zionhost-alt-v8.2’ in WHMCS version 8.2.x. The instructions are same for the other versions also.

How to upload and activate Zionhost-Alt Template on WHMCS

Step 1: Access your WHMCS site through FTP or cPanel. Now, navigate to the /templates directory of your WHMCS. The following screenshot is the ‘templates’ directory of your WHMCS installation.

WHMCS templates folder location

Step 2: Upload our given template folder ‘zionhost-alt-v8.2’ into the ‘templates’ directory of your WHMCS (as shown above). The following screenshot is showing you the ‘zionhost-alt-v8.2’ folder, which is placed in the WHMCS/templates folder of your purchased zip file (Zionhost – Web Hosting and Corporate WP Theme.zip).

Zionhost templates location

Step 3: After successfully uploading the ‘zionhost-alt-v8.2’ folder on your WHMCS, you can activate the template from your WHMCS admin. Login to your WHMCS admin panel and navigate to Admin > System Settings > General Settings > General tab. In this page you will find ‘Template’ option, where you will choose ‘Zionhost-Alt’ as your template and click on ‘Save Changes’ button.

Choose Zionhost-Alt template

Zionhost-Alt template is Activated. Now you can visit the front-end of your WHMCS and you will find the template is ready with demo header and footer content.

How to Edit Header Content of the template

Step 1: First of all make sure your WordPress website‘s header customization including menu creations are done.

Step 2: Once you are satisfied then open your WordPress website in a browser and press ctrl+u. You will see a new tab is opened with the html of your site.

Step 3: Start copying html lines from where it says ‘COPY START FROM THIS LINE TO PLACE THIS INTO THE HEADER.TPL OF WHMCS Zionhost-alt TEMPLATE’ and Stop copying when it says COPY END TILL THIS LINE TO PLACE THIS INTO THE HEADER.TPL OF WHMCS Zionhost-alt TEMPLATE.

Step 4: Now navigate to the folder ‘zionhost-alt-v8.2‘ and ‘edit’ the ‘header.tpl‘ file and paste the copied html into the header.tpl file. In the header.tpl file you will see a line says ‘CODES FROM ZIONHOST THEME HEADER GOES BELOW (DO not touch the codes above this line)’ and another line says ‘END CODES FROM ZIONHOST THEME HEADER (DO not touch the codes below this line)’. You should remove all the codes between these two lines and paste your copied html here.

Location of header.tpl file
Edit header.tpl file

Step 1: At first make sure your WordPress website‘s footer customization are done.

Step 2: Once you are satisfied then open your WordPress website in a browser and press ctrl+u. You will see a new tab is opened with the html of your site.

Step 3: Start copying html lines from where it says ‘COPY START FROM THIS LINE TO PLACE THIS INTO THE FOOTER.TPL OF WHMCS Zionhost-alt TEMPLATE’ and Stop when it says ‘COPY END TILL THIS LINE TO PLACE THIS INTO THE FOOTER.TPL OF WHMCS Zionhost-alt TEMPLATE’.

Step 4: Now navigate to the folder ‘zionhost-alt-v8.2‘ and ‘edit’ the ‘footer.tpl‘ file and paste the copied html into the footer.tpl file. In the footer.tpl file you will see a line says ‘CODES FROM ZIONHOST THEME FOOTER GOES BELOW (DO not touch the codes above this line)’ and another line says ‘CODES FROM ZIONHOST THEME FOOTER GOES ABOVE (DO not touch the codes below this line)’. You should remove all the codes between these two lines and paste your copied html here.

Location of footer.tpl file
Edit footer.tpl file

How to choose correct Order Form

Zionhost template for WHMCS is built for using the ‘Standard Cart’ Order Form template. So, you need to make sure that you have login to your whmcs admin panel and then go to System Settings > General Settings > Ordering tab and choose ‘Standard Cart‘ as your default order form template.

Standard Cart order form

How to Add WHMCS page(s) to WordPress Website Menu

You can add your WHMCS page as a Custom link of your WordPress Menu. Visit WP-Admin > Appearance > Menus and then follow the below screenshot.

Linking to WordPress Menu

How to Change the Color of the Template

To change the color of your template, please open header.tpl file and find the following section of codes between around 20 to 40 no. lines:

Color CSS lines

From the above code uncomment any of the color css line which you want to use. For example if you want to use the red color, the above section of code should be like this:

Uncommenting red color

However, if you want a custom color to use instead of any of the pre-defined colors, then the procedure is as follows:

From the header.tpl file uncomment any one color css line. For example, you can uncomment the green color css line:

Find that green.css file from your whmcs template zionhost-alt-v8.2, which is present in this folder (css/zionhostcss/colors). In that green.css file, Replace all the green color code (#49a32b) to your custom color code.

For example, your chosen custom color code is this (#FA8072). Then, the css lines of green.css will be like this:

.kbcategories a{
     color: #FA8072; /**#FA8072 is your color code here**/
 }

Instead of this :

.kbcategories a{
     color: #49a32b; /**#49a32b is the green color code**/
 }

To replace the default logo with your logo, please open the custom.css file, which is located in the css folder of the template zionhost-alt-v8.2. Put the following css code at the bottom of the custom.css file:

.navbar-brand.logo {
     background: url(YOUR-LOGO-URL-HERE) no-repeat left 21px !important;
 }
Note: Replace 'YOUR-LOGO-URL-HERE' with your original logo url.
For example, if your logo url is: https://www.yourdomain.com/wp-content/uploads/2017/01/Logo.png, then the css code will be:
.navbar-brand.logo {
     background: url(https://www.yourdomain.com/wp-content/uploads/2017/01/Logo.png) no-repeat left 21px !important;
 }

How to Change the Favicon

To replace default favicon with your own favicon, please go to your whmcs template’s css/image folder and find this file: favicon-16×16.png. Delete this png file and upload your favicon png image in the folder and rename it exactly as ‘favicon-16×16.png‘.

Offline Documentation

You have a ‘WHMCS-Documentation‘ folder in the WHMCS folder of your purchased files. Open that folder and open index.html file of that folder in a browser. You will have all the required instructions to setting up the whmcs template.

About The Author