Skinning: Understanding A Template-Based System
 

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)
TEMPLATE 2 (Template Name: page_content)
TEMPLATE 3 (Template Name: page_footer)
TEMPLATE 4 (Template Name: page_sidebar)
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.

very good info Princeton...thanks! :)

appreciate the comments :up:

hopefully, it can help someone new to "Skinning vbulletin"

A good article leaves not a doubt in my mind. Good work!

Nice tutorial, Princeton. :)

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

Are you asking which database table holds the templates?

I for one would be VERY Grateful to Princeton for many more of those type explanations.

By the way Princeton, you have a frsh start newbie goin right here!!

thanks pappy ... when I have time, I'll write some new articles. :)

Is there a way to change one style and it also changes other styles that u have? or my question is not the same as ur topic ? :)

I have no idea what you are referring to.

But I'm going to say .. no, it has nothing to do with this topic. ;)

I'm also wondering about that.

- Pc1203

Same here

Are there any complete "Walkthrouhgs" on how to create a complete style?

Thank you very much

What template engine vbulletin uses ?
Is it smarty or something else (inhouse)

It is an in house template engine.

Thanks, now I understand a little more of how the "vbulletin" template-system works.

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

very good info

...

thanks

i am willing to pay princeton for a tutorial on skinning