Okay, I'll go first. Let's start with the header.

The current default template looks like this:<!-- logo -->
<a name="top"></a>
<table border="0" width="$stylevar[outertablewidth]" cellpadding="0" cellspacing="0" align="center">
<tr>
<td align="$stylevar[left]"><a href="$vboptions[forumhome].php$session[sessionurl_q]"><img src="$stylevar[titleimage]" border="0" alt="$vboptions[bbtitle]" /></a></td>
<td align="$stylevar[right]">
&nbsp;
</td>
</tr>
</table>
<!-- /logo -->

<!-- content table -->
$spacer_open

$_phpinclude_output
This is a table that contains 1 row, that contains 2 cells. The left-hand cell contains a logo image (which also acts a link back to the home page), the right-hand cell contains a space. let's see if we can do better.
<!-- Header -->
<a name="top"></a>
<div id="header">
<a href="$vboptions[forumhome].php$session[sessionurl_q]">
<h1 id="headerTitle">$vboptions[bbtitle]</h1>
</a>
</div>
<!-- /Header -->

<!-- content table -->
$spacer_open

$_phpinclude_outputNow all we have to do is build two style rules: #header and #headerTitle

This also helps with SEO--since search engines weight the h1 when calculating relevance--and we didn't have one before.

You may ask "but where do I put my logo?" Because the logo is stylistic--not content--it should be a background image for one of the two elements, and specified in the CSS.

I believe that $spacer_open will eventually need to go away, I have left it in so that this template will work before the full conversion is complete.

That looks great, and nice approach on handling the logo and still benefit from SEO. I think spacer_open could be removed, but I believe there are some valid reasons on using it. It has <divs> all over it though, so thankfully not everything is thrown into tables.

Because the logo is stylistic--not content--it should be a background image for one of the two elements, and specified in the CSS.


I'm not sure if I agree with that completely. The problem I see with this theory is when an admin wants to replace the default logo with their own. Currently, vBulletin offers a field to change the path to the new graphic. . . While I'm very new to the templeting system, it seems that setting that variable in a style sheet might prove more difficult, particularly if it's an external style sheet. The other issue that could arise is if the replacement graphic were larger than the default. To use the graphic as a background of an element, you need to specify the height and width of said element in your CSS to match that of your graphic. If someone were to use a graphic that were larger than the default, some of it would be cut off due to those values--that is, without editing the CSS, which for many users might be a pain.

Just some thoughts... :)

I'm not sure if I agree with that completely... . Just some thoughtsAnd they are good thoughts!

To fully implement a table-less vB is not merely a matter of rewriting all the templates--tables are so ingrained into vB's paradigm that the effects spread into the ACP and elsewhere.

For instance, it is relatively easy to create a tableless postbit, but doing so means that the inline modification breaks. Why, because thye AJAX scripting does not just look for elements with a certain ID, it looks for table rows with a certain ID--no table rows, no AJAX! <sigh>

Implementing the logo as a background image to the h1 (the standards-compliant way to do it) is easy to code in the templates, but it needs changes in the ACP to make it easy-to-use.

By making a custom template for each style, and placing that template name into the code, you could probably make it as tad easier to implement.