Go Back   vb.org Archive > vBulletin Article Depository > Read An Article > Programming Articles
FAQ Community Calendar Today's Posts Search

Reply
 
Thread Tools
Skinning: Understanding A Template-Based System
Princeton's Avatar
Princeton
Join Date: Nov 2001
Posts: 6,693

Joe Velez began developing for the web in 1998. He is an avid vBulletin user and volunteers his services as a vbulletin.org administrator. He currently spends his time maintaining and developing allnurses.com.

Vineland, NJ
Show Printable Version Email this Page Subscription
Princeton Princeton is offline 08-20-2006, 10:00 PM

vBulletin uses a "template-based system" to render all web pages.

[imglft]https://vborg.vbsupport.ru/images/portal/puzzle.gif[/imglft] 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:
<!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:
<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:
<div class="smallfont">? Copyright 2006 GO-TOTAL LLC </div>
TEMPLATE 4 (Template Name: page_sidebar)
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:
Attachment 52422
(click on thumbnail to view content)

The Site Rules page will look this when completed:
Attachment 52423
(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? :up:

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.
Reply With Quote
  #12  
Old 06-18-2007, 01:33 PM
Princeton's Avatar
Princeton Princeton is offline
 
Join Date: Nov 2001
Location: Vineland, NJ
Posts: 6,693
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

I have no idea what you are referring to.

But I'm going to say .. no, it has nothing to do with this topic.
Reply With Quote
  #13  
Old 09-30-2007, 06:41 PM
Pc 1203 Pc 1203 is offline
 
Join Date: May 2007
Posts: 88
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

Quote:
Originally Posted by cdembek View Post
how are the templates stored.. I know they are stored in a DB but which table do they get stored in.. lets say the header, navbar and footer templates... good read.. thanks for the post
I'm also wondering about that.

- Pc1203
Reply With Quote
  #14  
Old 12-07-2007, 01:56 PM
S.McAvoy S.McAvoy is offline
 
Join Date: Nov 2007
Posts: 24
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

Same here
Reply With Quote
  #15  
Old 12-09-2007, 09:13 AM
pyd pyd is offline
 
Join Date: Feb 2005
Posts: 52
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

Are there any complete "Walkthrouhgs" on how to create a complete style?
Reply With Quote
  #16  
Old 04-23-2008, 08:13 PM
Jasem's Avatar
Jasem Jasem is offline
 
Join Date: Feb 2006
Location: www.menokia.com
Posts: 594
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

Thank you very much
Reply With Quote
  #17  
Old 05-28-2008, 02:27 PM
David_R David_R is offline
 
Join Date: Mar 2005
Location: Los Angeles
Posts: 212
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

What template engine vbulletin uses ?
Is it smarty or something else (inhouse)
Reply With Quote
  #18  
Old 06-03-2008, 07:46 PM
King Kovifor's Avatar
King Kovifor King Kovifor is offline
 
Join Date: Nov 2004
Location: PA
Posts: 3,872
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

It is an in house template engine.
Reply With Quote
  #19  
Old 06-14-2008, 11:22 AM
ElizeF's Avatar
ElizeF ElizeF is offline
 
Join Date: May 2008
Location: South-Africa
Posts: 9
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

Thanks, now I understand a little more of how the "vbulletin" template-system works.
Reply With Quote
  #20  
Old 07-20-2008, 08:06 PM
Abdu Abdu is offline
 
Join Date: Apr 2005
Posts: 5
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

Do you Joe do you perform custom skin work for others at the moment?
Reply With Quote
  #21  
Old 07-21-2008, 12:18 PM
Princeton's Avatar
Princeton Princeton is offline
 
Join Date: Nov 2001
Location: Vineland, NJ
Posts: 6,693
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

Quote:
Do you Joe do you perform custom skin work for others at the moment?
sorry, too busy

if you want something quick I suggest purchasing a skin from a company such as vbskinworks.com .. if you are looking for some custom work you can post within the
Requests For Paid Services forum
Reply With Quote
Reply


Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT. The time now is 05:46 PM.


Powered by vBulletin® Version 3.8.12 by vBS
Copyright ©2000 - 2024, vBulletin Solutions Inc.
X vBulletin 3.8.12 by vBS Debug Information
  • Page Generation 0.09363 seconds
  • Memory Usage 2,323KB
  • Queries Executed 26 (?)
More Information
Template Usage:
  • (1)SHOWTHREAD
  • (1)ad_footer_end
  • (1)ad_footer_start
  • (1)ad_header_end
  • (1)ad_header_logo
  • (1)ad_navbar_below
  • (1)ad_showthread_beforeqr
  • (4)bbcode_code
  • (2)bbcode_quote
  • (1)footer
  • (1)forumjump
  • (1)forumrules
  • (1)gobutton
  • (1)header
  • (1)headinclude
  • (1)modsystem_article
  • (1)navbar
  • (4)navbar_link
  • (120)option
  • (1)pagenav
  • (1)pagenav_curpage
  • (2)pagenav_pagelink
  • (11)post_thanks_box
  • (11)post_thanks_button
  • (1)post_thanks_javascript
  • (1)post_thanks_navbar_search
  • (11)post_thanks_postbit_info
  • (10)postbit
  • (11)postbit_onlinestatus
  • (11)postbit_wrapper
  • (1)spacer_close
  • (1)spacer_open
  • (1)tagbit_wrapper 

Phrase Groups Available:
  • global
  • inlinemod
  • postbit
  • posting
  • reputationlevel
  • showthread
Included Files:
  • ./showthread.php
  • ./global.php
  • ./includes/init.php
  • ./includes/class_core.php
  • ./includes/config.php
  • ./includes/functions.php
  • ./includes/class_hook.php
  • ./includes/modsystem_functions.php
  • ./includes/functions_bigthree.php
  • ./includes/class_postbit.php
  • ./includes/class_bbcode.php
  • ./includes/functions_reputation.php
  • ./includes/functions_post_thanks.php 

Hooks Called:
  • init_startup
  • init_startup_session_setup_start
  • init_startup_session_setup_complete
  • cache_permissions
  • fetch_threadinfo_query
  • fetch_threadinfo
  • fetch_foruminfo
  • style_fetch
  • cache_templates
  • global_start
  • parse_templates
  • global_setup_complete
  • showthread_start
  • showthread_getinfo
  • forumjump
  • showthread_post_start
  • showthread_query_postids
  • showthread_query
  • bbcode_fetch_tags
  • bbcode_create
  • showthread_postbit_create
  • postbit_factory
  • postbit_display_start
  • post_thanks_function_post_thanks_off_start
  • post_thanks_function_post_thanks_off_end
  • post_thanks_function_fetch_thanks_start
  • post_thanks_function_fetch_thanks_end
  • post_thanks_function_thanked_already_start
  • post_thanks_function_thanked_already_end
  • fetch_musername
  • postbit_imicons
  • bbcode_parse_start
  • bbcode_parse_complete_precache
  • bbcode_parse_complete
  • postbit_display_complete
  • post_thanks_function_can_thank_this_post_start
  • pagenav_page
  • pagenav_complete
  • tag_fetchbit_complete
  • forumrules
  • navbits
  • navbits_complete
  • showthread_complete