custom head.tpl after whmcs upgrade

[dimitrifrom31]

Hi,

 

After upgrading whmcs from 7.1 to 7.10.2 my custom template has required quite a few adjustments.

I am still getting an issue with the "save modifications" button on the client password change page that cannot be clicked ant it is caused by my custom head.tpl

I read that custom css and javascripts require to be removed from head.tpl and included instead but I am still getting issues after doing so.
This is my original (before moving out customizations) head.tpl, if someone could pinpoint me the different parts that I need to move/remove that would be greatly apreciated:

 

{if $language eq 'French' or $language eq 'french'}
    {assign var="activelanguage" value="french"}
{elseif $language eq 'English' or $language eq 'english'}
    {assign var="activelanguage" value="english"}
{elseif $language eq 'Spanish' or $language eq 'spanish'}
    {assign var="activelanguage" value="spanish"}
{else}
    {assign var="activelanguage" value="english"}
{/if}

<!-- Styling -->
<link href="//fonts.googleapis.com/css?family=Open+Sans:300,400,600|Raleway:400,700" rel="stylesheet">
<link href="{$WEB_ROOT}/templates/{$template}/css/all.min.css?v={$versionHash}" rel="stylesheet">
<link href="{$WEB_ROOT}/assets/css/fontawesome-all.min.css" rel="stylesheet">
<link href="{$WEB_ROOT}/templates/{$template}/css/custom.css" rel="stylesheet">

<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
  <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
  <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->

<script type="text/javascript">
    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>
<script src="{$WEB_ROOT}/templates/{$template}/js/scripts.min.js?v={$versionHash}"></script>

{if $templatefile == "viewticket" && !$loggedin}
  <meta name="robots" content="noindex" />
{/if}

<link rel="shortcut icon" type="image/x-icon" href="{$WEB_ROOT}/templates/{$template}/img/favicon.ico" />

<link href="{$WEB_ROOT}/templates/{$template}/{$activelanguage}/css/style.css" rel="stylesheet" type="text/css" />
<link href="{$WEB_ROOT}/templates/{$template}/{$activelanguage}/css/menu.css" rel="stylesheet" type="text/css" />
<link href="{$WEB_ROOT}/templates/{$template}/{$activelanguage}/css/slider.css" rel="stylesheet" type="text/css" />
<link href="{$WEB_ROOT}/templates/{$template}/{$activelanguage}/css/button.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="{$WEB_ROOT}/templates/{$template}/{$activelanguage}/js/jquery.cycle.all.js"></script>
<script type="text/javascript" src="{$WEB_ROOT}/templates/{$template}/{$activelanguage}/js/organictabs.jquery.js"></script>
{literal}
<script type="text/javascript" language="javascript">
$(document).ready(function(){
	$('#bannerSlides').cycle({ 
		fx: 'fade',// name of transition effect (or comma separated names, ex: 'fade,scrollUp,shuffle')
		sync: 1,
		width:		'100%',
		height:		0,
		pager:      '#slider-nav',
		speed:         1000,  // speed of the transition (any valid fx speed value) 
		timeout:       6000,  // milliseconds between slide transitions (0 to disable auto advance)
		startingSlide: 0,     // zero-based index of the first slide to be displayed
		pauseOnPagerHover: 0, // true to pause when hovering over pager link 
		next:       '#next',  // element, jQuery object, or jQuery selector string for the element to use as event trigger for next slide 
		prev:       '#prev'  // element, jQuery object, or jQuery selector string for the element to use as event trigger for previous slide
		});
	$('#hide').click(
	function () {
	//show its submenu
	$(".dropdown_link").stop().slideToggle(100);    
	});
	$('#hide2').click(
	function () {
	//show its submenu
	$(".dropdown_link2").stop().slideToggle(100);    
	});		
});
</script>
<script>
$(function() {
$("#tab_con1").organicTabs({
"speed": 200
	});
});
</script>


<style>
.topbox4chat:hover {
	opacity:0.7!important;
	transition:opacity .55s ease-in-out!important;
	-moz-transition:opacity .55s ease-in-out!important;
	-webkit-transition:opacity .55s ease-in-out!important	;
	cursor:pointer;
}
</style>
{/literal}
{if $filename eq 'index'}
<link rel="stylesheet" href="{$WEB_ROOT}/templates/{$template}/{$activelanguage}/carousel/util.carousel.css" />
<link rel="stylesheet" href="{$WEB_ROOT}/templates/{$template}/{$activelanguage}/carousel/util.carousel.skins.css" />
{/if}

<!-- Custom Styling -->
<link href="{$WEB_ROOT}/templates/{$template}/css/custom.css" rel="stylesheet">

{if $clientareaaction eq 'invoices'}
{if $activelanguage eq 'spanish'}
{literal}
<style>
.btn-group-sm>.btn, .btn-sm {
    font-size: 9px!Important;
}
</style>
{/literal}
{/if}
{if $activelanguage eq 'french'}
{literal}
<style>
.btn-group-sm>.btn, .btn-sm {
    font-size: 8px!Important;
}
</style>
{/literal}
{/if}
{/if}

 

[brian!]

18 hours ago, dimitrifrom31 said:

This is my original (before moving out customizations) head.tpl, if someone could pinpoint me the different parts that I need to move/remove that would be greatly appreciated

that {if $language} block of code is more long winded than it needs to be - you don't need to check whether the language is english, nor should you need the duplication of checking whether the string is capitalised or not.

to be honest, I think everything you've added, including that if block, should be removed from the template and moved to a clientareaheadoutput hook instead to add the code - at the very least, that should remove the updating problem and having to modify head.tpl after every update.

/css/custom.css is also declared twice in the template.

as an example, if I take 3 of your {if} blocks and convert it to a hook...

<?php

function client_custom_headoutput_hook($vars) {

	if (in_array(strtolower($vars['language']),array("french","spanish"))) {
		$activelanguage = strtolower($vars['language']);
	} else {
		$activelanguage = "english";
	}

	if ($vars['filename'] == "index") {
		$head_return .= '<link href="'.$vars['WEB_ROOT'].'/templates/'.$vars['template'].'/'.$activelanguage.'/carousel/util.carousel.css" rel="stylesheet">';
		$head_return .= '<link href="'.$vars['WEB_ROOT'].'/templates/'.$vars['template'].'/'.$activelanguage.'/carousel/util.carousel.skins.css" rel="stylesheet">';
	}
		
	if ($vars['clientareaaction'] == "invoices") {
		if (strtolower($vars['language']) == "spanish") {
			$head_return .= "<style>.btn-group-sm>.btn, .btn-sm {font-size: 9px !important;}</style>";
		} elseif ($vars['language'] == "french") {
			$head_return .= "<style>.btn-group-sm>.btn, .btn-sm {font-size: 8px !important;}</style>";
		}
	}
	return $head_return;	
}
add_hook("ClientAreaHeadOutput",1,"client_custom_headoutput_hook");

i'd argue that strtolower (convert the string to lowercase) shouldn't be necessary as the value should be lowercase anyway, but you seem to want to check for it..🙂

ultimately, all you're doing is writing your conditions in PHP (which wouldn't be a million miles from the Smarty equivalent), and creating / appending the content of the $head_return string and then finally returning it.

[dimitrifrom31]

thanks for your help, unfortunately I was unable to fix my issues so I'm looking for someone to quote me to update my template so it is 8.0.3 compatible. If anyone is interested in such a job please give me a quote for the work.