Text formatting and white space on template.

ameharhughes · September 1, 2013

Hello.

Ive brought a HTML template and a responsive WHMCS theme (whmcsdesigns.co.uk).

Ive added the header to the WHMCS theme and it pulls in the logo and the background but the text does not format to how its coded in the CSS file, this is for both header and footer.

Ive called in the CSS files within the header.tpl file.

http://dev.eximushosting.com is the HTML Site

http://my.eximushosting.com is the WHMCS Site.

Am I missing something?

brian! · September 1, 2013

the code below is in your main site, but not whmcs site - so adding it may help...

<link href='http://fonts.googleapis.com/css?family=Belgrano' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>

ameharhughes · September 1, 2013

the code below is in your main site, but not whmcs site - so adding it may help...

Wholly crap, mother of god!! Awesome dude.. Cant thank you enough

Any idea of the white space at the bottom?

brian! · September 2, 2013

I can't give you specifics, but certainly the code below is missing from the end of footer.tpl

</body>
</html>

if that doesn't solve it, then I think there may be div errors...

http://validator.w3.org/check?uri=http%3A%2F%2Fmy.eximushosting.com%2F&charset=%28detect+automatically%29&doctype=Inline&group=0&st=1

it's probably best not to copy & paste the "corrected" source code at the bottom of the above page as in reality your page is made from a number of templates - so go though each one and check the divs - the validation page points to two places to look.

ameharhughes · September 2, 2013

I removed the /body and /html to see what effect it would have. I used the validator and found a stray closing div tag. That solved the white space issue.

The header text at the top has not turned blue, its CSS'ed hover colour.. So thats next ;-)...

PS. I realised not to use the "corrected" code as I am using two different templates.

Thanks for the help... Its been massive.

ameharhughes · September 17, 2013

Hello,

For some reason, that I can not figure out is the header is not taking stylings, Ive checked all the CSS and there are no conflicting tags or anything, also the google font is not being used and the validator above just show errors on img elements not having alternatives. Im not sure what else to check.

This is the header.tpl

<!DOCTYPE html>
<html lang="en">

<head>

<meta http-equiv="content-type" content="text/html; charset={$charset}" />

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

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

{if $systemurl}<base href="{$systemurl}" />{/if}

<script src="includes/jscript/jquery.js"></script>

{if $livehelpjs}{$livehelpjs}{/if}

<link href='http://fonts.googleapis.com/css?family=Belgrano' rel='stylesheet' type='text/css'>

<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>

<link href="templates/{$template}/css/bootstrap.css" rel="stylesheet" />

<link href="templates/{$template}/css/whmcs.css" rel="stylesheet" />

<link href="templates/{$template}/css/flex.css" rel="stylesheet" />

<link href="templates/{$template}/css/flex.custom.css" rel="stylesheet" />

<link href="templates/{$template}/css/jquery.selectBoxIt.css" rel="stylesheet" />

<link href="templates/{$template}/css/normalize.css" type="text/css" rel="stylesheet"/>

<link href="templates/{$template}/css/index.css" type="text/css" rel="stylesheet"/>

<link href="templates/{$template}/css/mobile-reset.css" type="text/css" rel="stylesheet"/>

<link href="templates/{$template}/css/mobile.css" type="text/css" rel="stylesheet"/>



<script src="templates/{$template}/js/jquery-ui.min.js"></script>

<script src="templates/{$template}/js/jquery.selectBoxIt.min.js"></script>

<script src="templates/{$template}/js/whmcs.js"></script>

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

<script src="templates/{$template}/js/jquery-1.9.1.js"></script>

<script src="templates/{$template}/js/jquery-ui.js"></script>

<script src="templates/{$template}/js/parallax2.js"></script>

<script src="templates/{$template}/js/hover.js"></script>

<script src="templates/{$template}/js/scroll2.js"></script>

<script src="templates/{$template}/js/jquery.slider.js"></script>

<script src="templates/{$template}/js/slider.main.js"></script>

<script src="templates/{$template}/js/slider.blog.js"></script>

<script src="templates/{$template}/js/slider.features.js"></script>

<script src="templates/{$template}/js/slider.testim.js"></script>

<script src="templates/{$template}/js/slider.domain.js"></script>

<script src="templates/{$template}/js/slider.packs.js"></script>

<script src="templates/{$template}/js/parallax.control.js"></script>

{$headoutput}

</head>

<body>

{include file='/var/zpanel/hostdata/aaron/public_html/my_eximushosting_com/templates/flex/header.php'}

{$headeroutput}

<div id="whmcsheader">

<div class="clear"></div>

</div>

<div class="navbar whmcscontainer">



<h2 style="display: none;">{$LANG.quicknav}</h2>

<a class="quick-nav-btn" data-toggle="collapse" data-target=".nav-collapse"></a>

<div class="clear"></div>

<div class="nav-collapse collapse">

<ul class="nav">

<li><a href="{if $loggedin}clientarea{else}index{/if}.php">{$LANG.hometitle}</a></li>

</ul>

{if $loggedin}

<ul class="nav">

<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">{$LANG.navservices} <b class="caret"></b></a>

<ul class="dropdown-menu">

<li><a href="clientarea.php?action=products">{$LANG.clientareanavservices}</a></li>

{if $condlinks.pmaddon}<li><a href="index.php?m=project_management">{$LANG.clientareaprojects}</a></li>{/if}

<li><a href="cart.php">{$LANG.navservicesorder}</a></li>

<li><a href="cart.php?gid=addons">{$LANG.clientareaviewaddons}</a></li>

</ul>

</li>

</ul>

{if $condlinks.domainreg || $condlinks.domaintrans}

<ul class="nav">

<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">{$LANG.navdomains} <b class="caret"></b></a>

<ul class="dropdown-menu">

<li><a href="clientarea.php?action=domains">{$LANG.clientareanavdomains}</a></li>

<li><a href="cart.php?gid=renewals">{$LANG.navrenewdomains}</a></li>

{if $condlinks.domainreg}<li><a href="cart.php?a=add&domain=register">{$LANG.navregisterdomain}</a></li>{/if}

{if $condlinks.domaintrans}<li><a href="cart.php?a=add&domain=transfer">{$LANG.navtransferdomain}</a></li>{/if}

<li><a href="domainchecker.php">{$LANG.navwhoislookup}</a></li>

</ul>

</li>

</ul>

{/if}

<ul class="nav">

<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">{$LANG.navbilling} <b class="caret"></b></a>

<ul class="dropdown-menu">

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

<li><a href="clientarea.php?action=quotes">{$LANG.quotestitle}</a></li>

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

{if $condlinks.masspay}<li><a href="clientarea.php?action=masspay&all=true">{$LANG.masspaytitle}</a></li>{/if}

{if $condlinks.updatecc}<li><a href="clientarea.php?action=creditcard">{$LANG.navmanagecc}</a></li>{/if}

</ul>

</li>

</ul>

<ul class="nav">

<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">{$LANG.navsupport} <b class="caret"></b></a>

<ul class="dropdown-menu">

<li><a href="supporttickets.php">{$LANG.navtickets}</a></li>

<li><a href="knowledgebase.php">{$LANG.knowledgebasetitle}</a></li>

<li><a href="downloads.php">{$LANG.downloadstitle}</a></li>

<li><a href="serverstatus.php">{$LANG.networkstatustitle}</a></li>

</ul>

</li>

</ul>

<ul class="nav">

<li><a href="submitticket.php">{$LANG.navopenticket}</a></li>

</ul>

<ul class="nav">

<li><a href="affiliates.php">{$LANG.affiliatestitle}</a></li>

</ul>

{else}

<ul class="nav">

<li><a href="announcements.php">{$LANG.announcementstitle}</a></li>

</ul>

<ul class="nav">

<li><a href="knowledgebase.php">{$LANG.knowledgebasetitle}</a></li>

</ul>

<ul class="nav">

<li><a href="serverstatus.php">{$LANG.networkstatustitle}</a></li>

</ul>

<ul class="nav">

<li><a href="affiliates.php">{$LANG.affiliatestitle}</a></li>

</ul>

<ul class="nav">

<li><a href="contact.php">{$LANG.contactus}</a></li>

</ul>

{/if}

<div class="clear"></div>

</div>

</div>

<div id="whmcscontent">

<div class="whmcscontainer contentpadded">

{if $pagetitle eq $LANG.carttitle}<div id="whmcsorderfrm">{/if}

and this is the header.php

<div class="mask"></div>
<header class="wraper head">

<section class="head-els">

<div class="logo" onclick="$('.menu li a').first().click();">

<img src="templates/{$template}/images/cloud-logo.png" alt="Eximus Logo">

cloudserver

</div>

<ul class="menu">

<li><a href="#intro" class="selected">intro</a></li>

<li><a href="#hosting">hosting</a></li>

<li><a href="#features">features</a></li>

<li><a href="#partners">partners</a></li>

<li><a href="#domains">domains</a></li>

<li><a href="#blog">blog</a></li>

<li><a href="#contacts">contacts</a></li>

</ul>

<div class="login">

login

</div>

<div class="mbl-menu">

<a href="#features"></a>

<a href="#domains"></a>

<a href="#contacts"></a>

</div>

<div style="clear: both;"></div>

<div class="login_form" style="display: none;">

<div class="triangle"></div>

<h1>~ User Panel ~</h1>

<h3>Login to access your personal Website</h3>

<form class="l_form" action="templates/{$template}/login.tpl" method="POST">

<input class="l_form1" type="text" name="name" placeholder="Name">

<input class="l_form2" type="text" name="email" placeholder="E-mail">

<div class="l_checkbox">

<div class="checbox-img checked">

<img src="templates/{$template}/images/form/check.png" alt="Check Image">

</div>

<p>Remember me</p>

<div class="forgot"><a href="#">Forgot pass?</a></div>

</div>

<input class="l_form3" type="submit" name="ready" value="Ready to go!">

<div style="clear: both"></div>

</form>

</div>

</section>

</header>

<div style="padding-top: 90px;"></div>

Thanks in advance.

- - - Updated - - -

just to add if you look at http://dev.eximushosting.com and then look at the header on http://my.eximushosting.com you can see the difference in the font on the header and if you click login you can see the login button is not using the CSS files.

brian! · September 17, 2013

in flex.custom.css line 229, body is redefined to use Open Sans...

body {
font-family: "Open Sans" !important;

font-size: 13px !important;

color: rgb(0, 0, 0) !important;

color: rgba(0, 0, 0, 1) !important;

}

if you change the font-family to Belgrano, then the top menu appears to match that of the main site...

font-family: "Belgrano" !important;

now whether changing that has other implications throughout the site that you don't want I don't know (there's a limit to what I can edit in Chrome!), but I think that's how to fix the top menu and login button. :!:

ameharhughes · September 17, 2013

Awesome.. That worked and I see what is happening now.. This is because of global stuff like H1 and ULs and -webkits etc so the header is pulling styles from the flex CSS and not its own one.. any idea of to specify what file its using?

ameharhughes · September 17, 2013

if anyone looks now.. its looks good because Ive used an iframe to include the html page... this wont be the end result I was just messing about and Im off out to an appt now and wont be back till this evening.

Sign In

Text formatting and white space on template.

Recommended Posts

ameharhughes

Link to comment

Share on other sites

brian!

Link to comment

Share on other sites

ameharhughes

Link to comment

Share on other sites

brian!

Link to comment

Share on other sites

ameharhughes

Link to comment

Share on other sites

ameharhughes

Link to comment

Share on other sites

brian!

Link to comment

Share on other sites

ameharhughes

Link to comment

Share on other sites

ameharhughes

Link to comment

Share on other sites

Join the conversation

Recently Browsing 0 members

Browse

Latest Activity

Blog

Technical Support

Important Information