How to upgrade your web hosting template to WHMCS V7.7

Web Hosting / WHMCS Themes

Before you make any changes, be sure to make a full backup of your WHMCS files & database incase you need to roll back your web hosting template

Open: /whmcs_path/templates/your_template/includes/hook-head.tpl (or functions.tpl depending on your template).

Find the following code (it may look slightly different but that is fine as we are replacing the whole section):

<script>
var csrfToken = '{$token}',
markdownGuide = '{lang key="markdown.title"}',
locale = '{if !empty($mdeLocale)}{$mdeLocale}{else}en{/if}',
saved = '{lang key="markdown.saved"}',
saving = '{lang key="markdown.saving"}',
whmcsBaseUrl = "{\WHMCS\Utility\Environment\WebHelper::getBaseUrl()}",
recaptchaSiteKey = "{$recaptchaSiteKey}";
</script>

And replace with the following:

<link href="{$WEB_ROOT}/assets/css/fontawesome-all.min.css" rel="stylesheet">
<script>
var csrfToken = '{$token}',
markdownGuide = '{lang key="markdown.title"}',
locale = '{if !empty($mdeLocale)}{$mdeLocale}{else}en{/if}',
saved = '{lang key="markdown.saved"}',
saving = '{lang key="markdown.saving"}',
whmcsBaseUrl = "{\WHMCS\Utility\Environment\WebHelper::getBaseUrl()}",
requiredText = '{lang key="orderForm.required"}',
recaptchaSiteKey = "{if $captcha}{$captcha->recaptcha->getSiteKey()}{/if}";
</script>

Open: /whmcs_path/templates/your_template/login.tpl

Find the following code:

{if $incorrect}
{include file="$template/includes/alert.tpl" type="error" msg=$LANG.loginincorrect textcenter=true}
{elseif $verificationId && empty($transientDataName)}
{include file="$template/includes/alert.tpl" type="error" msg=$LANG.verificationKeyExpired textcenter=true}
{elseif $ssoredirect}
{include file="$template/includes/alert.tpl" type="info" msg=$LANG.sso.redirectafterlogin textcenter=true}
{/if}

And replace with the following:

{if $incorrect}
{include file="$template/includes/alert.tpl" type="error" msg=$LANG.loginincorrect textcenter=true}
{elseif $verificationId && empty($transientDataName)}
{include file="$template/includes/alert.tpl" type="error" msg=$LANG.verificationKeyExpired textcenter=true}
{elseif $ssoredirect}
{include file="$template/includes/alert.tpl" type="info" msg=$LANG.sso.redirectafterlogin textcenter=true}
{elseif $invalid}
{include file="$template/includes/alert.tpl" type="error" msg=$LANG.googleRecaptchaIncorrect textcenter=true}
{/if}

Find the following code:

<div class="row">
<div class="col-sm-{if $linkableProviders}7{else}12{/if}">
<form method="post" action="{$systemurl}dologin.php" class="login-form" role="form">
<div class="form-group">
<label for="inputEmail">{$LANG.clientareaemail}</label>
<input type="email" name="username" class="form-control" id="inputEmail" placeholder="{$LANG.enteremail}" autofocus>
</div>
<div class="form-group">
<label for="inputPassword">{$LANG.clientareapassword}</label>
<input type="password" name="password" class="form-control" id="inputPassword" placeholder="{$LANG.clientareapassword}" autocomplete="off" >
</div>
<div class="checkbox">
<label>
<input type="checkbox" name="rememberme" /> {$LANG.loginrememberme}
</label>
</div>
<div align="center">
<input id="login" type="submit" class="btn btn-primary" value="{$LANG.loginbutton}" />{* <a href="pwreset.php" class="btn btn-default">{$LANG.forgotpw}</a>*}
</div>
</form>
</div>
<div class="col-sm-5{if !$linkableProviders} hidden{/if}">
{include file="$template/includes/linkedaccounts.tpl" linkContext="login" customFeedback=true}
</div>
</div>
</div>

And replace with the following:

<div class="row">
<div class="col-sm-{if $linkableProviders}7{else}12{/if}">
<form method="post" action="{$systemurl}dologin.php" class="login-form" role="form">
<div class="form-group">
<label for="inputEmail">{$LANG.clientareaemail}</label>
<input type="email" name="username" class="form-control" id="inputEmail" placeholder="{$LANG.enteremail}" autofocus>
</div>
<div class="form-group">
<label for="inputPassword">{$LANG.clientareapassword}</label>
<input type="password" name="password" class="form-control" id="inputPassword" placeholder="{$LANG.clientareapassword}" autocomplete="off" >
</div>
<div class="checkbox">
<label>
<input type="checkbox" name="rememberme" /> {$LANG.loginrememberme}
</label>
</div>
{if $captcha->isEnabled()}
<div class="text-center margin-bottom">
{include file="$template/includes/captcha.tpl"}
</div>
{/if}
<div align="center">
<input id="login" type="submit" class="btn btn-primary{$captcha->getButtonClass($captchaForm)}" value="{$LANG.loginbutton}" /> <a href="{$systemurl}pwreset.php" class="btn btn-default">{$LANG.forgotpw}</a>
</div>
</form>
</div>
<div class="col-sm-5{if !$linkableProviders} hidden{/if}">
{include file="$template/includes/linkedaccounts.tpl" linkContext="login" customFeedback=true}
</div>
</div>
</div>

Open: /whmcs_path/templates/your_template/viewinvoice.tpl

Find the following code:

<p>{$payto}</p>

And replace with the following:

<p>{$payto}</p>
{if $taxCode}<p>{$taxIdLabel}: {$taxCode}</p>{/if}

Find the following code:

{if $clientsdetails.companyname}{$clientsdetails.companyname}<br />{/if}
{$clientsdetails.firstname} {$clientsdetails.lastname}<br />
{$clientsdetails.address1}, {$clientsdetails.address2}<br />
{$clientsdetails.city}, {$clientsdetails.state}, {$clientsdetails.postcode}<br />
{$clientsdetails.country}
{if $customfields}
<br /><br />
{foreach from=$customfields item=customfield}
{$customfield.fieldname}: {$customfield.value}<br />
{/foreach}
{/if}

And replace with the following:

{if $clientsdetails.companyname}{$clientsdetails.companyname}<br />{/if}
{$clientsdetails.firstname} {$clientsdetails.lastname}<br />
{$clientsdetails.address1}, {$clientsdetails.address2}<br />
{$clientsdetails.city}, {$clientsdetails.state}, {$clientsdetails.postcode}<br />
{$clientsdetails.country}
{if $clientsdetails.tax_id}
<br />{$taxIdLabel}: {$clientsdetails.tax_id}
{/if}
{if $customfields}
<br /><br />
{foreach from=$customfields item=customfield}
{$customfield.fieldname}: {$customfield.value}<br />
{/foreach}
{/if}

Open: /whmcs_path/templates/your_template/contact.tpl

Find the following code:

<div class="row">
<div class="col-sm-offset-3 col-sm-9">
{include file="$template/includes/captcha.tpl"}
</div>
</div>

And replace with the following:

{if $captcha}
<div class="text-center margin-bottom">
{include file="$template/includes/captcha.tpl"}
</div>
{/if}

Find the following code:

<button type="submit" class="btn btn-primary">
{$LANG.contactsend}
</button>

And replace with the following:

<button type="submit" class="btn btn-primary{$captcha->getButtonClass($captchaForm)}">
{$LANG.contactsend}
</button>

Following these changes your web hosting theme will now be ready for WHMCS version 7.7. If you require any assistance or advice, please feel free to contact us.