In this short tutorial we will show you how to fast integrate your HostBill installation’s template to match your website’s look and feel. No advanced html/css skills needed – just some copy/paste and we’re done!
Tools needed:
- text editor (anything will do the job, best will be with syntax coloring – like free notepad ++ for windows)
- FTP client
- Firefox + FireBug plugin can be helpful for finding bugs
- small coffee
...
Lets get started!
...
I’ll be using free html template from http://www.freelayouts.com/ as a original website, so HostBill will match it look and feel at the end. Template i picked: http://www.freelayouts.com/templates/-Green-and-Plain?preview=true.
...
Our tutorial main hosting page
Create new template directory
With your FTP client go to /path_to_your_installation/templates and create new folder under it, in this tutorial i will use test_1
Download base template to modify
...
Any template shipped with HostBill will be good – i’ll use clean template. Copy all templates/clean directory contents to your local machine.
Starting file modification
Note: Only basic HTML knowledge is neccessary to create new HostBill template using old one as pattern. HostBill is also using Smarty template system, so if you have any problem with its advanced syntax refeer to Smarty documentation.
HostBill client area template is divided into few key sections, and for basic integration you should edit only theese:
- header.tpl – contains template header – every clientarea page is including this file at the top
- footer.tpl – same as above, included at bottom of every page
- style.css – clientarea’s main stylesheet
- sidemenu.tpl – contains sidebar navigation
- submenu.tpl – contains top navigation viewable only after login-in
...
I assume your website is not divided in many sections and every html file contains all informations to display it properly in web-browser. Same is with our tutorial index.html file (which also have its own stylesheet kept in style.css). It is important for us to understand our website current structure, here is how it looks in our example:
Our website structure
Modyfying header.tpl
Let’s begin from the top. Leave everything unedited to <body> tag. After it paste new header from current website, change page <h1></h1> to tag {$business_name} taken from HostBill:
| Code Block | ||
|---|---|---|
| ||
<div id=”header”>
<div id=”logo”>
<h1>
<a href=”#”>{$business_name}</a>
</h1>
</div>
<!– end #logo –>
<div id=”menu”>
<ul>
<li><a href=”#”>Home</a></li>
<li><a href=”#”>About Us</a></li>
<li><a href=”#”>Products</a></li>
<li><a href=”#”>Services</a></li>
<li><a href=”#”>Contact Us</a></li>
</ul>
</div>
<!– end #menu –>
</div> |
...
Entire page content in actual hosting website is being kept in <div id=”page”> tag, so lets add it below our newly added header. Note that as with (almost) every html tag we need to close </div> – it will be closed in our footer.tpl.
Every page can contains errors or infos that need to be displayed – this are being handled automatically by HostBill, just add into your template (in header file):
| Code Block | ||
|---|---|---|
| ||
<div id=”errors” {if $error}style=”display:block”{/if}>{foreach from=$error item=blads}<span>{$blads}</span>{/foreach}</div>
<div id=”infos” {if $info}style=”display:block”{/if}>{foreach from=$info item=infos}<span>{$infos}</span>{/foreach}</div> |
What about logged users? They should be able to see client-menu only – add it simply with:
| Code Block | ||
|---|---|---|
| ||
{if $logged==’1′}
<div id=”subcontent”>
{include file=submenu.tpl}
</div>
{/if} |
...
Because every page contains sidebar we need to add it in header since its included automatically, after information tags mentioned before I’ve added line:
...