Knowledgebase

How to create custom header and footer in ClientX WHMCS client area theme?

Please note: We assume you have the knowledge of HTML, PHP, and Smarty to carry on this task.

 

In case you want to use your custom header and footer in the ClientX, you need to follow these steps to do that:

Step 1: Login FTP or Cpanel

Step 2: Go to WHMCSdir/templates/clientx/overrides

Step 3: In overrides folder, you will find these two files

  • footer.tpl.new
  • header.tpl.new

 

Rename these files to:

  • footer.tpl
  • header.tpl

 

Step 4: Login WHMCS Admin

Step 5:Go to Addons > WGS ClientX > Settings > General Settings

Step 6: Enable Custom Header and Footer

Step 7: Save Changes

Step 8: Now edit the header.tpl files and add this code:

<!DOCTYPE html>

    <html lang="en">

        <head>

            <meta charset="{$charset}" />

            <meta http-equiv="X-UA-Compatible" content="IE=edge">

            <meta name="viewport" content="width=device-width, initial-scale=1">

            <title>{if $kbarticle.title}{$kbarticle.title} - {/if}{$pagetitle} - {$companyname}</title>

            {include file="$template/includes/head.tpl"}

            {$headoutput}

        </head>

        <body data-phone-cc-input="{$phoneNumberInputStyle}" class="{if $LANG.locale == 'ar_AR' || $LANG.locale == 'fa_IR' || $LANG.locale == 'he_IL'}wgsstyle-rtl{/if} {if $templatefile eq 'login' || $templatefile eq 'clientregister' || $templatefile eq 'password-reset-container'}login-bg{/if} {if $templatefile eq 'password-reset-container'}mob-pwreset{/if}">

            {$headeroutput}

            {if $templatefile neq 'login' AND $templatefile neq 'clientregister' AND $templatefile neq 'password-reset-container'}

{if $topMenuLayout || $menuLayoutBoth}

<nav class="clientx header wgsheaderfromaddon navbar navbar-default navbar-custom">

   <div class="container-fluid">

  <!-- Brand and toggle get grouped for better mobile display -->

  <div class="navbar-header">

  {if !$noNavBar}

  <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">

<span class="sr-only">Toggle navigation</span>

<span class="icon-bar"></span>

<span class="icon-bar"></span>

<span class="icon-bar"></span>

  </button>

  {/if}

{if $mainLogo|trim}

<div class="navbar-brand"> <a href="{$WEB_ROOT}/index.php" class="logo"><img src="{$mainLogo|trim}" alt="{$companyname}" {if $header_logo_width or $header_logo_height}style="{if $header_logo_width}width: {$header_logo_width};{/if}{if $header_logo_height}height: {$header_logo_height};{/if}"{/if}></a> </div>

{else}

{if $assetLogoPath}

<div class="navbar-brand"> <a href="{$WEB_ROOT}/index.php" class="logo"><img src="{$assetLogoPath}" alt="{$companyname}"></a> </div>

{else}

<div class="navbar-brand"> <a href="{$WEB_ROOT}/index.php" class="logo"><img src="{$WEB_ROOT}/templates/{$template}/assets/images/logo.svg" alt="{$companyname}"></a> </div>

{/if}

{/if}

  </div>

  <!-- Collect the nav links, forms, and other content for toggling -->

  <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">

{if $noNavBar}

{else}

{include file="$template/includes/wgs_topbar.tpl"}

{/if}

  </div>

  <!-- /.navbar-collapse -->

  <ul class="ul-right-top">

{if $showMultiLanguage eq 'off'}

{if $languagechangeenabled && count($locales) > 1}

<li class="dropdown messages-menu lang"> <a href="#" class="dropdown-toggle" data-toggle="dropdown"> <i class="fas fa-language"></i></a>

<ul class="dropdown-menu">

<li class="header langlist">{$activeLocale.localisedName}</li>

<li>

<ul class="menu notf language">

{foreach $locales as $locale}

<li>

<a href="{$currentpagelinkback}language={$locale.language}">{$locale.localisedName}</a>

</li>

{/foreach}

</ul>

</li>

</ul>

</li>

{/if}

{/if}

                            <li class="dropdown messages-menu"> <a href="{$WEB_ROOT}/cart.php?a=view" class="dropdown-toggle"> <i class="fas fa-shopping-cart"></i> <span class="label label-success wgs-custom-label-cart">{$cartitemcount}</span> </a></li>

{if $loggedin}

<li class="dropdown messages-menu"> <a href="#" class="dropdown-toggle" data-toggle="dropdown"> <i class="fas fa-bell"></i> <span class="label label-success wgs-custom-label-notify">{count($clientAlerts)}</span> </a>

<ul class="dropdown-menu d-menu">

<li class="header">{$LANG.notifications}</li>

<li> 

<ul class="menu notf">

{foreach $clientAlerts as $alert}

<li> 

<a href="{$alert->getLink()}">

<div class="pull-left icone-nt"> <i class="fas fa-{if $alert->getSeverity() == 'danger'}exclamation-circle{elseif $alert->getSeverity() == 'warning'}exclamation-triangle{elseif $alert->getSeverity() == 'info'}info-circle{else}check-circle{/if}"></i> </div>

<div class="smsOptIn">

<p>{$alert->getMessage()}</p>

</div>

</a> 

</li>

{foreachelse}

<li>                                                       

<div class="smsOptIn">

<p> {$LANG.notificationsnone}</p>

</div>

</li>

{/foreach}

</ul>

</li>

</ul>

</li>

<li class="dropdown user user-menu"> <a href="#" class="dropdown-toggle" data-toggle="dropdown"> <i class="fas fa-user"></i></a>

<ul class="dropdown-menu">

<li class="user-header bg-light-blue">

<div class="user-icone"><i class="fas fa-user"></i></div>

<div class="client-name">{$LANG.hello}, {$loggedinuser.firstname}!&nbsp;</div>

</li>

<li><a href="{$WEB_ROOT}/clientarea.php?action=details">{$LANG.editaccountdetails}</a></li>

<li><a href="{$WEB_ROOT}/clientarea.php?action=emails">{$LANG.clientareaemails}</a></li>

<li><a href="{$WEB_ROOT}/clientarea.php?action=changepw">{$LANG.clientareanavchangepw}</a></li>

{if $condlinks.security}<li><a href="{$WEB_ROOT}/clientarea.php?action=security">{$LANG.clientareanavsecurity}</a></li>{/if}

<li><a href="{$WEB_ROOT}/logout.php">{$LANG.clientareanavlogout}</a></li>

</ul>

</li>

{else}

<li class="dropdown user user-menu"> <a href="#" class="dropdown-toggle" data-toggle="dropdown"> <i class="fas fa-sign-in-alt"></i> </a>

<ul class="dropdown-menu">




<li class="user-header bg-light-blue">

<div class="user-icone"><i class="fas fa-sign-in-alt"></i></div>

<div class="client-name">{$LANG.account}</div>

</li>

<li><a href="{$WEB_ROOT}/login.php">{$LANG.login}</a></li>

<li><a href="{$WEB_ROOT}/register.php">{$LANG.register}</a></li>

<li><a href="{$WEB_ROOT}/pwreset.php">{$LANG.forgotpw}</a></li>

</ul>

</li>

{/if}

  </ul>

   </div>

   <!-- /.container-fluid -->

</nav>

{else}

                <header class="clientx header wgsheaderfromaddon">

                    <div class="container-fluid"> 

                        {if $mainLogo|trim}

                            <div class="header-left"> <a href="{$WEB_ROOT}/index.php" class="logo"><img src="{$mainLogo|trim}" alt="{$companyname}" {if $header_logo_width or $header_logo_height}style="{if $header_logo_width}width: {$header_logo_width};{/if}{if $header_logo_height}height: {$header_logo_height};{/if}"{/if}></a> </div>

                        {else}

{if $assetLogoPath}

<div class="header-left"> <a href="{$WEB_ROOT}/index.php" class="logo"><img src="{$assetLogoPath}" alt="{$companyname}"></a> </div>

{else}

<div class="header-left"> <a href="{$WEB_ROOT}/index.php" class="logo"><img src="{$WEB_ROOT}/templates/{$template}/assets/images/logo.svg" alt="{$companyname}"></a> </div>

{/if}

                        {/if}

                        <div class="header-right">

                            <div class="navbar-right">

                                <ul class="nav navbar-nav">

                                    {if $showMultiLanguage eq 'off'}

                                        {if $languagechangeenabled && count($locales) > 1}

                                            <li class="dropdown messages-menu lang"> <a href="#" class="dropdown-toggle" data-toggle="dropdown"> <i class="fas fa-language"></i></a>

                                                <ul class="dropdown-menu">

                                                    <li class="header langlist">{$activeLocale.localisedName}</li>

                                                    <li>

                                                        <ul class="menu notf language">

                                                            {foreach $locales as $locale}

                                                                <li>

                                                                    <a href="{$currentpagelinkback}language={$locale.language}">{$locale.localisedName}</a>

                                                                </li>

                                                            {/foreach}

                                                        </ul>

                                                    </li>

                                                </ul>

                                            </li>

                                        {/if}

                                    {/if}

                                    <li class="dropdown messages-menu"> <a href="{$WEB_ROOT}/cart.php?a=view" class="dropdown-toggle"> <i class="fas fa-shopping-cart"></i> <span class="label label-success wgs-custom-label-cart">{$cartitemcount}</span> </a>

                                    </li>

                                    {if $loggedin}

                                        <li class="dropdown messages-menu"> <a href="#" class="dropdown-toggle" data-toggle="dropdown"> <i class="fas fa-bell"></i> <span class="label label-success wgs-custom-label-notify">{count($clientAlerts)}</span> </a>

                                            <ul class="dropdown-menu d-menu">

                                                <li class="header">{$LANG.notifications}</li>

                                                <li> 

                                                    <ul class="menu notf">

                                                        {foreach $clientAlerts as $alert}

                                                            <li> 

                                                                <a href="{$alert->getLink()}">

                                                                    <div class="pull-left icone-nt"> <i class="fas fa-{if $alert->getSeverity() == 'danger'}exclamation-circle{elseif $alert->getSeverity() == 'warning'}exclamation-triangle{elseif $alert->getSeverity() == 'info'}info-circle{else}check-circle{/if}"></i> </div>

                                                                    <div class="smsOptIn">

                                                                        <p>{$alert->getMessage()}</p>

                                                                    </div>

                                                                </a> 

                                                            </li>

                                                        {foreachelse}

                                                            <li>                                                       

                                                                <div class="smsOptIn">

                                                                    <p> {$LANG.notificationsnone}</p>

                                                                </div>

                                                            </li>

                                                        {/foreach}

                                                    </ul>

                                                </li>

                                            </ul>

                                        </li>

                                        <li class="dropdown user user-menu"> <a href="#" class="dropdown-toggle" data-toggle="dropdown"> <i class="fas fa-user"></i></a>

                                            <ul class="dropdown-menu">

                                                <li class="user-header bg-light-blue">

                                                    <div class="user-icone"><i class="fas fa-user"></i></div>

                                                    <div class="client-name">{$LANG.hello}, {$loggedinuser.firstname}!&nbsp;</div>

                                                </li>

                                                <li><a href="{$WEB_ROOT}/clientarea.php?action=details">{$LANG.editaccountdetails}</a></li>

                                                <li><a href="{$WEB_ROOT}/clientarea.php?action=emails">{$LANG.clientareaemails}</a></li>

                                                <li><a href="{$WEB_ROOT}/clientarea.php?action=changepw">{$LANG.clientareanavchangepw}</a></li>

                                                {if $condlinks.security}<li><a href="{$WEB_ROOT}/clientarea.php?action=security">{$LANG.clientareanavsecurity}</a></li>{/if}

                                                <li><a href="{$WEB_ROOT}/logout.php">{$LANG.clientareanavlogout}</a></li>

                                            </ul>

                                        </li>

                                    {else}

                                        <li class="dropdown user user-menu"> <a href="#" class="dropdown-toggle" data-toggle="dropdown"> <i class="fas fa-sign-in-alt"></i> </a>

                                            <ul class="dropdown-menu">




                                                <li class="user-header bg-light-blue">

                                                    <div class="user-icone"><i class="fas fa-sign-in-alt"></i></div>

                                                    <div class="client-name">{$LANG.account}</div>

                                                </li>

                                                <li><a href="{$WEB_ROOT}/login.php">{$LANG.login}</a></li>

                                                <li><a href="{$WEB_ROOT}/register.php">{$LANG.register}</a></li>

                                                <li><a href="{$WEB_ROOT}/pwreset.php">{$LANG.forgotpw}</a></li>

                                            </ul>

                                        </li>

                                    {/if}

                                </ul>

                            </div>

                        </div>

                        <!--[Header-right]--> 

                    </div>

{if !$menuLayoutBoth}

                    <div class="top-resp"><span>{$LANG.homemenu}</span>

                        <button type="button" id="sidebarCollapsenav" class="respos">

                            <span class="pull-right"><i class="fas fa-bars open"></i> <i class="fas fa-times close"></i></span>

                        </button>

                    </div>

{/if}

                </header>

{/if}

                <div class="wrapper">

                    {if $noNavBar || $topMenuLayout && !$menuLayoutBoth}




                    {elseif $menuLayoutBoth}

                        {include file="$template/includes/wgs_navbar.tpl"}

{else}

{include file="$template/includes/wgs_navbar.tpl"}

                    {/if}

                    <div id="content" class="{if $noNavBar || $topMenuLayout && !$menuLayoutBoth}no-navbar {/if} {if $minimizeNavBar}active{/if} {if $templatefile eq 'clientareahome'}{elseif $templatefile eq 'clientareaproductdetails' or $templatefile eq 'upgrade' or $templatefile eq 'clientareacancelrequest'}inner-page{elseif $carttpl neq 'cartx' && $filename eq 'cart'}no-cartx{else}domen-page{/if}">

                        {include file="$template/includes/verifyemail.tpl"}




                    {/if}

 

Step 9: Now edit the footer.tpl file and add the following code in it.

{if $templatefile neq 'login' AND $templatefile neq 'clientregister' AND $templatefile neq 'pwreset'}

        <footer class="footer">{lang key="copyrightFooterNotice" year=$date_year company=$companyname}</footer>

    </div><!--content closed-->

</div><!--wrapper closed-->

{/if}

<div id="fullpage-overlay" class="hidden">

    <div class="outer-wrapper">

        <div class="inner-wrapper">

            <img src="{$WEB_ROOT}/assets/img/overlay-spinner.svg">

            <br>

            <span class="msg"></span>

        </div>

    </div>

</div>

<div class="modal system-modal fade" id="modalAjax" tabindex="-1" role="dialog" aria-hidden="true">

    <div class="modal-dialog">

        <div class="modal-content panel panel-primary">

            <div class="modal-header panel-heading">

                <button type="button" class="close" data-dismiss="modal">

                    <span aria-hidden="true">&times;</span>

                    <span class="sr-only">{$LANG.close}</span>

                </button>

                <h4 class="modal-title">{$LANG.footerbuttontitle}</h4>

            </div>

            <div class="modal-body panel-body">

                {$LANG.loading}

            </div>

            <div class="modal-footer panel-footer">

                <div class="pull-left loader">

                    <i class="fas fa-circle-notch fa-spin"></i> {$LANG.loading}

                </div>

                <button type="button" class="btn btn-default" data-dismiss="modal">

                    {$LANG.close}

                </button>

                <button type="button" class="btn btn-primary modal-submit">

                    {$LANG.submit}

                </button>

            </div>

        </div>

    </div>

</div>

{if $templatefile neq 'login' AND $templatefile neq 'clientregister' AND $templatefile eq 'clientareadetails'}

{/if}

<script src="{$WEB_ROOT}/templates/{$template}/assets/js/min.js"></script> 

<script src="{$WEB_ROOT}/templates/{$template}/assets/js/slick.js"></script> 

<script>

jQuery(document).ready(function () {

   jQuery('ul#wgs-top-bar-menu .dropdown-menu').mouseover(function() {

if(!jQuery(this).hasClass('opendropmenu')){

   jQuery(this).addClass('opendropmenu');

   jQuery(this).prev('a').addClass('opendropmenu');

}

});

jQuery(document).on('mouseout','ul#wgs-top-bar-menu .dropdown-menu',function(e) {

jQuery(this).removeClass('opendropmenu');

jQuery(this).prev('a').removeClass('opendropmenu');

});

});

</script>

<script>

</script>

{include file="$template/includes/generate-password.tpl"}

{$footeroutput}

</body>



</html>

 

Step 10: Edit the header.tpl file now, if you want to change the top navigation bar of the clientx you need to edit the following section of the code without disturbing the other part of code:

Line Number 15 - <nav class="clientx header wgsheaderfromaddon navbar navbar-default navbar-custom">
Line Number 121 - <nav>

 

Step 11: Edit the footer.tpl file now, if you want to change the footer of the clientx you need to edit the following section of the code without disturbing the other part of code:

Line Number 2     <footer class="footer">{lang key="copyrightFooterNotice" year=$date_year company=$companyname}</footer>
    </div><!--content closed-->
Line Number 4 </div><!--wrapper closed-->

  • whmcs, client area theme, custom header clientx, whmcs client area
  • 0 Users Found This Useful
Was this answer helpful?
Related Articles
Copyright © 2021 Whmcs Global Services. All Rights Reserved.