How do Templates Work? 
The pages you see making up the user-side of vBulletin are generated using a number of templates. Templates are fragments of XHTML code interspersed with PHP variables. These combine together to form complete XHTML pages that are served up to visitors.

A simple example template might look like this:
<table class="tborder">
<tr>
    <td class="tcat" colspan="2">My Table</td>
</tr>
$tablebits
</table>
The $tablebits PHP variable represents an area of the template that will be replaced with either some data, or additional template contents.

For example, we may have another template that looks like this:
<tr>
    <td class="alt1">$username</td>
    <td class="alt2">$message</td>
</tr>
This template would have the $username and $message variables substituted with the appropriate username and message.
<tr>
    <td class="alt1">Mister User</td>
    <td class="alt2">This is my message</td>
</tr>
The template would then be repeated as many times as necessary, replacing the variables with the username and message for each repetition. Finally, this completed block of XHTML would be inserted into the first template, replacing the $tablebits variable, resulting in a complete block of code like this:
<table class="tborder">
<tr>
    <td class="tcat" colspan="2">My Table</td>
</tr>
<tr>
    <td class="alt1">Mister User</td>
    <td class="alt2">This is my message</td>
</tr>
<tr>
    <td class="alt1">Another Person</td>
    <td class="alt2">This message is in reply to that posted above.</td>
</tr>
<tr>
    <td class="alt1">Mister User</td>
    <td class="alt2">Hey, thanks for responding to my message!</td>
</tr>
</table>
This resulting code can then be passed on to the visitor's web browser for display.

Here is the header template from a current version of vBulletin. This shows how a typical template is built in vBulletin.
<div class="above_body"> <!-- closing tag is in template navbar -->
<div id="header" class="floatcontainer doc_header">
    <vb:if condition="$stylevar['titleimage']"><div><a name="top" href="{vb:link forumhome}" class="logo-image"><img src="{vb:stylevar titleimage}" alt="{vb:rawphrase x_powered_by_vbulletin, {vb:raw vboptions.bbtitle}}" /></a></div></vb:if>
    <div id="toplinks" class="toplinks">
        <vb:if condition="$show['member']">
            <ul class="isuser">
                <li><a href="login.php?{vb:raw session.sessionurl}do=logout&amp;logouthash={vb:raw bbuserinfo.logouthash}" onclick="return log_out('{vb:rawphrase sure_you_want_to_log_out}')">{vb:rawphrase log_out}</a></li>
                <vb:if condition="$show['registerbutton']">
                <li><a href="register.php{vb:raw session.sessionurl_q}" rel="nofollow">{vb:rawphrase register}</a></li>
                </vb:if>
                <li><a href="usercp.php{vb:raw session.sessionurl_q}">{vb:rawphrase user_control_panel}</a></li>
                <li><a href="{vb:link member, {vb:raw bbuserinfo}}">{vb:rawphrase your_profile}</a></li>
                <vb:if condition="$notifications_total">
                <li class="popupmenu notifications" id="notifications">
                    <a class="popupctrl" href="usercp.php{vb:raw session.sessionurl_q}">{vb:rawphrase your_notifications}: <span class="notifications-number"><strong>{vb:raw notifications_total}</strong></span></a>
                    <ul class="popupbody popuphover">
                        {vb:raw notifications_menubits}
                    </ul>
                </li>
                <vb:else />
                <li class="popupmenu nonotifications" id="nonotifications">
                    <a class="popupctrl" href="usercp.php{vb:raw session.sessionurl_q}">{vb:rawphrase your_notifications}</a>
                    <ul class="popupbody popuphover">
                        <li>{vb:rawphrase no_new_messages}</li>
                        <vb:if condition="$show['pmmainlink']"><li><a href="private.php{vb:raw session.sessionurl_q}">{vb:rawphrase inbox}</a></li></vb:if>
                    </ul>
                </li>
                </vb:if>
                <li class="welcomelink">{vb:rawphrase welcome_x_link_y, {vb:raw bbuserinfo.username}, {vb:link member, {vb:raw bbuserinfo}}}</li>
                <vb:if condition="$vboptions['enablefacebookconnect']">
                    {vb:raw facebook_header}
                </vb:if>
            </ul>
            {vb:raw template_hook.header_userinfo}
            <vb:comment><p>{vb:rawphrase last_visited_x_at_y, {vb:raw pmbox.lastvisitdate}, {vb:raw pmbox.lastvisittime}}</p></vb:comment>
        <vb:else />
            <ul class="nouser">
            <vb:if condition="$show['registerbutton']">
                <li><a href="register.php{vb:raw session.sessionurl_q}" rel="nofollow">{vb:rawphrase register}</a></li>
            </vb:if>
                <li><a rel="help" href="faq.php{vb:raw session.sessionurl_q}">{vb:rawphrase help}</a></li>
                <li>
            <script type="text/javascript" src="clientscript/vbulletin_md5.js?v={vb:raw vboptions.simpleversion}"></script>
            <form id="navbar_loginform" action="login.php?{vb:raw session.sessionurl}do=login" method="post" onsubmit="md5hash(vb_login_password, vb_login_md5password, vb_login_md5password_utf, {vb:raw show.nopasswordempty})">
                <fieldset id="logindetails" class="logindetails">
                    <div>
                        <div>
                    <input type="text" class="textbox<vb:if condition="!$username"> default-value</vb:if>" name="vb_login_username" id="navbar_username" size="10" accesskey="u" tabindex="101" value="<vb:if condition="$username">{vb:raw username}<vb:else />{vb:rawphrase username}</vb:if>" />
                    <input type="password" class="textbox" tabindex="102" name="vb_login_password" id="navbar_password" size="10" />
                    <input type="text" class="textbox default-value" tabindex="102" name="vb_login_password_hint" id="navbar_password_hint" size="10" value="{vb:rawphrase password}" style="display:none;" />
                    <input type="submit" class="loginbutton" tabindex="104" value="{vb:rawphrase log_in}" title="{vb:rawphrase enter_username_to_login_or_register}" accesskey="s" />
                        </div>
                    </div>
                </fieldset>
                <div id="remember" class="remember">
                    <label for="cb_cookieuser_navbar"><input type="checkbox" name="cookieuser" value="1" id="cb_cookieuser_navbar" class="cb_cookieuser_navbar" accesskey="c" tabindex="103" /> {vb:rawphrase remember_me}</label>
                </div>

                <input type="hidden" name="s" value="{vb:raw session.sessionhash}" />
                <input type="hidden" name="securitytoken" value="{vb:raw bbuserinfo.securitytoken}" />
                <input type="hidden" name="do" value="login" />
                <input type="hidden" name="vb_login_md5password" />
                <input type="hidden" name="vb_login_md5password_utf" />
            </form>
            <script type="text/javascript">
            YAHOO.util.Dom.setStyle('navbar_password_hint', "display", "inline");
            YAHOO.util.Dom.setStyle('navbar_password', "display", "none");
            vB_XHTML_Ready.subscribe(function()
            {
            //
                YAHOO.util.Event.on('navbar_username', "focus", navbar_username_focus);
                YAHOO.util.Event.on('navbar_username', "blur", navbar_username_blur);
                YAHOO.util.Event.on('navbar_password_hint', "focus", navbar_password_hint);
                YAHOO.util.Event.on('navbar_password', "blur", navbar_password);
            });
            
            function navbar_username_focus(e)
            {
            //
                var textbox = YAHOO.util.Event.getTarget(e);
                if (textbox.value == '<vb:if condition="$username">{vb:raw username}<vb:else />{vb:rawphrase username}</vb:if>')
                {
                //
                    textbox.value='';
                    textbox.style.color='{vb:stylevar input_color}';
                }
            }

            function navbar_username_blur(e)
            {
            //
                var textbox = YAHOO.util.Event.getTarget(e);
                if (textbox.value == '')
                {
                //
                    textbox.value='<vb:if condition="$username">{vb:raw username}<vb:else />{vb:rawphrase username}</vb:if>';
                    textbox.style.color='{vb:stylevar shade_color}';
                }
            }
            
            function navbar_password_hint(e)
            {
            //
                var textbox = YAHOO.util.Event.getTarget(e);
                
                YAHOO.util.Dom.setStyle('navbar_password_hint', "display", "none");
                YAHOO.util.Dom.setStyle('navbar_password', "display", "inline");
                YAHOO.util.Dom.get('navbar_password').focus();
            }

            function navbar_password(e)
            {
            //
                var textbox = YAHOO.util.Event.getTarget(e);
                
                if (textbox.value == '')
                {
                    YAHOO.util.Dom.setStyle('navbar_password_hint', "display", "inline");
                    YAHOO.util.Dom.setStyle('navbar_password', "display", "none");
                }
            }
            </script>
                </li>
                <vb:if condition="$vboptions['enablefacebookconnect']">
                    {vb:raw facebook_header}
                </vb:if>
            </ul>
        </vb:if>
    </div>
    <div class="ad_global_header">
        {vb:raw ad_location.global_header1}
        {vb:raw ad_location.global_header2}
    </div>
    <hr />
</div>
User Contributed Notes: How do Templates Work? Add a Comment