Sofia
06-22-2009, 10:00 PM
Kier (http://www.vbulletin.com/forum/member.php?u=1034)
"The forum home page was the first complete page I built, and looking back at it now there are some bits of it that look a little out-of-place next to some of the more recent design elements I've built. Right now, it's using the same iconography as vBulletin 3, though I have produced new, larger versions of the images with alpha transparency from my original masters so they work a lot better on variable backgrounds.
As you can see, the forumbits have moved on from their column-based layout that was used in vB1, vB2 and vB3. The new design is less rigid and allows whitespace to imply connections between data items rather than enforcing encapsulation with heavy borders or backgrounds.
Forum titles and icons are made much larger and more prominent, as these are the primary points of reference for the forums. Information such as the number of contained threads and posts is demoted to a floating line of de-emphasized data to the right of the title while last post information gets a line all to itself in order to allow thread titles to be shown without the excessive wrapping that would invariably come from the small container available in vB3. "
This is not the original code of vBulletin 4
With category spacing
http://www.forum-test.fr/category/1.png
Without category spacing
http://www.forum-test.fr/category/2.png
Before templates modifications - Note
If you have a customized style, please save the original code of your templates before doing these modifications.
This mod is adapted to default style, so you may have problems or the code to be found can differ if you have a customized style.
Only Without category spacing
In the template "forumhome"
Find:
<!-- main -->
<table class="tborder" cellpadding="$stylevar[cellpadding]" cellspacing="$stylevar[cellspacing]" border="0" width="100%" align="center">
<thead>
<tr align="center">
<td class="thead"> </td>
<td class="thead" width="100%" align="$stylevar">$vbphrase[forum]</td>
<td class="thead">$vbphrase[last_post]</td>
<td class="thead">$vbphrase[threads]</td>
<td class="thead">$vbphrase[posts]</td>
<if condition="$vboptions['showmoderatorcolumn']">
<td class="thead">$vbphrase[moderator]</td>
</if>
</tr>
</thead>
$forumbits
<tbody>
Replace by:
<table class="tborder" cellpadding="$stylevar[cellpadding]" cellspacing="$stylevar[cellspacing]" border="0" width="100%" align="center">
$forumbits
<tbody>Only if you want category spacing
In the template "forumhome"
[LEFT]
Find:
<!-- main -->
<table class="tborder" cellpadding="$stylevar[cellpadding]" cellspacing="$stylevar[cellspacing]" border="0" width="100%" align="center">
<thead>
<tr align="center">
<td class="thead"> </td>
<td class="thead" width="100%" align="$stylevar">$vbphrase[forum]</td>
<td class="thead">$vbphrase[last_post]</td>
<td class="thead">$vbphrase[threads]</td>
<td class="thead">$vbphrase[posts]</td>
<if condition="$vboptions['showmoderatorcolumn']">
<td class="thead">$vbphrase[moderator]</td>
</if>
</tr>
</thead>
$forumbits
<tbody>
<tr>
<td class="tfoot" align="center" colspan="<if condition="$vboptions['showmoderatorcolumn']">6<else />5</if>"><div class="smallfont"><strong>
<a href="forumdisplay.php?$session[sessionurl]do=markread" rel="nofollow">$vbphrase[mark_forums_read]</a>
<if condition="$vboptions['forumleaders']">
<a href="showgroups.php$session[sessionurl_q]">$vbphrase[view_forum_leaders]</a></if>
</strong></div></td>
</tr>
</tbody>
</table>
$forumhome_markread_script
<!-- /main -->
Replace by:
<!-- main -->
<table class="tborder" cellpadding="$stylevar[cellpadding]" cellspacing="$stylevar[cellspacing]" border="0" width="100%" align="center">
$forumbits
<tbody>
</table>
<table class="tborder" cellpadding="$stylevar[cellpadding]" cellspacing="$stylevar[cellspacing]" border="0" width="100%" align="center">
<tr>
<td class="tfoot" align="center" colspan="<if condition="$vboptions['showmoderatorcolumn']">6<else />5</if>"><div class="smallfont"><strong>
<a href="forumdisplay.php?$session[sessionurl]do=markread" rel="nofollow">$vbphrase[mark_forums_read]</a>
<if condition="$vboptions['forumleaders']">
<a href="showgroups.php$session[sessionurl_q]">$vbphrase[view_forum_leaders]</a></if>
</strong></div></td>
</tr>
</tbody>
</table>
$forumhome_markread_script
<!-- /main -->In the template "forumdisplay"
[LEFT]Find:
<table class="tborder" cellpadding="$stylevar[cellpadding]" cellspacing="$stylevar[cellspacing]" border="0" width="100%" align="center">
<thead>
<tr align="center">
<td class="thead"> </td>
<td class="thead" width="100%" align="$stylevar">$vbphrase[forum]</td>
<td class="thead">$vbphrase[last_post]</td>
<td class="thead">$vbphrase[threads]</td>
<td class="thead">$vbphrase[posts]</td>
<if condition="$vboptions[showmoderatorcolumn]">
<td class="thead">$vbphrase[moderator]</td>
</if>
</tr>
</thead>
$forumbits
</table>
Replace by:
<table class="tborder" cellpadding="$stylevar[cellpadding]" cellspacing="$stylevar[cellspacing]" border="0" width="100%" align="center">
$forumbits
</table> In the template forumhome_forumbit_level2_post,
[LEFT]Replace all your code by:
<tr align="center">
<td class="alt1Active" width="100%">
<span style="float: right;">Threads: $forum[threadcount] Posts: $forum[replycount] <br /><if condition="$vboptions['showmoderatorcolumn']">Moderators: $forum[moderators]</if></span>
<div style="float: left;"></div>
<span style="float: left;"><img src="$stylevar[imgdir_statusicon]/$forum[imageprefix]forum_$forum[statusicon].gif" alt="" border="0" id="forum_statusicon_$forum[forumid]" /> </span>
<div style="float:left;">
<div align="left">
<a href="forumdisplay.php?$session[sessionurl]f=$forum[forumid]"><strong>$forum[title]</strong></a></div>
<if condition="$show['browsers']"><span class="smallfont">(<phrase 1="$forum">$vbphrase[x_viewing]</phrase>)</span></if>
<if condition="$show['forumdescription']"><div class="smallfont">
<div align="left">$forum[description]</div></div></if>
<if condition="$show['forumsubscription']"><div class="smallfont" style="margin-top: 6px;">
<div align="left"><strong><a href="subscription.php?$session[sessionurl]do=removesubscription&f=$forum[forumid]" rel="nofollow">$vbphrase</a></strong></div></div></if>
<if condition="$show['subforums']"><div class="smallfont" style="margin-top:$stylevar[cellpadding]px"><div align="left"><strong>$vbphrase[subforums]</strong>: $forum[subforums]</div></div></if>
</div>
</td>
</tr>
<tr><td class="alt2"><div align="right">$forum[lastpostinfo]</div></td></tr>
$childforumbitsIn the template forumhome_forumbit_level1_post,
[B]
Replace all your code by:
<if condition="!$show['collapsable_forums']">
<tbody>
</if>
<tr align="center">
<td class="alt1Active" width="100%">
<span style="float: right;">Threads: $forum[threadcount] Posts: $forum[replycount]
</span>
<div style="float: left;"></div>
<span style="float: left;"><img src="$stylevar[imgdir_statusicon]/$forum[imageprefix]forum_$forum[statusicon].gif" alt="" border="0" id="forum_statusicon_$forum[forumid]" /> </span>
<div align="left" id="f$forum[forumid]">
<a href="forumdisplay.php?$session[sessionurl]f=$forum[forumid]"><strong>$forum[title]</strong></a></div>
<if condition="$show['browsers']"><span class="smallfont">(<phrase 1="$forum">$vbphrase[x_viewing]</phrase>)</span></if>
</div>
<if condition="$show['forumdescription']"><div class="smallfont">
<div align="left">$forum[description]</div></div></if>
<if condition="$show['forumsubscription']"><div class="smallfont"><div align="left">
<strong><a href="subscription.php?$session[sessionurl]do=removesubscription&f=$forum[forumid]" rel="nofollow">$vbphrase</a></strong></div></div></if>
<if condition="$show['subforums']"><div class="smallfont" style="margin-top:$stylevar[cellpadding]px"> <div align="left"><strong>$vbphrase[subforums]</strong>: $forum[subforums]</div></div></if>
</tr>
<tr>
<td class="alt2" colspan="2"><div align="right">$forum[lastpostinfo]</div></td></tr>
<if condition="!$show['collapsable_forums']">
</tbody>
</if>
<if condition="$childforumbits">
<if condition="!$show['collapsable_forums']">
<tbody>
</if>
$childforumbits
<if condition="!$show['collapsable_forums']">
</tbody>
</if>
</if>[U][B]In your template forumhome_lastpostby,
[U]Replace all your code by:
<if condition="$show['lastpostinfo']">
<div class="smallfont" style="float:right;">
<div style="float:left;">
<span style="white-space:nowrap"><strong>Last post:</strong>
<if condition="$show['icon']"><img class="inlineimg" src="$icon[iconpath]" alt="$icon[title]" border="0" /></if>
<if condition="$lastpostinfo['prefix']">
$lastpostinfo[prefix]
</span><if condition="is_browser('safari')"><!--bug#24775--> </if>
<span style="white-space:nowrap">
</if>
<a href="showthread.php?$session[sessionurl]goto=newpost&t=$lastpostinfo[lastthreadid]" style="white-space:nowrap" title="<phrase 1="$lastpostinfo[lastthread]">$vbphrase[go_first_unread_in_thread_x]</phrase>"><strong>$lastpostinfo[trimthread]</strong></a></span>
</div>
<div style="float:left;"<if condition="is_browser('ie', 6)">; float:$stylevar[left]</if>">
<phrase 1="member.php?$session[sessionurl]find=lastposter&f=$lastpostinfo[forumid]" 2="$lastpostinfo[lastposter]">$vbphrase</phrase>
</div>
<div style="float:left;">
$lastpostinfo[lastpostdate] <if condition="!$show['detailedtime']"><span class="time">$lastpostinfo[lastposttime]</span></if>
</div>
</div>
<else />
<div class="smallfont" style="float:right;">
$lastpostinfo[lastpostdate] <if condition="!$show['detailedtime']"><span class="time">$lastpostinfo[lastposttime]</span></if>
</div>
</if>[B]Only if you want category spacing
In your template forumhome_forumbit_level1_nopost,
Replace all your code by:
<if condition="!$show['collapsable_forums']">
<table class="tborder" cellpadding="$stylevar[cellpadding]" cellspacing="$stylevar[cellspacing]" border="0" width="100%" align="center">
<tbody>
</if>
<tr>
<td class="tcat" colspan="<if condition="$vboptions[showmoderatorcolumn]">2<else />1</if>">
<if condition="$childforumbits">
<a style="float:$stylevar[right]" href="#top" onclick="return toggle_collapse('forumbit_$forumid')"><img id="collapseimg_forumbit_$forumid" src="$stylevar[imgdir_button]/collapse_tcat{$collapseimg_forumid}.gif" alt="" border="0" /></a>
</if>
<a href="forumdisplay.php?$session[sessionurl]f=$forum[forumid]">$forum[title]</a>
<if condition="$show['forumdescription']"><div class="smallfont">$forum[description]</div></if>
<if condition="$show['subforums']"><div class="smallfont"><strong>$vbphrase[subforums]</strong>: $forum[subforums]</div></if>
</td>
</tr>
<if condition="!$show['collapsable_forums']">
</tbody>
</if>
<if condition="$childforumbits">
<if condition="!$show['collapsable_forums']">
<tbody id="collapseobj_forumbit_$forumid" style="{$collapseobj_forumid}">
</if>
$childforumbits
<if condition="!$show['collapsable_forums']">
</tbody>
</if>
</if></table>
<div style="padding: 0 0 15px 0;"></div>
"The forum home page was the first complete page I built, and looking back at it now there are some bits of it that look a little out-of-place next to some of the more recent design elements I've built. Right now, it's using the same iconography as vBulletin 3, though I have produced new, larger versions of the images with alpha transparency from my original masters so they work a lot better on variable backgrounds.
As you can see, the forumbits have moved on from their column-based layout that was used in vB1, vB2 and vB3. The new design is less rigid and allows whitespace to imply connections between data items rather than enforcing encapsulation with heavy borders or backgrounds.
Forum titles and icons are made much larger and more prominent, as these are the primary points of reference for the forums. Information such as the number of contained threads and posts is demoted to a floating line of de-emphasized data to the right of the title while last post information gets a line all to itself in order to allow thread titles to be shown without the excessive wrapping that would invariably come from the small container available in vB3. "
This is not the original code of vBulletin 4
With category spacing
http://www.forum-test.fr/category/1.png
Without category spacing
http://www.forum-test.fr/category/2.png
Before templates modifications - Note
If you have a customized style, please save the original code of your templates before doing these modifications.
This mod is adapted to default style, so you may have problems or the code to be found can differ if you have a customized style.
Only Without category spacing
In the template "forumhome"
Find:
<!-- main -->
<table class="tborder" cellpadding="$stylevar[cellpadding]" cellspacing="$stylevar[cellspacing]" border="0" width="100%" align="center">
<thead>
<tr align="center">
<td class="thead"> </td>
<td class="thead" width="100%" align="$stylevar">$vbphrase[forum]</td>
<td class="thead">$vbphrase[last_post]</td>
<td class="thead">$vbphrase[threads]</td>
<td class="thead">$vbphrase[posts]</td>
<if condition="$vboptions['showmoderatorcolumn']">
<td class="thead">$vbphrase[moderator]</td>
</if>
</tr>
</thead>
$forumbits
<tbody>
Replace by:
<table class="tborder" cellpadding="$stylevar[cellpadding]" cellspacing="$stylevar[cellspacing]" border="0" width="100%" align="center">
$forumbits
<tbody>Only if you want category spacing
In the template "forumhome"
[LEFT]
Find:
<!-- main -->
<table class="tborder" cellpadding="$stylevar[cellpadding]" cellspacing="$stylevar[cellspacing]" border="0" width="100%" align="center">
<thead>
<tr align="center">
<td class="thead"> </td>
<td class="thead" width="100%" align="$stylevar">$vbphrase[forum]</td>
<td class="thead">$vbphrase[last_post]</td>
<td class="thead">$vbphrase[threads]</td>
<td class="thead">$vbphrase[posts]</td>
<if condition="$vboptions['showmoderatorcolumn']">
<td class="thead">$vbphrase[moderator]</td>
</if>
</tr>
</thead>
$forumbits
<tbody>
<tr>
<td class="tfoot" align="center" colspan="<if condition="$vboptions['showmoderatorcolumn']">6<else />5</if>"><div class="smallfont"><strong>
<a href="forumdisplay.php?$session[sessionurl]do=markread" rel="nofollow">$vbphrase[mark_forums_read]</a>
<if condition="$vboptions['forumleaders']">
<a href="showgroups.php$session[sessionurl_q]">$vbphrase[view_forum_leaders]</a></if>
</strong></div></td>
</tr>
</tbody>
</table>
$forumhome_markread_script
<!-- /main -->
Replace by:
<!-- main -->
<table class="tborder" cellpadding="$stylevar[cellpadding]" cellspacing="$stylevar[cellspacing]" border="0" width="100%" align="center">
$forumbits
<tbody>
</table>
<table class="tborder" cellpadding="$stylevar[cellpadding]" cellspacing="$stylevar[cellspacing]" border="0" width="100%" align="center">
<tr>
<td class="tfoot" align="center" colspan="<if condition="$vboptions['showmoderatorcolumn']">6<else />5</if>"><div class="smallfont"><strong>
<a href="forumdisplay.php?$session[sessionurl]do=markread" rel="nofollow">$vbphrase[mark_forums_read]</a>
<if condition="$vboptions['forumleaders']">
<a href="showgroups.php$session[sessionurl_q]">$vbphrase[view_forum_leaders]</a></if>
</strong></div></td>
</tr>
</tbody>
</table>
$forumhome_markread_script
<!-- /main -->In the template "forumdisplay"
[LEFT]Find:
<table class="tborder" cellpadding="$stylevar[cellpadding]" cellspacing="$stylevar[cellspacing]" border="0" width="100%" align="center">
<thead>
<tr align="center">
<td class="thead"> </td>
<td class="thead" width="100%" align="$stylevar">$vbphrase[forum]</td>
<td class="thead">$vbphrase[last_post]</td>
<td class="thead">$vbphrase[threads]</td>
<td class="thead">$vbphrase[posts]</td>
<if condition="$vboptions[showmoderatorcolumn]">
<td class="thead">$vbphrase[moderator]</td>
</if>
</tr>
</thead>
$forumbits
</table>
Replace by:
<table class="tborder" cellpadding="$stylevar[cellpadding]" cellspacing="$stylevar[cellspacing]" border="0" width="100%" align="center">
$forumbits
</table> In the template forumhome_forumbit_level2_post,
[LEFT]Replace all your code by:
<tr align="center">
<td class="alt1Active" width="100%">
<span style="float: right;">Threads: $forum[threadcount] Posts: $forum[replycount] <br /><if condition="$vboptions['showmoderatorcolumn']">Moderators: $forum[moderators]</if></span>
<div style="float: left;"></div>
<span style="float: left;"><img src="$stylevar[imgdir_statusicon]/$forum[imageprefix]forum_$forum[statusicon].gif" alt="" border="0" id="forum_statusicon_$forum[forumid]" /> </span>
<div style="float:left;">
<div align="left">
<a href="forumdisplay.php?$session[sessionurl]f=$forum[forumid]"><strong>$forum[title]</strong></a></div>
<if condition="$show['browsers']"><span class="smallfont">(<phrase 1="$forum">$vbphrase[x_viewing]</phrase>)</span></if>
<if condition="$show['forumdescription']"><div class="smallfont">
<div align="left">$forum[description]</div></div></if>
<if condition="$show['forumsubscription']"><div class="smallfont" style="margin-top: 6px;">
<div align="left"><strong><a href="subscription.php?$session[sessionurl]do=removesubscription&f=$forum[forumid]" rel="nofollow">$vbphrase</a></strong></div></div></if>
<if condition="$show['subforums']"><div class="smallfont" style="margin-top:$stylevar[cellpadding]px"><div align="left"><strong>$vbphrase[subforums]</strong>: $forum[subforums]</div></div></if>
</div>
</td>
</tr>
<tr><td class="alt2"><div align="right">$forum[lastpostinfo]</div></td></tr>
$childforumbitsIn the template forumhome_forumbit_level1_post,
[B]
Replace all your code by:
<if condition="!$show['collapsable_forums']">
<tbody>
</if>
<tr align="center">
<td class="alt1Active" width="100%">
<span style="float: right;">Threads: $forum[threadcount] Posts: $forum[replycount]
</span>
<div style="float: left;"></div>
<span style="float: left;"><img src="$stylevar[imgdir_statusicon]/$forum[imageprefix]forum_$forum[statusicon].gif" alt="" border="0" id="forum_statusicon_$forum[forumid]" /> </span>
<div align="left" id="f$forum[forumid]">
<a href="forumdisplay.php?$session[sessionurl]f=$forum[forumid]"><strong>$forum[title]</strong></a></div>
<if condition="$show['browsers']"><span class="smallfont">(<phrase 1="$forum">$vbphrase[x_viewing]</phrase>)</span></if>
</div>
<if condition="$show['forumdescription']"><div class="smallfont">
<div align="left">$forum[description]</div></div></if>
<if condition="$show['forumsubscription']"><div class="smallfont"><div align="left">
<strong><a href="subscription.php?$session[sessionurl]do=removesubscription&f=$forum[forumid]" rel="nofollow">$vbphrase</a></strong></div></div></if>
<if condition="$show['subforums']"><div class="smallfont" style="margin-top:$stylevar[cellpadding]px"> <div align="left"><strong>$vbphrase[subforums]</strong>: $forum[subforums]</div></div></if>
</tr>
<tr>
<td class="alt2" colspan="2"><div align="right">$forum[lastpostinfo]</div></td></tr>
<if condition="!$show['collapsable_forums']">
</tbody>
</if>
<if condition="$childforumbits">
<if condition="!$show['collapsable_forums']">
<tbody>
</if>
$childforumbits
<if condition="!$show['collapsable_forums']">
</tbody>
</if>
</if>[U][B]In your template forumhome_lastpostby,
[U]Replace all your code by:
<if condition="$show['lastpostinfo']">
<div class="smallfont" style="float:right;">
<div style="float:left;">
<span style="white-space:nowrap"><strong>Last post:</strong>
<if condition="$show['icon']"><img class="inlineimg" src="$icon[iconpath]" alt="$icon[title]" border="0" /></if>
<if condition="$lastpostinfo['prefix']">
$lastpostinfo[prefix]
</span><if condition="is_browser('safari')"><!--bug#24775--> </if>
<span style="white-space:nowrap">
</if>
<a href="showthread.php?$session[sessionurl]goto=newpost&t=$lastpostinfo[lastthreadid]" style="white-space:nowrap" title="<phrase 1="$lastpostinfo[lastthread]">$vbphrase[go_first_unread_in_thread_x]</phrase>"><strong>$lastpostinfo[trimthread]</strong></a></span>
</div>
<div style="float:left;"<if condition="is_browser('ie', 6)">; float:$stylevar[left]</if>">
<phrase 1="member.php?$session[sessionurl]find=lastposter&f=$lastpostinfo[forumid]" 2="$lastpostinfo[lastposter]">$vbphrase</phrase>
</div>
<div style="float:left;">
$lastpostinfo[lastpostdate] <if condition="!$show['detailedtime']"><span class="time">$lastpostinfo[lastposttime]</span></if>
</div>
</div>
<else />
<div class="smallfont" style="float:right;">
$lastpostinfo[lastpostdate] <if condition="!$show['detailedtime']"><span class="time">$lastpostinfo[lastposttime]</span></if>
</div>
</if>[B]Only if you want category spacing
In your template forumhome_forumbit_level1_nopost,
Replace all your code by:
<if condition="!$show['collapsable_forums']">
<table class="tborder" cellpadding="$stylevar[cellpadding]" cellspacing="$stylevar[cellspacing]" border="0" width="100%" align="center">
<tbody>
</if>
<tr>
<td class="tcat" colspan="<if condition="$vboptions[showmoderatorcolumn]">2<else />1</if>">
<if condition="$childforumbits">
<a style="float:$stylevar[right]" href="#top" onclick="return toggle_collapse('forumbit_$forumid')"><img id="collapseimg_forumbit_$forumid" src="$stylevar[imgdir_button]/collapse_tcat{$collapseimg_forumid}.gif" alt="" border="0" /></a>
</if>
<a href="forumdisplay.php?$session[sessionurl]f=$forum[forumid]">$forum[title]</a>
<if condition="$show['forumdescription']"><div class="smallfont">$forum[description]</div></if>
<if condition="$show['subforums']"><div class="smallfont"><strong>$vbphrase[subforums]</strong>: $forum[subforums]</div></if>
</td>
</tr>
<if condition="!$show['collapsable_forums']">
</tbody>
</if>
<if condition="$childforumbits">
<if condition="!$show['collapsable_forums']">
<tbody id="collapseobj_forumbit_$forumid" style="{$collapseobj_forumid}">
</if>
$childforumbits
<if condition="!$show['collapsable_forums']">
</tbody>
</if>
</if></table>
<div style="padding: 0 0 15px 0;"></div>