Alternating rows without relying on PHP

[Michael Morris]

Here's a way to alter row colors using vbulletin's template engine without using any outside functions.

At the beginning of your rowbit template place the following code.

<if condition="$bg++"><!-- Row: $bg --></if>

Now for each row that you need to have alternate colors place the following code where the class name would go.

<if condition="$bg%2 == 0">alt2<else />alt1</if>

Below is a complete example using one of the forumbit templates.

<if condition="$bg++"><!-- Row: $bg --></if>
<tr align="center">
<td class="<if condition="$bg%2 == 0">alt2<else />alt1</if>"><img src="$stylevar[imgdir_statusicon]/forum_$forum[statusicon].png" alt="" border="0" id="forum_statusicon_$forum[forumid]" /></td>
<td class="<if condition="$bg%2 == 0">alt2<else />alt1</if>" align="$stylevar[left]" id="f$forum[forumid]">
<div>
<a href="forumdisplay.php?$session[sessionurl]f=$forum[forumid]"><strong>$forum[title]</strong></a>
<if condition="$show['browsers']"><span class="smallfont">(<phrase 1="$forum[browsers]">$vbphrase[x_viewing]</phrase>)</span></if>
</div>
<if condition="$show['forumdescription']"><div class="smallfont">$forum[description]</div></if>
<if condition="$show['forumsubscription']"><div class="smallfont"><strong><a href="subscription.php?$session[sessionurl]do=removesubscription&amp;f=$forum[forumid]" rel="nofollow">$vbphrase[unsubscribe_from_this_forum]</a></strong></div></if>
<if condition="$show['subforums']"><div class="smallfont" style="margin-top:$stylevar[cellpadding]px"><strong>$vbphrase[subforums]</strong>: $forum[subforums]</div></if>
</td>
<td class="<if condition="$bg%2 == 0">alt2<else />alt1</if>" nowrap="nowrap">$forum[lastpostinfo]</td>
<td class="<if condition="$bg%2 == 0">alt2<else />alt1</if>">$forum[threadcount]</td>
<td class="<if condition="$bg%2 == 0">alt2<else />alt1</if>">$forum[replycount]</td>
<if condition="$vboptions['showmoderatorcolumn']">
<td class="<if condition="$bg%2 == 0">alt2<else />alt1</if>"><div class="smallfont">$forum[moderators]&nbsp;</div></td>
</if>
</tr>
$childforumbits

[Audentio]

Now THAT is nice. Great work, I can definitely use this in some of my designs.

[TheMilkCarton]

Wow. Thanks.. So much easier than what I had planned... :)

Works very well with modules from vBadvanced, too. I modified the news.php file to be a comments system, and now it looks really nice!

Thanks!

[Michael Morris]

Thanks.

[Mazinger]

Great! Thanks!

[akanevsky]

Why would you not want to rely on the built-in switcher?

[stanleys]

You can also do it via Javascript if you have a framework like jQuery or Prototype installed:

$("tr: odd").addCLass('altRow');

(remove the space between the : and the o)