Creating a Custom Template

Alykhan · August 27, 2013

Hey!

So for the past three days I have been trying to integrate my sites header and footer with WHMCS to match the rest of my site.

Here is the link to my site:

http://www.alykhan.ca

Here is the link to my site with the edited header.tpl and and footer.tpl:

http://alykhan.ca/whmcs/index.php?systpl=alykhanservices

As you can see my header and footer do not match the rest of my site at all!

Can someone help me as to where I have gone wrong?

To view my coding, just right click on the page and select view source.

I believe the issue is to do with the css or style as all the text shows up but not the way it is suppose to like the rest of the site.

<!DOCTYPE html>
<html lang="en">
 <head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>Alykhan Suleman - Portal Home</title> <base href="http://www.alykhan.ca/whmcs/" /> <link rel="stylesheet" type="text/css" href="templates/alykhanservices/style.css" /> <script type="text/javascript" src="includes/jscript/jquery.js"></script>      <meta http-equiv="content-type" content="text/html; charset=utf-8" />
   <title>Portal Home - Alykhan Suleman</title>

   <base href="http://www.alykhan.ca/whmcs/" />
   <script type="text/javascript" src="includes/jscript/jquery.js"></script>
       <link href="templates/alykhanservices/css/bootstrap.css" rel="stylesheet">
   <link href="templates/alykhanservices/css/whmcs.css" rel="stylesheet">

   <script src="templates/alykhanservices/js/whmcs.js"></script>


<!-- Bootstrap  -->
<link type="text/css" rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
<!-- web font  -->
<link href="http://fonts.googleapis.com/css?family=Open+Sans:400,300,800" rel="stylesheet" type="text/css">
<!-- icon fonts -->
<link type="text/css" rel="stylesheet" href="templates/alykhanservices/font-icons/custom-icons/css/custom-icons.css">
<link type="text/css" rel="stylesheet" href="templates/alykhanservices/font-icons/custom-icons/css/custom-icons-ie7.css">
<!-- Custom css -->
<link type="text/css" rel="stylesheet" href="templates/alykhanservices/HTML/css/layout.css">
<link type="text/css" id="colors" rel="stylesheet" href="templates/alykhanservices/HTML/css/colors.css">
<link type="text/css" rel="stylesheet" href="css/layout.css">
<link type="text/css" id="colors" rel="stylesheet" href="css/colors.css">

<!--[if lt IE 9]><script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script> <![endif]-->
<script src="js/modernizr-2.6.1.min.js"></script>  </head>

 <body>

<!-- Primary Page Layout 
   ================================================== -->
<!-- globalWrapper -->
<div id="globalWrapper">

 <!-- header -->

 <header id="mainHeader" class="clearfix">
   <div class="navbar navbar-fixed-top">
     <div class="navbar-inner preHeader">
       <div class="container">
         <div class="row-fluid">
           <div class="span6 clearfix">
             <ul class="quickMenu">

               Partners
               <li><a href="http://www.brandedemails.ca"> Branded Emails </a></li>
               <li><a href="http://www.windsites.ca">Wind Sites </a></li>
               <li><a href="http://www.alyk.ca">UnlockCellCodes </a></li>
               <ul class="quickMenu">

             </ul>
           </div>
           <div class="span6 clearfix">
             <ul class="socialNetwork">
               <li><a href="http://www.facebook.com/#!/pages/Alykhan-Suleman-Technology-Consulting/371214272994536?fref=ts" class="icon-facebook socialIcon tips"  title="follow me on Facebook"><span>facebook</span></a></li>
               <li><a href="http://www.twitter.com/alykhans" class="icon-twitter-bird socialIcon tips"  title="follow me on Twitter (/alykhans)"><span>twitter</span></a></li>
               <li><a href="https://plus.google.com/111246329699784142452" class="icon-gplus socialIcon tips"  title="follow me on Google +"><span>google +</span></a></li>

               <li><a href="http://www.linkedin.com/in/alykhan" class="icon-linkedin socialIcon tips"  title="follow me on Linkedin (/alykhan)"><span>linkedin</span></a></li>
             </ul>
           </div>
         </div>
       </div>
     </div>
   </div>
   <div class="navbar navbar-fixed-top mainNav">
     <div class="navbar-inner">
       <div class="container"> <a href="index.html" class="brand"><img src="images/main-logo.png" alt="himalaya"/></a>
         <nav id="mainMenu">

           <ul>
             <li><a href="index.html" class="firstLevel active" >Home</a>
               <ul>
               </ul>

             <li> <a href="about.html" class="firstLevel">About</a>
             </li>
             <li> <a href="services.html" class="firstLevel">Services</a>

             </li>
             <li><a href="externallinks.html" class="firstLevel">External Links</a>

             </li>

             <li><a href="clients.html" class="firstLevel">Clients</a>

             </li>

             <li><a href="http://www.alykhan.me" class="firstLevel">Portfolio</a> 

             </li>
             <li> <a href="contact.html" class="firstLevel last">Contact</a> </li>
           </ul>
         </nav>
       </div>
     </div>
   </div>
 </header>
 <!-- header -->



 <div class="navbar navbar-fixed-top">
   <div class="navbar-inner">
     <div class="container">
       <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
         <span class="icon-bar"></span>
         <span class="icon-bar"></span>
         <span class="icon-bar"></span>
       </a>
       <div class="nav-collapse">
	<ul class="nav">
		<li><a href="index.php">Home</a></li>
	</ul>
	  <ul class="nav">
		<li><a href="announcements.php">Announcements</a></li>
	  </ul>

	  <ul class="nav">
		<li><a href="knowledgebase.php">Knowledgebase</a></li>
	  </ul>

	  <ul class="nav">
		<li><a href="serverstatus.php">Network Status</a></li>
	  </ul>

	  <ul class="nav">
		<li><a href="affiliates.php">Affiliates</a></li>
	  </ul>

	  <ul class="nav">
		<li><a href="contact.php">Contact Us</a></li>
	  </ul>

	  <ul class="nav pull-right">
		<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Account <b class="caret"></b></a>
		  <ul class="dropdown-menu">
			<li><a href="clientarea.php">Login</a></li>
			<li><a href="register.php">Register</a></li>
			<li class="divider"></li>
			<li><a href="pwreset.php">Forgot Password?</a></li>
		  </ul>
		</li>
	  </ul>

       </div><!-- /.nav-collapse -->
     </div>
   </div><!-- /navbar-inner -->
 </div><!-- /navbar -->


<div class="whmcscontainer">
   <div class="contentpadded">

<div class="well">
   <div class="styled_title">
       <h1>Choose a Domain...</h1>
   </div>
   <p>Start your web hosting experience with us by entering the domain name you want to register, transfer or simply purchase hosting for below...</p>
   <br />
   <div class="textcenter">
       <form method="post" action="domainchecker.php">
<input type="hidden" name="token" value="36d120142a86c83ec56d4596c229eed0a0d6195a" />
       <input class="bigfield" name="domain" type="text" value=" eg. yourdomain.com" onfocus="if(this.value==' eg. yourdomain.com')this.value=''" onblur="if(this.value=='')this.value=' eg. yourdomain.com'" />
               <div class="captchainput" align="center">
           <p>Please enter the characters you see in the image below into the text box provided. This is required to prevent automated submissions.</p>
                       <p><img src="includes/verifyimage.php" align="middle" /> <input type="text" name="code" class="input-small" maxlength="5" /></p>
                   </div>
               <div class="internalpadding"> <input type="submit" name="hosting" value="Order Hosting Only" class="btn btn-large" /></div>
       </form>
   </div>
</div>

<div class="row">

<div class="col2half">
   <div class="internalpadding">
       <div class="styled_title">
           <h2>Order New Services</h2>
       </div>
       <p>Visit the Order Form to browse the Products & Services we offer. Existing customers can also purchase optional extras and addons here.<br /><br /></p>
       <form method="post" action="cart.php">
<input type="hidden" name="token" value="36d120142a86c83ec56d4596c229eed0a0d6195a" />
       <p align="center"><input type="submit" value="Go to Order Form »" class="btn" /></p>
       </form>
   </div>
</div>
<div class="col2half">
   <div class="internalpadding">
       <div class="styled_title"><h2>Manage Your Account</h2></div>
       <p>Already registered with us? If so, click the button below to login to our client area from where you can manage your account.<br /><br /></p>
       <form method="post" action="clientarea.php">
<input type="hidden" name="token" value="36d120142a86c83ec56d4596c229eed0a0d6195a" />
       <p align="center"><input type="submit" value="Secure Client Login »" class="btn" /></p>
       </form>
   </div>
</div>

</div>

<div class="row">

<div class="styled_title">
   <h2>Our Latest Tweets</h2>
</div>
<div id="twitterfeed">
   <p><img src="images/loading.gif"></p>
</div>
<script language="javascript">
jQuery(document).ready(function(){
 jQuery.post("announcements.php", { action: "twitterfeed", numtweets: 3 },
   function(data){
     jQuery("#twitterfeed").html(data);
   });
});
</script>

</div>

<p style="text-align:center;">Powered by <a href="http://www.whmcs.com/" target="_blank">WHMCompleteSolution</a></p>

<footer>
   <section id="mainFooter">
     <div id="backToTop">
       <div class="container" > <a href="#" class="iconWrapper"><i class="icon-up-open"></i></a> </div>
     </div>
     <div class="container" id="footer">
       <div class="row">
         <div class="span2 testimonialWidget">
<h3>ABOUT</h3>
           <ul>
             <li> <h4><a href="http://www.alykhan.me">Portfolio</a></h4>

             </li>
             <li>
               <h4> <a href="http://www.about.me/alykhans">About.me</a></h4>

                 </li>
             <li>
               <h4> <a href="http://cv.alykhan.ca">Resume</a></h4>
             </li>
           </ul>
         </div>       <div class="span2 testimonialWidget"> 
<h3>Links</h3>
           <ul>
             <li> <h4><a href="http://www.facebook.com">Facebook</a></h4>

             </li>
             <li>
               <h4>  <a href="http://www.twitter.com/alykhans">Twitter</a></h4>

                 </li>
             <li>
               <h4> <a href="http://www.linkedin.com/in/alykhan">LinkedIn</a></h4>
             </li>
             <li> <h4><a href="http://www.old.alykhan.ca">Old Site</a></h4>

             </li>
           </ul>
         </div>
         <div class="span2 projectWidget">
<h3>MEDIA & Extras</h3>
           <ul>
             <li> <h4><a href="services.html">Domain & Hosting Deals</a></h4>

             </li>
             <li>
               <h4> <a href="contact.html">Terms of Service</a></h4>
             </li>
             <li>
               <h4><a href="contact.html">Privacy Policy</a></h4>
             </li>
             <li>
             <h4><a href="appdev.html">App Dev</a></h4>
             </li>
              <li>
               <h4><a href="clients.html">Clients</a></h4>
               </li>
           </ul>
         </div>

         <div class="span2 newsWidget">
           <h3>Services</h3>
           <ul>
             <li>
               <h4><a href="services.html">Computer Classes</a></h4>
             </li>
             <li>
               <h4><a href="services.html">Domain Management</a></h4>
             </li>
              <li>
               <h4><a href="services.html">Web Development</a></h4>
             </li>
             <li>
               <h4><a href="services.html">Mobile Services</a></h4>
             </li>
              <li>
               <h4><a href="services.html">Computer Repair</a></h4>
             </li>
             <li>
               <h4><a href="services.html">Technology Consulting</a></h4>
             </li>

           </ul>
         </div>

         <div class="span2 contactWidget">
           <h3>Contact</h3>
           <address>
           <strong>Alykhan Suleman</strong>
           <p> <i class="icon-location"></i> Chilliwack<br/>
             British Columbia, Canada <br />
             <i class="icon-phone"></i> 604.832.5845 <br />
             <i class="icon-mail-alt"></i> <a href="mailto:alykhan@alykhan.ca">alykhan@alykhan.ca</a> </p>
             <p> vCard </p>
           </address>
         </div>
       </div>
     </div>
   </section>
   <section  id="footerRights">
     <div class="container">
       <div class="row">
         <div class="span12">
           <div class="innerBg">
           <p><a rel="license" href="http://creativecommons.org/licenses/by-nc-nd/3.0/deed.en_CA"><img src="http://i.creativecommons.org/l/by-nc-nd/3.0/80x15.png"alt="Creative Commons Licence" style="border-width:0;vertical-align:; top;" height="15" width="80" /></a><a href="http://www.dmca.com/" title="DMCA"> <img src ="http://images.dmca.com/Badges/dmca_protected_sml_120al.png"  alt="DMCA.com" /></a></p>


             <p>Copyright � Alykhan Suleman / All rights reserved.</p>
           </div>
         </div>
       </div>
     </div>
   </section>
 </footer>
</div>
<link type="text/css" rel="stylesheet" href="css/layout.css">
<link type="text/css" id="colors" rel="stylesheet" href="css/colors.css">
<script type="text/javascript" src="js-plugin/respond/respond.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript" src="js-plugin/jquery-ui/jquery-ui-1.8.23.custom.min.js"></script>
<script src="http://maps.google.com/maps/api/js?sensor=false"></script>
<!-- third party plugins  -->
<script type="text/javascript" src="bootstrap/js/bootstrap.js"></script>
<script type="text/javascript" src="bootstrap/js/bootstrap-carousel-ie.js"></script>
<script type="text/javascript" src="js-plugin/pretty-photo/js/jquery.prettyPhoto.js"></script>
<script type="text/javascript" src="js-plugin/easing/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="js-plugin/hoverdir/jquery.hoverdir.js"></script>
  <script type="text/javascript" src="js/custom.js"></script>

</body>
</html>

WebsiteIntegrations · August 28, 2013

You'll probably have a couple conflicts as both your site and whmcs are using bootstrap.

But just taking a quick glance I notice that a few of the css in your header are not loading (the links are wrong)

example:

Your logo image is not linked properly and all of the js in the footer.

Kashif Majeed · August 28, 2013

hello frnd

how to get email variable in admin panel when client login in clientarea

and print into custom module ..?

Alykhan · August 28, 2013

Thanks for your help!

I did make some changes and found some files were not in the folders so I modified that and now have my header and footer showing but not displaying properly. Could you help me out?

http://forum.whmcs.com/showthread.php?77907-Header-Integration-Issues

Should I move all the js to my header?

Sign In

Creating a Custom Template

Recommended Posts

Alykhan

Link to comment

Share on other sites

WebsiteIntegrations

Link to comment

Share on other sites

Kashif Majeed

Link to comment

Share on other sites

Alykhan

Link to comment

Share on other sites

Join the conversation

Recently Browsing 0 members

Browse

Latest Activity

Blog

Technical Support

Important Information