How to design new web template

Designing web template for RAMUI WEBBLOG blog script is an easy task. Here is a step by step guide which will teach you how to convert an existing HTML page into your blog template. Below I take a simple table based HTML page.

Code | Download
<html>
<head>
<!-- Title and meta tags here-->
<style type="text/css">
body{margin:0;padding:10px;font:11px arial;}
a, td{font-size:11px;}
a{color:#0000ff;}
#mainbody{width:820px;border-collapse:collapse;border:1px solid gray;}
#top{height:70px;vertical-align:middle;font-size:22px;}
#topmenu{background:black;height:22px;}
#topmenu a{color:white;padding:4px 15px;border-right:1px solid gray;}
#left{vertical-align:top;width:210px;}
#middle{vertical-align:top;width:470px;}
#footer{border-top:1px solid #666666;background:#dddddd;padding:10px;text-align:center;}
</style>
</head>
<body>
<center>
<table id="mainbody"><tr>
<td id="top">
<img style="width:32px;height:32px;margin:18px 5px;float:left;clear:left;border:none;" src="logo.gif" /><div style="margin:20px 20px 20px 0;color:#bd8a04;float:left;clear:none;">Your site name</div>
<div style="float:right;clear:right;">
<script type="text/javascript"><!--
google_ad_client = "pub-6608077213642560";
/* 468x60, created 11/13/08 */
google_ad_slot = "8536716670";
google_ad_width = 468;
google_ad_height = 60;
//-->
</script></div>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</td></tr>
<tr><td id="topmenu">
<a href="#">Home</a><a href="#">About</a><a href="#">Contact</a>
</td></tr>
<tr><td>
<table style="width:100%;"><tr>
<td id="left">
<!--Your menu code here-->
</td>
<td id="middle">
<!--Your page content here-->
<h1>Ramui webblog script</h1>
<h2>Definition:</h2>
<p>RAMUI WEBBLOG is a free PHP-MYSQL based content management system script. This script has few unique features which make it different from the other free or even commercial blog scripts available on the internet. The ultimate goal of this script is to provide maximum control to the webmasters in managing their websites.</p>
<h2><a name="spe"></a>Special features:</h2>
<h2>System requirements:</h2>
<p>The system required to install or run this script are:-</p>
<ul>
<li>Apache server.</li>
<li>PHP version 5.2.1 or higher;</li>
<li>GD library version 2.1 or higher;</li>
<li>PHP extension Zlib (http://www.zlib.net/) written by Jean-loup Gailly
(http://gailly.net/);</li>
<li>MYSQL database version 5.0 or higher.</li></ul>
<p>Most free hosts are not adequate for running this script properly.</p>
<h2>Copyright:</h2>
<p>Copyright: Copyright © 2008 <a href="http://ramui.com/">http://ramui.com/</a>. All rights reserved.<br />
This product is protected by copyright and distributed under licenses
restricting copying, distribution. Permission is granted to the public to
download and use this script provided that this Notice and any statement of
authorship are reproduced in every page on all copies of the script.</p>
<!--End of page content-->
</td>
<td id="right"></td></tr></table>
</td></tr>
<td id="footer">
<!--Your page footer here-->
© 2010,  <a href="http://ramui.com/">http://ramui.com</a>   All rights reserved. <br>Powered by: <a href="http://ramui.com/">ramui webblog</a>® Version 1.0
</td></tr></table>
</center>
</body>
</html>

The screenshot of this page when you open it on your browser window will be as below.

Now we have to convert this page into our blog template.

Converting HTML page into blog template

To covert this sample page into your blog template, do the following steps.

  1. Create a folder with an arbitrary name, say "mytemplate" which will be the name of your template.
  2. Create two more folders named "images" and "css" inside your template folder.
  3. Put your logo image "logo.gif" inside the "image" folder.
  4. Open the source of the HTML page on windows Notepad for editing. You can also use Notepad++ from http://notepad-plus-plus.org/ to edit source code.
  5. Replace the top part of HTML code from <html> to <body> by the following line of code.
    <?php include include 'fw_blog/templates/head.php';?>
  6. Change the src attribute of your Logo image to the "image" folder inside your template folder. Use the following line of code for the src attribute.
    src="<?php echo $fw_template_url;?>images/logo.gif"

Adding Google adsense code

You can directly use Google Adsense or other Ad code into your template file. But more flexible approch is to use Addon page utility to plugin your Ad code. For detail about addon page please read
Add-on page and its uses.

Adding menu

Replace the top menu part of your code by the following lines of code.

Code | Download
//Code in HTML file.
<tr><td id="topmenu">
<a href="#">Home</a><a href="#">About</a><a href="#">Contact</a>
</td></tr>

//Replace with the following lines of code.
<tr><td id="topmenu">
<?php
$topmenu=$fw_db->get_addon("topmenu");
if(!empty($topmenu)){echo $topmenu;}
else{ ?>
<a href="<?php echo 'http://'.$_SERVER['HTTP_HOST']; ?>">Home</a>&nbsp;
<a href="<?php echo 'http://'.$_SERVER['HTTP_HOST'].fw_get_docroot().'about.html'; ?>">About</a>&nbsp;
<a href="<?php echo 'http://'.$_SERVER['HTTP_HOST'].fw_get_docroot().'contact.html'; ?>">Contact</a>&nbsp;
<a href="<?php echo 'http://'.$_SERVER['HTTP_HOST'].fw_get_docroot().'sitemap.html'; ?>">Sitemap</a>&nbsp;
<a href="<?php echo 'http://'.$_SERVER['HTTP_HOST'].fw_get_docroot().'terms-of-use.html'; ?>">Terms of use</a>&nbsp;
<a href="<?php echo 'http://'.$_SERVER['HTTP_HOST'].fw_get_docroot().'fw_blog/atom.php'; ?>" target="_blank" style="color:#aa3333;">Atom</a>
<?php }?>
</td></tr>

To add vertical menu just put the following line of code.
<?php echo $fw_db->menu($fw_page_array['pagename']);?>
This vertical menu will contain all post links that you have created and publish from your admin panel.

Now replace the content part of your HTML page. This is the area where your dynamic page content will appear. This part started with the line
<!--Your page content here--> and ended with
<!--End of page content-->

Replace that part by the following lines of code.

Code | Download
<?php
//Display page content from database (for post).
if(!empty($fw_page_array['content'])){echo $fw_page_array['content'];}
//Include content file from page directory (for page).
if(file_exists("fw_blog/pages/".str_replace("/", ".",$fw_page_array['pagename']).".php")){@include "fw_blog/pages/".str_replace("/", ".",$fw_page_array['pagename']).".php";}
//Include user comments.
if((@array_key_exists('allowcomments',$fw_page_array))&&($fw_page_array['allowcomments'])){
    echo '<div id="fw_comments"><a name="comments"></a><div id="fw_commentbar">User comments:</div>';
    echo $fw_db->get_comments($fw_page_array['id']);
    echo '<p style="text-align:right;"><a name="add_comment" href="javascript:fwAddComment('.$fw_page_array['id'].')"><strong>Add comment</strong></a></p>';
    echo '</div>';}
?>

At the page footer keep the code as it is only add one more line of text just before the </body> tag.
<?php echo $fw_db->footer();?>
You can also put any additional text or link of your choice. But please do not remove my home page link from the bottom.

Saving template file

After all editing job your template file code will be as follows.

Code | Download
<?php
//Include common head.php file.
include 'fw_blog/templates/head.php';
?>
<center>
<table id="mainbody"><tr>
<td id="top">
<img style="width:32px;height:32px;margin:18px 5px;float:left;clear:left;border:none;" src="logo.gif" /><div style="margin:20px 20px 20px 0;color:#bd8a04;float:left;clear:none;">Your site name</div>
<div style="float:right;clear:right;">
<script type="text/javascript"><!--
google_ad_client = "pub-6608077213642560";
/* 468x60, created 11/13/08 */
google_ad_slot = "8536716670";
google_ad_width = 468;
google_ad_height = 60;
//-->
</script></div>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</td></tr>
<tr><td id="topmenu">
<?php
$topmenu=$fw_db->get_addon("topmenu");
if(!empty($topmenu)){echo $topmenu;}
else{ ?>
<a href="<?php echo 'http://'.$_SERVER['HTTP_HOST']; ?>">Home</a>&nbsp;
<a href="<?php echo 'http://'.$_SERVER['HTTP_HOST'].fw_get_docroot().'about.html'; ?>">About</a>&nbsp;
<a href="<?php echo 'http://'.$_SERVER['HTTP_HOST'].fw_get_docroot().'contact.html'; ?>">Contact</a>&nbsp;
<a href="<?php echo 'http://'.$_SERVER['HTTP_HOST'].fw_get_docroot().'sitemap.html'; ?>">Sitemap</a>&nbsp;
<a href="<?php echo 'http://'.$_SERVER['HTTP_HOST'].fw_get_docroot().'terms-of-use.html'; ?>">Terms of use</a>&nbsp;
<a href="<?php echo 'http://'.$_SERVER['HTTP_HOST'].fw_get_docroot().'fw_blog/atom.php'; ?>" target="_blank" style="color:#aa3333;">Atom</a>
<?php }?>
</td></tr>
<tr><td>
<table style="width:100%;"><tr>
<td id="left">
<?php
//Display menu.
echo $fw_db->menu($fw_page_array['pagename']);
?>
</td>
<td id="middle">
<!--Your page content here-->
<?php
//Display page content from database (for post).
if(!empty($fw_page_array['content'])){echo $fw_page_array['content'];}
//Include content file from page directory (for page).
if(file_exists("fw_blog/pages/".str_replace("/", ".",$fw_page_array['pagename']).".php")){@include "fw_blog/pages/".str_replace("/", ".",$fw_page_array['pagename']).".php";}
//Include user comments.
if((@array_key_exists('allowcomments',$fw_page_array))&&($fw_page_array['allowcomments'])){
    echo '<div id="fw_comments"><a name="comments"></a><div id="fw_commentbar">User comments:</div>';
    echo $fw_db->get_comments($fw_page_array['id']);
    echo '<p style="text-align:right;"><a name="add_comment" href="javascript:fwAddComment('.$fw_page_array['id'].')"><strong>Add comment</strong></a></p>';
    echo '</div>';}
?>
<!--End of page content-->
</td>
<td id="right">
<!--Right sidebar code here-->
</td></tr></table>
</td></tr>
<td id="footer">
<!--Your page footer here-->
© 2010,  <a href="http://ramui.com/">http://ramui.com</a>   All rights reserved. <br>Powered by: <a href="http://ramui.com/">ramui webblog</a>® Version 3.2
</td></tr></table>
</center>
<?php echo $fw_db->footer();?>
</body>
</html>

Now your next task is to save your edited file as "index.php" inside your template folder. If you are using Windows Notepad then select "Save type as:" option as "All files" while saving.

Adding style code

Now it is time to add style code to your template file. Create a css file and write all of your style code in it. Save this file as "screen.css" in the "css" folder inside your template folder. Now upload your entire template folder inside the /fw_blog/templates/ directory of your web server. Now your template is ready to use.

Creating new template using template editor

As you know this script includes a rich template editor so you can use this utility for further editing or even create a new web template. The required steps are as follows.

  1. Create a new folder inside your template editor.
  2. Inside that folder create two more folders named as "images" and "css".
  3. Copy the "index.php" file from the default template folder and past it inside your new template folder. Now edit that file as per the above guide line and save it.
  4. Copy the "screen.css" file from the "css" folder of your default template and past it inside the "css" folder of the new template. Edit that file as per your requirement and save it.
  5. Use upload utility to upload your logo image into the "image" folder.
  6. Now your new template is ready to use.

Comment