Articles Thread, Skinning: Understanding A Template-Based System in vBulletin; Skinning: Understanding A Template-Based System In order to modify the design of your site, you will need to first understand ...

Short Link: http://forum.egypt.com/enforum/showthread.php?t=11084

Developer · 28-12-2008, 04:26 PM

Skinning: Understanding A Template-Based System

Egypt.Com EnForum

In order to modify the design of your site, you will need to first understand WHAT? and WHY? a template-based system.

WHAT IS A TEMPLATE-BASED SYSTEM?
First of all, a template-based system (eg. vBulletin) is not the same as "templates" purchased at monstertemplate.com.

Template-based system are files used by a particular program (eg vBulletin) that are not complete HTML files - they contain only parts of the HTML that the system puts together to build a web page.

WHY A TEMPLATE-BASED SYSTEM?
Templating is an easy way to create a web site without a lot of work in maintaining a consistent look and feel across the entire site. For example, all you have to do is modify a template and the modifications will reflect across every web page.

SHOW ME AN EXAMPLE
Are you still puzzled? OK, let's jump right in and play with an example.

Let's say, we have 2 sections in our site: Site Policies and Site Rules.
To render these sections, we have a total of 4 templates.

TEMPLATE 1 (Template Name: PAGE)
Code:

PHP Code:


			
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
</head>

<body>
$HTML
</body>
</html>

TEMPLATE 2 (Template Name: page_content)
Code:

PHP Code:


			
<h1>$title</h1>
<table class="tborder" width="100%" border="0" cellspacing="1" cellpadding="5">
  <tr>
    <td class="alt1" width="180">$sidebar_content</td>
    <td class="alt1" width="100%"><p>$text</p></td>
  </tr>
</table>

TEMPLATE 3 (Template Name: page_footer)
Code:
[php]<div class="smallfont">© Copyright 2006 GO-TOTAL LLC </div>[php]
TEMPLATE 4 (Template Name: page_sidebar)
Code:

PHP Code:


			
<table class="tborder" width="100%" border="0" cellspacing="1" cellpadding="5">
  <tr>
    <td class="thead">Sidebar Title</td>
    <td class="alt1"><div>This is the sidebar content.</div></td>
  </tr>
</table>

When visiting each section, the script will build the HTML by using the variables for the specific page and putting the following templates together: PAGE + page_sidebar + page_content + page_footer

The title and content for each page is as follow:
Variables for our policy page:

$title= 'Site Policies';
$text= 'Hello world! This are my policies...';

Variables for our rules page:

$title= 'Site Rules';
$text= 'In order to participate you must follow our rules...";

The Site Policies page will look this when completed:

(click on thumbnail to view content)

The Site Rules page will look this when completed:

(click on thumbnail to view content)

Now, just imagine this on a larger scale ... let's say 1000's of pages; and, you need to modify the copyright notice.

Well, with a template-based system, all you have to do is modify the page_footer template; and the changes will be displayed on all your pages! Now, isn't that great? Egypt.Com EnForum

What a great way to save time. Time is money!

So you see, the idea behind a "template-based system" is that you only have to write the HTML 1 time; and, you can use it over and over again. It's similar to CSS (that's another tutorial) -- you only have to write it once and it affects the whole site.

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Template Modification System	Developer	Mods for 3.6.x	0	10-10-2008 02:51 PM
Understanding and Verifying Uptime Guarantees	Developer	Hosting, Domains and Online Services	0	17-09-2008 04:16 AM
Understanding Modern-day Egypt	Developer	Modern History of Egypt	1	12-08-2008 07:59 PM

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)

Articles Thread, Skinning: Understanding A Template-Based System in vBulletin; Skinning: Understanding A Template-Based System In order to modify the design of your site, you will need to first understand ... Short Link: http://forum.egypt.com/enforum/showthread.php?t=11084