Jump to content

Text formatting and white space on template.


Recommended Posts



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?

Link to comment
Share on other sites

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





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




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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

  • 3 weeks later...



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">



<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"/>


<!--[if lte IE 9]>

<link href="templates/{$template}/css/flex-ie.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>








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




<div id="whmcsheader">

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




<div class="navbar whmcscontainer">



<!-- .btn-navbar is used as the toggle for collapsed navbar content -->

<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>


{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>





{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 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 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 class="nav">

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


<ul class="nav">

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



<ul class="nav">

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


<ul class="nav">

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


<ul class="nav">

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


<ul class="nav">

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


<ul class="nav">

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



<div class="clear"></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">



<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>


<div class="login">



<div class="mbl-menu">

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

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

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


<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">


<p>Remember me</p>

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


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

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





<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.

Link to comment
Share on other sites

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. :!:

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...

Important Information

By using this site, you agree to our Terms of Use & Guidelines and understand your posts will initially be pre-moderated