Just Hosting Theme for WHMCS

This post continues explaining how to setup the Just Hosting Theme for WHMCS going from my original post: Getting Started With The Just Hosting Theme for WHMCS

Here is a recap of what is needed to set everything up

What you will need



Sponsor:


So going from where we were in our previous post the next thing we will need to do is change the logo, unless of course you want to call your site just hosting. The logo is located under images/logo.png and we will also find the small version of the logo under images/logo_small.png. I am not sure of the exact font used, it may be in the documentation but I did not look for very long. I used a similar font called Banque Gothique RR Extra Bold Extra Condensed and applied a text reflection, if you don’t know how to apply a reflection you can follow this free photoshop tutorial which should also be similare to what you would do in gimp or any other image editor. For the small logo I changed the size of the logo.png to 107px wide and kept the proportions.

Now I finally have a logo that matches my domain, but I need to change the title of the page that still says Just Hosting. Opening up our index.html file we will find the title tags on line 5 and in between these tags you will see “Just Hosting”, I changed this to say “Zunem – Professional hosting services at affordable prices”, adding the name of my site and adding the slightly ajusted version of the slogan that comes with the template. If this is going to be a professional company you may want to consider using a different slogan that sets you apart from the template and anyone else who might be using it.

As I am doing this I am simply going from top to bottom in the index.html file. After fixing the title I scrolled down to the bottom of the area and noticed some stylesheets and some where highlighted by my IDE letting me know that they were missing. Here is what I was looking at.

<link href="reset.css" rel="stylesheet" type="text/css">
<link href="screen.css" rel="stylesheet" type="text/css">
<link href="fancybox.css" rel="stylesheet" type="text/css">

The reset.css and fancybox.css were not in the folder I am using for the theme and they did not seem to be in the template folder in whmcs. By the way I am using the PHPStorm IDE from Jetbrains which is an awesome tool when working with PHP. After removing the stylesheets I was simply left with this.

bc176d8dbe3b5e9ad7c747bb42e2bce3_000001

After this you should probably upload these and commit your changes to make sure it didn’t affect your site in any way, if it does then add the code back again and don’t worry about removing them.

Next I find the block of code which defines the header of my page and defines the text which is shown there. This is what the code should look like:

<div class="holder">
		<h1><a href="/">Just Hosting</a></h1>
		<h2>Professional hosting services affordable prices</h2>
		<p>Sales enquiry: +44 0123 456 789</p>
		<div class="clear"></div>
</div>

I will simply update this with the information for my website and since I don’t have a sales phone number yet I will change the number to my email instead. At this time I’m not worrying about getting spam but if you want to prevent bots from getting your email you can read my earlier post: Hide your email from parsers and email spiders. Here is the code I have after changing the text.

	<div class="holder">
		<h1><a href="/">Zunem</a></h1>
		<h2>Professional hosting services at affordable prices</h2>
		<p>Sales enquiry: sales@zunem.com</p>
		<div class="clear"></div>
	</div>

After this we will find the boxes or plans which we changed in the previous guide, these are commented to make it easy to understand. I like the plans the way they are and will leave the text the way it is. If you are new to html you should simply be able to edit the text between the tags and not have to worry about messing up the layout. Here is the code for the first block, the other two blocks are pretty much the same.

<div class="box" id="one">
<!-- first box begin -->
				<h3>STARTER</h3><!-- plan name -->
				<ul>
					<li title="item-a">100 MB space</li>
					<li title="item-b">1GB Monthly Transfer</li>
					<li title="item-c">2 SQL databeses</li>
					<li title="item-d">Unlimited email accounts</li>
					<li title="item-e"><strong>FREE!</strong> for first 3months</li>
				</ul>
 
				<div class="bottom_part"> 
 
					<span class="price">$2.00</span><!-- price -->
 
					<a href="http://zunem.com/whmcs/cart.php?a=add&amp;pid=1"  class="button">Register</a> 
					<div class="clear"></div>
				</div>
 
			</div><!-- first box end -->

That sums up most of what is needed to be edited, there is more text further down on the page which can easily be found and changed in the same matter as we have done so far. You can find the text by viewing your template as a normal website and copying the text you want to edit and then using the find function in your editor to find where the text is in the HTML. Also don’t forget to change the text in your footer.

Getting the forms working

So there are two forms at the bottom of the page. The registration form will send you an email via the register.php file and the login for customers does nothing. Unfortunately the registration form doesn’t really work with whmcs but we can change it slightly to accommodate for this. I removed the username and email fields and left the domain field. Then I changed it so that the form would take the customer to the order form for the starter package. Let me explain what I did, here is the code I started with.

<h4>REGISTER NEW ACCOUNT</h4>
		<form action="#" method="post" id="register" >
		<input type="hidden"  name="plan" value="starter" id="plan"/>
			<div class="input_section">
				<!--<label>Domain</label>-->
				<input type="text" name="domain" id="domain" onFocus="if(this.value=='Please enter domain'){this.value=''}" onBlur="if(this.value==''){this.value='Please enter domain'}" value="Please enter domain" >
				<p class="note">if you don&acute;t provide extension we use our domain</p>
				<div class="clear"></div>
			</div>
			<div class="input_section">
				<!--<label>Username</label>-->
				<input type="text" name="username" id="username" onFocus="if(this.value=='Choose username'){this.value=''}" onBlur="if(this.value==''){this.value='Choose username'}" value="Choose username" >
				<p class="note">This will be your identification in our system</p>
				<div class="clear"></div>
 
			</div>
			<div class="input_section">
				<!--<label>Email</label>-->
				<input type="email" name="email" id="email"  onfocus="if(this.value=='Your email'){this.value=''}" onBlur="if(this.value==''){this.value='Your email'}" value="Your email"  >
				<p class="note">We wan&acute;t use it for marketing purposes</p>					
				<div class="clear"></div>
			</div>
			<div class="last_one">
				<input name="register_button" type="submit" class="button" id="register_button" value="Submit" />
 
 
				<p class="note register_terms">By registering you accept terms and conditions</p>
				<p class="note register_error" style="display:none"> Please Enter Valid Data</p>      <!-- error message -->
				<p class="note register_success" style="display:none"> Registration successful </p> 		
 
				<div class="clear"></div>
 
			</div>
		</form>

To begin with I opened up the javascript file which currently prevents the form from going to a new page, this is found under js/site.js and I removed the following code:

$(function() {
	$("#register_button").click(function() {
 
 
		var domain = $("#domain").val();
		var username = $("#username").val();
		var email = $("#email").val();
		var plan = $("#plan").val();
		var dataString = '&domain='+ domain + '&username=' + username + '&email=' + email + '&plan=' + plan;
 
 
		if(domain=='' || username=='' || email=='' || domain=='Please enter domain' || username=='Choose username' || email=='Your email')
					{
						$('.register_success').fadeOut(200).hide();
						$('.register_error').fadeOut(200).show();
						$('.register_terms').fadeOut(200).hide();
					}
		else
			{
				$.ajax({
				type: "POST",
				url: "register.php",
				data: dataString,
				success: function()
 
				{
					$('.register_success').fadeIn(200).show();
					$('.register_error').fadeOut(200).hide();
					$('.register_terms').fadeOut(200).hide();
				}
			});
	}
return false;
});
	});

By removing this we can now submit our form like we want. I then went ahead and changed the form action on the index.html page, here is my current code for the form which now has my whmcs url.

<form action="http://zunem.com/whmcs/cart.php?a=add&pid=1" method="post" id="register" >

Then for the domain field I changed the name to sld as this is what whmcs used to get the domain when entered through a form. Unfortunately my solution won’t account for someone typing in a domain extension, this would require either some javascript or php. Here is my domain field with the updated name.

<input type="text" name="sld" id="domain" onFocus="if(this.value=='Please enter domain'){this.value=''}" onBlur="if(this.value==''){this.value='Please enter domain'}" value="Please enter domain" >

I also removed some of the errors and success messages at the bottom, the code I ended up with looked like this.

<div class="content_box" id="register_box">
		<h4>REGISTER NEW ACCOUNT</h4>
		<form action="http://zunem.com/whmcs/cart.php?a=add&pid=1" method="post" id="register" >
		<input type="hidden"  name="plan" value="starter" id="plan"/>
			<div class="input_section">
				<!--<label>Domain</label>-->
				<input type="text" name="sld" id="domain" onFocus="if(this.value=='Please enter domain'){this.value=''}" onBlur="if(this.value==''){this.value='Please enter domain'}" value="Please enter domain" >
				<p class="note">if you don&acute;t provide extension we use our domain</p>
				<div class="clear"></div>
			</div>
			<div class="last_one">
				<input name="register_button" type="submit" class="button" id="register_button" value="Submit" />
 
 
				<p class="note register_terms">By registering you accept terms and conditions</p>
 
				<div class="clear"></div>
 
			</div>
		</form>
	</div>

Now to fix our login form, this will be a little easier as it matches with the input fields that whmcs and has no javascript added to it. This is the code I start with in the index.html file.

<div class="content_box" id="login_box">
		<h4>EXISTING CUSTOMERS</h4>
			<form action="#" method="post">
 
				<div  class="input_section">
					<!--<label>Username</label>-->
					<div class="input_fields">
						<input  type="text" name="login_username" id="login_username" onFocus="if(this.value=='Username'){this.value=''}" onBlur="if(this.value==''){this.value='Username'}" value="Username">
					</div>
					<div class="clear"></div>
				</div>
				<div class="input_section">
					<!--<label>Password</label>-->
					<div class="input_fields">
						<input type="password" name="password" id="password"  value="passworde" onMouseDown="javascript:this.value='';"/>
 
					</div>
					<div class="clear"></div>
				</div>
					<div class="input_section">
					<p class="note">If you forgot your passoword just enter your email and click <a href="#">here</a></p>
					<div class="clear"></div>
					</div>
					<div class="last_one">
 
					<input name="login" type="submit" class="button" id="login" value="Submit" />
							<div class="clear"></div>
					</div>
 
 
			</form>	
		</div>

All I have to do here is change the form action from # to link to the dologin.php file which handles the login in whmcs. The link I end up with is http://zunem.com/whmcs/dologin.php and here is the final code.

<div class="content_box" id="login_box">
		<h4>EXISTING CUSTOMERS</h4>
			<form action="http://zunem.com/whmcs/dologin.php" method="post">
 
				<div  class="input_section">
					<!--<label>Username</label>-->
					<div class="input_fields">
						<input  type="text" name="login_username" id="login_username" onFocus="if(this.value=='Username'){this.value=''}" onBlur="if(this.value==''){this.value='Username'}" value="Username">
					</div>
					<div class="clear"></div>
				</div>
				<div class="input_section">
					<!--<label>Password</label>-->
					<div class="input_fields">
						<input type="password" name="password" id="password"  value="passworde" onMouseDown="javascript:this.value='';"/>
 
					</div>
					<div class="clear"></div>
				</div>
					<div class="input_section">
					<p class="note">If you forgot your passoword just enter your email and click <a href="#">here</a></p>
					<div class="clear"></div>
					</div>
					<div class="last_one">
 
					<input name="login" type="submit" class="button" id="login" value="Submit" />
							<div class="clear"></div>
					</div>
 
 
			</form>	
		</div>

That’s all the customization you need to get up and going with your site. I hope the guide has helped, please leave a comment with any feedback or questions!

About Markus Tenghamn

avatar
Markus Tenghamn is a programmer and entrepreneur currently studying computer science at M√§lardalens University (MDH), Sweden, in addition to being a big part of several new and innovative startups. Markus has pursued web development for over 10 years and started his first ecommerce website at the age of 17. At the moment Markus is responsible for developing MDH Schedule iPhone app (unofficial) and sync server which let's students see their course schedules right on their phone. In addition to other projects, he is a volunteer for SFSFUM (Meeting for student unions in Sweden) where he developed an app for iPhone, Android and Windows Phone 7 which gives participants maps with direction and event information. He has also been a finalist for the Rising Star scholarship awarded by √Ėstsvenska Handelskammaren for course projects at MDH. Markus's latest startup is called Anveto AB (Anveto.com), an innovative analytics and marketing platform which will bring truly unique and new ideas to companies looking to increase revenue. In his spare time Markus prefers to write about web development, app development and startups on his blog at MarkusTenghamn.com. When he is not doing that he loves to read about AI, chaos theory, space and quantum mechanics.

One comment

Leave a Reply

Scroll To Top