{"id":119,"date":"2016-06-21T19:50:24","date_gmt":"2016-06-21T19:50:24","guid":{"rendered":"https:\/\/fluentthemes.com\/knowledgebase\/maxhost\/?p=119"},"modified":"2025-05-13T00:36:12","modified_gmt":"2025-05-13T00:36:12","slug":"how-to-setup-whmcs","status":"publish","type":"post","link":"https:\/\/fluentthemes.com\/knowledgebase\/maxhost\/how-to-setup-whmcs\/","title":{"rendered":"How to Setup WHMCS Template?"},"content":{"rendered":"\n<p>There are total 20 WHMCS templates available for you. The 20 templates are:<\/p>\n\n\n\n<ol>\n<li>maxhostaltv813<\/li>\n\n\n\n<li>maxhostaltv813-tw <strong>[*Recommended]<\/strong><\/li>\n\n\n\n<li>maxhostaltv812<\/li>\n\n\n\n<li>maxhostaltv812-tw<\/li>\n\n\n\n<li>maxhostaltv811<\/li>\n\n\n\n<li>maxhostaltv811-tw<\/li>\n\n\n\n<li>maxhostaltv810<\/li>\n\n\n\n<li>maxhostaltv810-tw<\/li>\n\n\n\n<li>maxhostaltv89<\/li>\n\n\n\n<li>maxhostaltv89-tw<\/li>\n\n\n\n<li>maxhostaltv88<\/li>\n\n\n\n<li>maxhostaltv88-tw<\/li>\n\n\n\n<li>maxhostaltv87<\/li>\n\n\n\n<li>maxhostaltv86<\/li>\n\n\n\n<li>maxhostaltv85<\/li>\n\n\n\n<li>maxhostaltv84<\/li>\n\n\n\n<li>maxhostaltv83<\/li>\n\n\n\n<li>maxhostaltv82<\/li>\n\n\n\n<li>maxhostaltv81<\/li>\n\n\n\n<li>maxhostaltv80<\/li>\n<\/ol>\n\n\n\n<p>You need to <strong>use just 1 of them<\/strong> 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:<\/p>\n\n\n\n<ul>\n<li>Use <a href=\"https:\/\/fluentthemes.com\/wp\/maxhost\/whmcs\/index.php?systpl=maxhost-tw\" target=\"_blank\" rel=\"noreferrer noopener\">maxhostaltv813-tw<\/a> template OR <a href=\"https:\/\/fluentthemes.com\/wp\/maxhost\/whmcs\/index.php?systpl=maxhost\" target=\"_blank\" rel=\"noreferrer noopener\">maxhostaltv813<\/a> template [ If your WHMCS version is 8.13.0 or later ]<\/li>\n\n\n\n<li>Use maxhostaltv812-tw template OR maxhostaltv812 template [ If your WHMCS version is 8.12.0 or 8.12.1 ]<\/li>\n\n\n\n<li>Use <strong>maxhostaltv811-tw<\/strong> template OR <strong>maxhostaltv81<\/strong>1 [ If your WHMCS version is 8.11.0 to 8.11.2 ]<\/li>\n\n\n\n<li>Use <strong>maxhostaltv810-tw<\/strong> template OR <strong>maxhostaltv810<\/strong> [ If your WHMCS version is 8.10.0 to 8.10.1 ]<\/li>\n\n\n\n<li>Use <strong>maxhostaltv89-tw<\/strong> template OR <strong>maxhostaltv89<\/strong> [ If your WHMCS version is 8.9.0 ]<\/li>\n\n\n\n<li>Use <strong>maxhostaltv88-tw<\/strong> template OR <strong>maxhostaltv88<\/strong> [ If your WHMCS version is 8.8.0 ]<\/li>\n\n\n\n<li>Use <strong>maxhostaltv87<\/strong> [ If your WHMCS version is 8.7.0 to 8.7.3 ]<\/li>\n\n\n\n<li>Use <strong>maxhostaltv86<\/strong> [ If your WHMCS version is 8.6.0 to 8.6.1 ]<\/li>\n\n\n\n<li>Use <strong>maxhostaltv85<\/strong> [ If your WHMCS version is 8.5.0 to 8.5.1 ]<\/li>\n\n\n\n<li>Use <strong>maxhostaltv84<\/strong> [ If your WHMCS version is 8.4.0 to 8.4.1 ]<\/li>\n\n\n\n<li>Use <strong>maxhostaltv83<\/strong> template [ If your WHMCS version is 8.3.0 to 8.3.2 ]<\/li>\n\n\n\n<li>Use <strong>maxhostaltv82<\/strong> template [ If your WHMCS version is 8.2.0 to 8.2.1 ]<\/li>\n\n\n\n<li>Use <strong>maxhostaltv81<\/strong> template [ If your WHMCS version is 8.1.0 to 8.1.3 ]<\/li>\n\n\n\n<li>Use <strong>maxhostaltv80<\/strong> template [ If your WHMCS version is 8.0.0 to 8.0.4 ]<\/li>\n<\/ul>\n\n\n\n<div style=\"height:15px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<div class=\"schema-how-to\"><p class=\"schema-how-to-description\" id=\"howto-1\">How to Setup Maxhost Template on WHMCS<\/p> <ol class=\"schema-how-to-steps\"><li class=\"schema-how-to-step\" id=\"how-to-step-1630960188211\"><strong class=\"schema-how-to-step-name\">Access your WHMCS site<\/strong> <p class=\"schema-how-to-step-text\">Navigate your WHMCS site through FTP or cPanel. Now, navigate to the&nbsp;<strong>\/templates<\/strong>&nbsp;directory of your WHMCS. The following screenshot is the &#8216;templates&#8217; directory of your WHMCS installation.<img decoding=\"async\" alt=\"WHMCS Templates Folder\" src=\"https:\/\/fluentthemes.com\/knowledgebase\/maxhost\/wp-content\/uploads\/2021\/08\/templates-folder.png\"><\/p> <\/li><li class=\"schema-how-to-step\" id=\"how-to-step-1630960642782\"><strong class=\"schema-how-to-step-name\">Upload the Maxhost template inside the &#8216;templates&#8217; directory of WHMCS<\/strong> <p class=\"schema-how-to-step-text\">Upload the Maxhost whmcs template folder (e.g. maxhostaltv811-tw folder) inside the &#8216;templates&#8217; directory of your WHMCS. The following screenshot is showing you all the template folders, which are present in the&nbsp;<strong>WHMCS\/templates<\/strong>&nbsp;folder of your purchased zip file (Maxhost \u2013 Web Hosting and Corporate WP Theme.zip).<a href=\"https:\/\/fluentthemes.com\/knowledgebase\/maxhost\/wp-content\/uploads\/2024\/02\/upload-maxhost-whmcs-template.png\"><img decoding=\"async\" alt=\"Upload Maxhost WHMCS Template\" src=\"https:\/\/fluentthemes.com\/knowledgebase\/maxhost\/wp-content\/uploads\/2024\/02\/upload-maxhost-whmcs-template.png\"><\/a><\/p><p>Please note that if you find any of the above-mentioned template folders missing, open the &#8216;<strong>Read-me.txt<\/strong>&#8216; file present there and follow the instructions provided.<a href=\"https:\/\/fluentthemes.com\/knowledgebase\/maxhost\/wp-content\/uploads\/2025\/01\/max-whmcs-readme.png\"><img decoding=\"async\" alt=\"Maxhost WHMCS Template Readme Txt\" src=\"https:\/\/fluentthemes.com\/knowledgebase\/maxhost\/wp-content\/uploads\/2025\/01\/max-whmcs-readme.png\"><\/a><\/p> <\/li><li class=\"schema-how-to-step\" id=\"how-to-step-1630960756380\"><strong class=\"schema-how-to-step-name\">Activate Maxhost template from your WHMCS admin<\/strong> <p class=\"schema-how-to-step-text\">After successfully uploading your chosen template folder on your WHMCS, you can activate the template from your WHMCS admin. Login to your WHMCS admin panel and navigate to&nbsp;<strong>Admin &gt; System Settings &gt; General Settings &gt; General<\/strong>&nbsp;tab. In this page you will find&nbsp;<strong>&#8216;Template&#8217;<\/strong>&nbsp;option, where you will choose&nbsp;<strong>&#8216;Maxhost-Alt-Style-2&#8217;<\/strong>&nbsp;as your template and click on&nbsp;<strong>&#8216;Save Changes&#8217;<\/strong>&nbsp;button.<img decoding=\"async\" alt=\"Activate Maxhost WHMCS template\" src=\"https:\/\/fluentthemes.com\/knowledgebase\/maxhost\/wp-content\/uploads\/2021\/08\/activate-alt.png\"><\/p> <\/li><\/ol><\/div>\n\n\n\n<p><strong>Maxhost-Alt-Style-2<\/strong> 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.<\/p>\n\n\n\n<div style=\"height:25px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 id=\"maxhost-header-edit\">How to Edit Header Content of the template<\/h3>\n\n\n\n<p><strong>Step 1<\/strong>: First of all make sure your <strong>WordPress website<\/strong>&#8216;s header customization including <a href=\"https:\/\/fluentthemes.com\/knowledgebase\/maxhost\/how-to-setup-top-navigation-menu\/\">menu creations<\/a> are done.<\/p>\n\n\n\n<p><strong>Step 2<\/strong>: Once you are satisfied then open your WordPress website in a browser and press <strong>ctrl+u<\/strong>. You will see a new tab is opened with the html of your site.<\/p>\n\n\n\n<p><strong>Step 3<\/strong>: Start copying html lines from where it says <strong>&#8216;COPY START FROM THIS LINE TO PLACE THIS INTO THE HEADER.TPL OF WHMCS Maxhost-alt TEMPLATE&#8217;<\/strong> and Stop copying when it says <strong>COPY END TILL THIS LINE TO PLACE THIS INTO THE HEADER.TPL OF WHMCS Maxhost-alt TEMPLATE<\/strong>.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><a href=\"https:\/\/fluentthemes.com\/knowledgebase\/maxhost\/wp-content\/uploads\/2021\/08\/header-copy.png\"><img decoding=\"async\" loading=\"lazy\" width=\"985\" height=\"615\" src=\"https:\/\/fluentthemes.com\/knowledgebase\/maxhost\/wp-content\/uploads\/2021\/08\/header-copy.png\" alt=\"\" class=\"wp-image-273\" srcset=\"https:\/\/fluentthemes.com\/knowledgebase\/maxhost\/wp-content\/uploads\/2021\/08\/header-copy.png 985w, https:\/\/fluentthemes.com\/knowledgebase\/maxhost\/wp-content\/uploads\/2021\/08\/header-copy-300x187.png 300w, https:\/\/fluentthemes.com\/knowledgebase\/maxhost\/wp-content\/uploads\/2021\/08\/header-copy-768x480.png 768w, https:\/\/fluentthemes.com\/knowledgebase\/maxhost\/wp-content\/uploads\/2021\/08\/header-copy-60x37.png 60w, https:\/\/fluentthemes.com\/knowledgebase\/maxhost\/wp-content\/uploads\/2021\/08\/header-copy-150x94.png 150w\" sizes=\"(max-width: 985px) 100vw, 985px\" \/><\/a><figcaption class=\"wp-element-caption\">Header HTML<\/figcaption><\/figure><\/div>\n\n\n<p><strong>Step 4<\/strong>: Now navigate to the template folder (e.g. &#8216;<strong>maxhostaltv11-tw<\/strong>&#8216;) and &#8216;edit&#8217; the &#8216;<strong>header.tpl<\/strong>&#8216; file and paste the copied html into the header.tpl file. In the header.tpl file you will see a line says <strong>&#8216;CODES FROM MAXHOST THEME HEADER GOES BELOW (DO not touch the codes above this line)&#8217;<\/strong> and another line says <strong>&#8216;END CODES FROM MAXHOST THEME HEADER (DO not touch the codes below this line)&#8217;<\/strong>. You should remove all the codes between these two lines and paste your copied html here.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img decoding=\"async\" loading=\"lazy\" width=\"725\" height=\"517\" src=\"https:\/\/fluentthemes.com\/knowledgebase\/maxhost\/wp-content\/uploads\/2021\/08\/header-tpl-location.png\" alt=\"\" class=\"wp-image-242\" srcset=\"https:\/\/fluentthemes.com\/knowledgebase\/maxhost\/wp-content\/uploads\/2021\/08\/header-tpl-location.png 725w, https:\/\/fluentthemes.com\/knowledgebase\/maxhost\/wp-content\/uploads\/2021\/08\/header-tpl-location-300x214.png 300w, https:\/\/fluentthemes.com\/knowledgebase\/maxhost\/wp-content\/uploads\/2021\/08\/header-tpl-location-60x43.png 60w, https:\/\/fluentthemes.com\/knowledgebase\/maxhost\/wp-content\/uploads\/2021\/08\/header-tpl-location-150x107.png 150w\" sizes=\"(max-width: 725px) 100vw, 725px\" \/><figcaption class=\"wp-element-caption\">Location of header.tpl file<\/figcaption><\/figure><\/div>\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><a href=\"https:\/\/fluentthemes.com\/knowledgebase\/maxhost\/wp-content\/uploads\/2021\/08\/header-html.png\"><img decoding=\"async\" loading=\"lazy\" width=\"1024\" height=\"283\" src=\"https:\/\/fluentthemes.com\/knowledgebase\/maxhost\/wp-content\/uploads\/2021\/08\/header-html-1024x283.png\" alt=\"\" class=\"wp-image-243\" srcset=\"https:\/\/fluentthemes.com\/knowledgebase\/maxhost\/wp-content\/uploads\/2021\/08\/header-html-1024x283.png 1024w, https:\/\/fluentthemes.com\/knowledgebase\/maxhost\/wp-content\/uploads\/2021\/08\/header-html-300x83.png 300w, https:\/\/fluentthemes.com\/knowledgebase\/maxhost\/wp-content\/uploads\/2021\/08\/header-html-768x212.png 768w, https:\/\/fluentthemes.com\/knowledgebase\/maxhost\/wp-content\/uploads\/2021\/08\/header-html-60x17.png 60w, https:\/\/fluentthemes.com\/knowledgebase\/maxhost\/wp-content\/uploads\/2021\/08\/header-html-150x41.png 150w, https:\/\/fluentthemes.com\/knowledgebase\/maxhost\/wp-content\/uploads\/2021\/08\/header-html.png 1252w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><figcaption class=\"wp-element-caption\">Edit header.tpl file<\/figcaption><\/figure><\/div>\n\n\n<div style=\"height:25px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 id=\"maxhost-footer-edit\">How to Edit Footer Content of the template<\/h3>\n\n\n\n<p><strong>Step 1<\/strong>: At first make sure your <strong>WordPress website<\/strong>&#8216;s footer customization are done.<\/p>\n\n\n\n<p><strong>Step 2<\/strong>: Once you are satisfied then open your WordPress website in a browser and press <strong>ctrl+u<\/strong>. You will see a new tab is opened with the html of your site.<\/p>\n\n\n\n<p><strong>Step 3<\/strong>: Start copying html lines from where it says <strong>&#8216;COPY START FROM THIS LINE TO PLACE THIS INTO THE FOOTER.TPL OF WHMCS Maxhost-alt TEMPLATE&#8217;<\/strong> and Stop when it says <strong>&#8216;COPY END TILL THIS LINE TO PLACE THIS INTO THE FOOTER.TPL OF WHMCS Maxhost-alt TEMPLATE&#8217;<\/strong>.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><a href=\"https:\/\/fluentthemes.com\/knowledgebase\/maxhost\/wp-content\/uploads\/2021\/08\/footer-copy.png\"><img decoding=\"async\" loading=\"lazy\" width=\"833\" height=\"557\" src=\"https:\/\/fluentthemes.com\/knowledgebase\/maxhost\/wp-content\/uploads\/2021\/08\/footer-copy.png\" alt=\"\" class=\"wp-image-275\" srcset=\"https:\/\/fluentthemes.com\/knowledgebase\/maxhost\/wp-content\/uploads\/2021\/08\/footer-copy.png 833w, https:\/\/fluentthemes.com\/knowledgebase\/maxhost\/wp-content\/uploads\/2021\/08\/footer-copy-300x201.png 300w, https:\/\/fluentthemes.com\/knowledgebase\/maxhost\/wp-content\/uploads\/2021\/08\/footer-copy-768x514.png 768w, https:\/\/fluentthemes.com\/knowledgebase\/maxhost\/wp-content\/uploads\/2021\/08\/footer-copy-60x40.png 60w, https:\/\/fluentthemes.com\/knowledgebase\/maxhost\/wp-content\/uploads\/2021\/08\/footer-copy-150x100.png 150w\" sizes=\"(max-width: 833px) 100vw, 833px\" \/><\/a><figcaption class=\"wp-element-caption\">Footer HTML<\/figcaption><\/figure><\/div>\n\n\n<p><strong>Step 4<\/strong>: Now navigate to the folder (e.g. &#8216;<strong>maxhostaltv11-tw<\/strong>&#8216;) and &#8216;edit&#8217; the &#8216;<strong>footer.tpl<\/strong>&#8216; file and paste the copied html into the footer.tpl file. In the footer.tpl file you will see a line says <strong>&#8216;CODES FROM MAXHOST THEME FOOTER GOES BELOW (DO not touch the codes above this line)&#8217;<\/strong> and another line says <strong>&#8216;CODES FROM MAXHOST THEME FOOTER GOES ABOVE (DO not touch the codes below this line)&#8217;<\/strong>. You should remove all the codes between these two lines and paste your copied html here.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img decoding=\"async\" loading=\"lazy\" width=\"729\" height=\"523\" src=\"https:\/\/fluentthemes.com\/knowledgebase\/maxhost\/wp-content\/uploads\/2021\/08\/footer-tpl-location.png\" alt=\"\" class=\"wp-image-246\" srcset=\"https:\/\/fluentthemes.com\/knowledgebase\/maxhost\/wp-content\/uploads\/2021\/08\/footer-tpl-location.png 729w, https:\/\/fluentthemes.com\/knowledgebase\/maxhost\/wp-content\/uploads\/2021\/08\/footer-tpl-location-300x215.png 300w, https:\/\/fluentthemes.com\/knowledgebase\/maxhost\/wp-content\/uploads\/2021\/08\/footer-tpl-location-60x43.png 60w, https:\/\/fluentthemes.com\/knowledgebase\/maxhost\/wp-content\/uploads\/2021\/08\/footer-tpl-location-150x108.png 150w\" sizes=\"(max-width: 729px) 100vw, 729px\" \/><figcaption class=\"wp-element-caption\">Location of footer.tpl file<\/figcaption><\/figure><\/div>\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/fluentthemes.com\/knowledgebase\/maxhost\/wp-content\/uploads\/2021\/08\/footer-html.png\"><img decoding=\"async\" loading=\"lazy\" width=\"1024\" height=\"243\" src=\"https:\/\/fluentthemes.com\/knowledgebase\/maxhost\/wp-content\/uploads\/2021\/08\/footer-html-1024x243.png\" alt=\"\" class=\"wp-image-247\" srcset=\"https:\/\/fluentthemes.com\/knowledgebase\/maxhost\/wp-content\/uploads\/2021\/08\/footer-html-1024x243.png 1024w, https:\/\/fluentthemes.com\/knowledgebase\/maxhost\/wp-content\/uploads\/2021\/08\/footer-html-300x71.png 300w, https:\/\/fluentthemes.com\/knowledgebase\/maxhost\/wp-content\/uploads\/2021\/08\/footer-html-768x182.png 768w, https:\/\/fluentthemes.com\/knowledgebase\/maxhost\/wp-content\/uploads\/2021\/08\/footer-html-60x14.png 60w, https:\/\/fluentthemes.com\/knowledgebase\/maxhost\/wp-content\/uploads\/2021\/08\/footer-html-150x36.png 150w, https:\/\/fluentthemes.com\/knowledgebase\/maxhost\/wp-content\/uploads\/2021\/08\/footer-html.png 1225w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><figcaption class=\"wp-element-caption\">Edit footer.tpl file<\/figcaption><\/figure>\n\n\n\n<div style=\"height:25px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 id=\"maxhost-order-form\">How to choose correct Order Form<\/h3>\n\n\n\n<p>Maxhost template for WHMCS is built for using the &#8216;Standard Cart&#8217; Order Form template. So, you need to make sure that you have login to your whmcs admin panel and then go to <strong>System Settings &gt; General Settings &gt; Ordering<\/strong> tab and choose &#8216;<strong>Standard Cart<\/strong>&#8216; as your default order form template.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><a href=\"https:\/\/fluentthemes.com\/knowledgebase\/maxhost\/wp-content\/uploads\/2021\/08\/order-form.png\"><img decoding=\"async\" loading=\"lazy\" width=\"1024\" height=\"401\" src=\"https:\/\/fluentthemes.com\/knowledgebase\/maxhost\/wp-content\/uploads\/2021\/08\/order-form-1024x401.png\" alt=\"\" class=\"wp-image-250\" srcset=\"https:\/\/fluentthemes.com\/knowledgebase\/maxhost\/wp-content\/uploads\/2021\/08\/order-form-1024x401.png 1024w, https:\/\/fluentthemes.com\/knowledgebase\/maxhost\/wp-content\/uploads\/2021\/08\/order-form-300x117.png 300w, https:\/\/fluentthemes.com\/knowledgebase\/maxhost\/wp-content\/uploads\/2021\/08\/order-form-768x300.png 768w, https:\/\/fluentthemes.com\/knowledgebase\/maxhost\/wp-content\/uploads\/2021\/08\/order-form-60x23.png 60w, https:\/\/fluentthemes.com\/knowledgebase\/maxhost\/wp-content\/uploads\/2021\/08\/order-form-150x59.png 150w, https:\/\/fluentthemes.com\/knowledgebase\/maxhost\/wp-content\/uploads\/2021\/08\/order-form.png 1117w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><figcaption class=\"wp-element-caption\">Standard Cart order form<\/figcaption><\/figure><\/div>\n\n\n<div style=\"height:25px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 id=\"add-to-menu\">How to Add WHMCS page(s) to WordPress Website Menu<\/h3>\n\n\n\n<p>You can add your WHMCS page as a Custom link of your WordPress Menu. Visit <strong>WP-Admin &gt; Appearance &gt; Menus<\/strong> and then follow the below screenshot.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img decoding=\"async\" loading=\"lazy\" width=\"479\" height=\"413\" src=\"https:\/\/fluentthemes.com\/knowledgebase\/maxhost\/wp-content\/uploads\/2021\/08\/add-to-menu.png\" alt=\"\" class=\"wp-image-252\" srcset=\"https:\/\/fluentthemes.com\/knowledgebase\/maxhost\/wp-content\/uploads\/2021\/08\/add-to-menu.png 479w, https:\/\/fluentthemes.com\/knowledgebase\/maxhost\/wp-content\/uploads\/2021\/08\/add-to-menu-300x259.png 300w, https:\/\/fluentthemes.com\/knowledgebase\/maxhost\/wp-content\/uploads\/2021\/08\/add-to-menu-60x52.png 60w, https:\/\/fluentthemes.com\/knowledgebase\/maxhost\/wp-content\/uploads\/2021\/08\/add-to-menu-150x129.png 150w\" sizes=\"(max-width: 479px) 100vw, 479px\" \/><figcaption class=\"wp-element-caption\">Linking to WordPress Menu<\/figcaption><\/figure><\/div>\n\n\n<div style=\"height:25px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 id=\"change-maxhost-template-color\">How to Change the Color of the Template<\/h3>\n\n\n\n<p>To change the color of your template, please open <strong>header.tpl<\/strong> file and find the following section of codes between around <strong>20 to 40 no. lines<\/strong>:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img decoding=\"async\" loading=\"lazy\" width=\"872\" height=\"215\" src=\"https:\/\/fluentthemes.com\/knowledgebase\/maxhost\/wp-content\/uploads\/2021\/08\/color-css.png\" alt=\"\" class=\"wp-image-253\" srcset=\"https:\/\/fluentthemes.com\/knowledgebase\/maxhost\/wp-content\/uploads\/2021\/08\/color-css.png 872w, https:\/\/fluentthemes.com\/knowledgebase\/maxhost\/wp-content\/uploads\/2021\/08\/color-css-300x74.png 300w, https:\/\/fluentthemes.com\/knowledgebase\/maxhost\/wp-content\/uploads\/2021\/08\/color-css-768x189.png 768w, https:\/\/fluentthemes.com\/knowledgebase\/maxhost\/wp-content\/uploads\/2021\/08\/color-css-60x15.png 60w, https:\/\/fluentthemes.com\/knowledgebase\/maxhost\/wp-content\/uploads\/2021\/08\/color-css-150x37.png 150w\" sizes=\"(max-width: 872px) 100vw, 872px\" \/><figcaption class=\"wp-element-caption\">Color CSS lines<\/figcaption><\/figure><\/div>\n\n\n<p>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:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img decoding=\"async\" loading=\"lazy\" width=\"873\" height=\"218\" src=\"https:\/\/fluentthemes.com\/knowledgebase\/maxhost\/wp-content\/uploads\/2021\/08\/color-css-2.png\" alt=\"\" class=\"wp-image-254\" srcset=\"https:\/\/fluentthemes.com\/knowledgebase\/maxhost\/wp-content\/uploads\/2021\/08\/color-css-2.png 873w, https:\/\/fluentthemes.com\/knowledgebase\/maxhost\/wp-content\/uploads\/2021\/08\/color-css-2-300x75.png 300w, https:\/\/fluentthemes.com\/knowledgebase\/maxhost\/wp-content\/uploads\/2021\/08\/color-css-2-768x192.png 768w, https:\/\/fluentthemes.com\/knowledgebase\/maxhost\/wp-content\/uploads\/2021\/08\/color-css-2-60x15.png 60w, https:\/\/fluentthemes.com\/knowledgebase\/maxhost\/wp-content\/uploads\/2021\/08\/color-css-2-150x37.png 150w\" sizes=\"(max-width: 873px) 100vw, 873px\" \/><figcaption class=\"wp-element-caption\">Uncommenting red color<\/figcaption><\/figure><\/div>\n\n\n<p>However, if you want a custom color to use instead of any of the pre-defined colors, then the procedure is as follows:<\/p>\n\n\n\n<p>From the header.tpl file uncomment any one color css line. For example, you can uncomment the green color css line which is like this:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" loading=\"lazy\" width=\"887\" height=\"219\" src=\"https:\/\/fluentthemes.com\/knowledgebase\/maxhost\/wp-content\/uploads\/2021\/08\/custom-one.png\" alt=\"\" class=\"wp-image-255\" srcset=\"https:\/\/fluentthemes.com\/knowledgebase\/maxhost\/wp-content\/uploads\/2021\/08\/custom-one.png 887w, https:\/\/fluentthemes.com\/knowledgebase\/maxhost\/wp-content\/uploads\/2021\/08\/custom-one-300x74.png 300w, https:\/\/fluentthemes.com\/knowledgebase\/maxhost\/wp-content\/uploads\/2021\/08\/custom-one-768x190.png 768w, https:\/\/fluentthemes.com\/knowledgebase\/maxhost\/wp-content\/uploads\/2021\/08\/custom-one-60x15.png 60w, https:\/\/fluentthemes.com\/knowledgebase\/maxhost\/wp-content\/uploads\/2021\/08\/custom-one-150x37.png 150w\" sizes=\"(max-width: 887px) 100vw, 887px\" \/><\/figure>\n\n\n\n<p>Find that <strong>green.css<\/strong> file from your whmcs template folder, which is present in this directory (<strong>css\/maxhostcss\/colors<\/strong>). In that green.css file, Replace all the green color code (<strong>#49a32b<\/strong>) to your custom color code.<\/p>\n\n\n\n<p>For example, your chosen custom color code is this (#FA8072). Then, the css lines of green.css will be like this:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">.kbcategories a{\n     color: <strong>#FA8072<\/strong>; \/**<strong><em><strong><em><strong>#FA8072<\/strong> <\/em><\/strong><\/em><\/strong><em><em>is your color code here<\/em><\/em>**\/\n }<\/pre>\n\n\n\n<p><em>Instead of this<\/em> :<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">.kbcategories a{\n     color: <strong>#49a32b<\/strong>; \/**<strong><em><strong><em><strong>#49a32b<\/strong> <\/em><\/strong><\/em><\/strong><em><em>is the green color code<\/em><\/em>**\/\n }<\/pre>\n\n\n\n<div style=\"height:25px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 id=\"change-maxhost-template-logo\">How to Change the Logo<\/h3>\n\n\n\n<p>To replace the default logo with your logo, please open the <strong>custom.css<\/strong> file, which is located in the <strong>css<\/strong> folder of the template. Put the following css code at the bottom of the <strong>custom.css<\/strong> file:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">.navbar-brand.logo {\n     background: url(YOUR-LOGO-URL-HERE) no-repeat left 21px !important;\n }\n<span class=\"has-inline-color has-vivid-red-color\">Note: Replace 'YOUR-LOGO-URL-HERE' with your original logo url.<\/span>\nFor example, if your logo url is: https:\/\/www.yourdomain.com\/wp-content\/uploads\/2017\/01\/Logo.png, then the css code will be:\n.navbar-brand.logo {\n     background: url(https:\/\/www.yourdomain.com\/wp-content\/uploads\/2017\/01\/Logo.png) no-repeat left 21px !important;\n }<\/pre>\n\n\n\n<div style=\"height:25px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 id=\"change-maxhost-template-favicon\">How to Change the Favicon<\/h3>\n\n\n\n<p>To replace default favicon with your own favicon, please go to your whmcs template&#8217;s <strong>css\/image<\/strong> folder and find this file: <strong>favicon-16&#215;16.png<\/strong>. Delete this png file and upload your favicon png image in the folder and rename it exactly as &#8216;<strong>favicon-16&#215;16.png<\/strong>&#8216;.<\/p>\n\n\n\n<div style=\"height:25px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p><strong>I have adjusted my WordPress site&#8217;s logo width and height using the option fields given in the &#8216;Theme-Options&#8217; panel. How can I adjust that for WHMCS template?<\/strong><\/p>\n\n\n\n<p>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.<\/p>\n\n\n\n<p>Find this line from there:<\/p>\n\n\n\n<p>\/* START Logo CSS &#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212; *\/<\/p>\n\n\n\n<p>You will find your custom logo css starts from there, and ended just before this line:<\/p>\n\n\n\n<p>\/* END Logo CSS &#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212; *\/<\/p>\n\n\n\n<p>Copy the above CSS to your clipboard. Now, open the <strong>custom.css<\/strong> file, which is located in the <strong>css<\/strong> folder of the template. Put the copied CSS code at the bottom of the <strong>custom.css<\/strong> file.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>There are total 20 WHMCS templates available for you. The 20 templates are: 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: How [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[12],"tags":[],"_links":{"self":[{"href":"https:\/\/fluentthemes.com\/knowledgebase\/maxhost\/wp-json\/wp\/v2\/posts\/119"}],"collection":[{"href":"https:\/\/fluentthemes.com\/knowledgebase\/maxhost\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/fluentthemes.com\/knowledgebase\/maxhost\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/fluentthemes.com\/knowledgebase\/maxhost\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/fluentthemes.com\/knowledgebase\/maxhost\/wp-json\/wp\/v2\/comments?post=119"}],"version-history":[{"count":0,"href":"https:\/\/fluentthemes.com\/knowledgebase\/maxhost\/wp-json\/wp\/v2\/posts\/119\/revisions"}],"wp:attachment":[{"href":"https:\/\/fluentthemes.com\/knowledgebase\/maxhost\/wp-json\/wp\/v2\/media?parent=119"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fluentthemes.com\/knowledgebase\/maxhost\/wp-json\/wp\/v2\/categories?post=119"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fluentthemes.com\/knowledgebase\/maxhost\/wp-json\/wp\/v2\/tags?post=119"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}