Alternating Row Color for Forums / Search Results / Thread Listings

[nevetS]

What this plugin/modification does:
In the default vBulletin implementation, the colors alternate from left to right - from table cell to table cell. This plugin/modification changes it so that each row changes colors instead.

For a visual, we're talking about changing this:
---------------------------
| red | blue | red | blue |
---------------------------
| red | blue | red | blue |
---------------------------
| red | blue | red | blue |
---------------------------
To this:
-----------------------------
| red | red | red | red |
-----------------------------
| blue | blue | blue | blue |
-----------------------------
| red | red | red | red |
-----------------------------


Currently, this plugin enables changing row colors in
Forum Listing in the Forum Home page (screenie attached)
Sub Forum Listing (screenie attached)
Thread Listing (screenie attached)
Search Results Page (screenie attached)
PM Listing
Member Listings
How it works:
The way the colors are currently assigned is via CSS classes. The template changes remove the class definitions from the table cells, and add class definitions to the displayed rows. The CSS Classes used are the "Alt1" and "Alt2" classes - defined in the Admin Control Panel under Style Manager, (style), Main CSS, "First Alternating Color" and "Second Alternating Color".

The Product is named "Alternating Row Color for ForumBits".
Attached to the product are Four plugins:
Alternating Row Color for ForumBits Function - this defines a brief function enabled at the "global_start" hook location.


Code:
---------------
Code is only visible to licensed users, and only when logged into the forums.
---------------


This function is called from other plugins to define whether or not they should be presented with the "alt1" CSS Class, or the "alt2" CSS Class.
The other three plugins -Alternating Threadbit background, Alternating Row Color for ForumBits, Alternating Row Color Search Threadbit - are copy/paste functionality enabled in three separate locations:


Code:
---------------
Code is only visible to licensed users, and only when logged into the forums.
---------------


Basically, as vbulletin iterates through creating the rows to display, it calls the function to find out which CSS class to use.
Making minor changes:
If you would rather the colors be switched, simply swap 'alt1' and 'alt2' in the "Alternating Row Color for ForumBits Function" plugin.

What's Involved?
1 Product Installation
4 Plugins (installed all at once, via the product)
47 Changes to 5 Templates

Credit To
VBSeo.com for giving me the idea.

Updates
9/6/2006
got rid of funky quotes in updated_memberlist_reslutsbit.tmpl.php

9/5/2006
Version .3
Updated Mod Description, Install Instructions, downloadable files
Added functionality for Memberlist Alternating Colors
Added functionality for PM Listing Alternating Row Colors
Added new templates - pm_messagelistbit and memberlist_resultsbit

9/3/2006
Updated Mod Description
Installation Instructions
Added additional Screenshots
Uploaded pre-modified out-of-the-box templates
Re-uploaded zip file with appropriate paths
Mod Title Update

9/2/2006
Version .2 - Added plugin to alternate row colors in search results, which also implies the ability to alternate row colors in thread listings.

Installation:
Downloads are on the right. The zip file contains the xml plugin file as well as pre-modified template updates. Only use the premodified templates if the following statements are all true:
1) You are running vBulletin 3.6.0
2) You have not modified the templates to be updated.

There are now 5 templates I have identified that need updating. These templates are:
threadbit
forumhome_forumbit_level1_post
forumhome_forumbit_level2_post
memberlist_resultsbit
pm_messagelistbit
Step 1) Go into your AdminCP, Click Add/Import Product, Upload the product-alternating-forum-rows.xml file.

For the remaining steps, I'm going to go through three iterations of instructions: "The Really Easy Way", "The Easy Way", and "The Hard Way"
Just Pick ONE set of instructions to follow!
Instructions for "The Really Easy Way":
If you didn't follow the instructions above, upload the product-alternating-forum-rows.xml file into your Product Manager
Replace your unmodified threadbit template with updated_threadbit.tmpl.php
Replace your unmodified 3.6.0 forumhome_forumbit_level1_post template with updated_forumhome_forumbit_level1_post.tmpl.php
Replace your unmodified 3.6.0 forumhome_forumbit_level2_post template with updated_forumhome_forumbit_level2_post.tmpl.php
Replace your unmodified 3.6.0 memberlist_resultsbit template with updated_ memberlist_resultsbit.tmpl.php
Replace your unmodified 3.6.0 pm_messagelistbit template with updated_ pm_messagelistbit.tmpl.phpAt this point, you are done. No need to read further or execute anymore steps. Take a look at your forum, if it doesn't look right come back and ask for help.
============================


Installation Instructions for "The Easy Way"
If you didn't follow the instructions above, upload the product-alternating-forum-rows.xml file into your Product Manager

threadbit template updates
1) On the very first line, change

Code:
---------------
Code is only visible to licensed users, and only when logged into the forums.
---------------

to

Code:
---------------
Code is only visible to licensed users, and only when logged into the forums.
---------------

2) search and remove:
2) Find all ' class="alt1"' and remove
3) Find all ' class="alt2"' and remove

forumhome_forumbit_level1_post updates
1) On the second line, change

Code:
---------------
Code is only visible to licensed users, and only when logged into the forums.
---------------

to

Code:
---------------
Code is only visible to licensed users, and only when logged into the forums.
---------------

2) search and remove:
2) Find all ' class="alt1"' and remove
3) Find all ' class="alt2"' and remove
4) Find all ' class="alt1Active"' and remove

forumhome_forumbit_level2_post
1) On the very first line, change

Code:
---------------
Code is only visible to licensed users, and only when logged into the forums.
---------------

to

Code:
---------------
Code is only visible to licensed users, and only when logged into the forums.
---------------

2) search and remove:
2) Find all ' class="alt1"' and remove
3) Find all ' class="alt2"' and remove
4) Find all ' class="alt1Active"' and remove


pm_messagelistbit
1) On the very first line, change

Code:
---------------
Code is only visible to licensed users, and only when logged into the forums.
---------------

to

Code:
---------------
Code is only visible to licensed users, and only when logged into the forums.
---------------


2) search and remove:
2) Find all ' class="alt1"' and remove
3) Find all ' class="alt2"' and remove
4) Find all ' class="alt1Active"' and remove

memberlist_resultsbit
1) change

Code:
---------------
Code is only visible to licensed users, and only when logged into the forums.
---------------

to

Code:
---------------
Code is only visible to licensed users, and only when logged into the forums.
---------------


2) search and remove:
2) Find all ' AND exec_switch_bg()"' and remove
3) Find all ' class="$bgclass"' and remove
4) Find all ' class="alt1Active"' and remove
5) Find all ' class="alt2"' and remove

At this point, you are done. No need to read further or execute anymore steps. Take a look at your forum, if it doesn't look right come back and ask for help.
============================


Installation Instructions for "The Hard Way"
(see the attached zip file. It was making this thread too difficult to read)

[nevetS]

Per CheerTobi's request, I added the functionality to alternate row colors for search results. This update actually implies alternating row colors in thread listings as well. (I had an alternate solution in place for thread listings, but making the switch was a simple edit on my board.)

If there are other places that you need alternating row colors, post here. The functionality will probably be a copy/paste once I find the right spot to stick a plug-in.

==========
I updated the modification description and installation instructions extensively. For some reason, the only highlight color that works is green, which is just wierd to me.

I also added some screenies for examples of the results.

Now there is a zip file that contains pre-modified templates, the product xml file, and the instructions in pdf. There's no upgrade - just making things more complete.

[Cheertobi]

Does this also work with search results?

[nevetS]

I didn't even think about search results. I'm off to Disneyland for the day pretty soon here, so I'll take a gander tonight and see if I can't figure out what template changes need to happen there as well.

Done! Any more problems, let me know! You should just be able to over-write the existing product with the new XML file.

[Smoothie]

um, where's the plugin file located?

[Ascor]

Just installed to defaut theme and work fine, thank you, the theme is nicer with this :)
But when i usin in a theme who have this hack installed
http://www.vbulletin.org/forum/showthread.php?p=1067490#post1067490
i have a probleme whith the row who display the forum name :/ any idea please ?

here are the mod make with the other hack

Installation Instructions

Step 1: Upload the Plugin via the Product Manager!

Step 2: Edit the forumhome_forumbit_level1_post template

Find:
-----

<td><img src="$stylevar[imgdir_statusicon]/forum_$forum[statusicon].gif" alt="" border="0" /></td>

Replace with:
-------------

<td><img src="<if condition="$show['customstatusicon']">$forum[customicon]<else />$stylevar[imgdir_statusicon]/forum_$forum[statusicon].gif</if>" alt="" border="0" /></td>

Step 3: Edit the forumhome_forumbit_level2_post template

Find:
-----

<td class="alt2"><img src="$stylevar[imgdir_statusicon]/forum_$forum[statusicon].gif" alt="" border="0" /></td>

Replace with:
-------------

<td class="alt2"><img src="<if condition="$show['customstatusicon']">$forum[customicon]<else />$stylevar[imgdir_statusicon]/forum_$forum[statusicon].gif</if>" alt="" border="0" /></td>

Step 4: ENJOY

i dont knwo why this is not compatible :/

[Smoothie]

Question, when you mention "Also in these templates, simply change the first
<tr>, you mean the very first instance of <tr> or <tr align="center">

[nevetS]

um, where's the plugin file located?
It's the XML file in the downloads section. I see it... hopefully you can too! :surprised:

[nevetS]

Question, when you mention "Also in these templates, simply change the first
<tr>, you mean the very first instance of <tr> or <tr align="center">
I'm going to revert my templates and then provide a more detailed installation message. I have these templates customized already, so I'm not absolutely sure of the answer to your question. I'll update the instructions shortly.

[Smoothie]

It's the XML file in the downloads section. I see it... hopefully you can too! :surprised: I see it now, thanks.

Got it uploaded, changed the templates but it doesn't look quite right. Maybe it has something to do with the question in my previous post

[Ascor]

i changed first <tr align="center"> in <tr> and it's work at default style (but not with custom icon mod)

[Smoothie]

In those 3 templates find all instances of alt1, alt2, alt1active, alt2active and change to $rowClass. Maybe an easier way? Not sure but that works.

[nevetS]

Ascor - I just installed that plugin, and I am not seeing any problems at the moment. Shortly, I will attach copies of my templates including the custom icon plugin. I did make just one minor change to the instructions - in forumhome_forumbit_level2_post, I removed ' Class="alt2"', but that's it. I LOVE that plugin BTW!

Could you be more specific about what is wrong? Or send me a link? Are you receiving errors? Or are the rows just not alternating colors? Do you have the Forums Arranged in Columns by Xeon mod too? I didn't install that one.

[Smoothie]

forumhome_forumbit_level1_post updates
1) On the very first line, change Code:
<tr>
to Code:
<tr class="$rowClass">

I don't have that on the first line in forumhome_forumbit_level1_post

Default template, I have this:



Code:
---------------
Code is only visible to licensed users, and only when logged into the forums.
---------------

[nevetS]

Thanks Smoothie! I updated the instructions. I guess I got a little bleary-eyed while proof-reading.

[Smoothie]

Also, I just re-uploaded the new product, made all the template changes (The hard way) and I see no changes.

[Smoothie]

Well, something ain't right. I even tried uploading your templates and still no changes are visible.

[nevetS]

This is going to sound lame, but is the product enabled? It should be by default. I just diffed my uploaded xml file with what is enabled on my system and it's the same. I also went through and updated my templates from what I have in the zip and everything looks clean to me.

Maybe we can get on instant messenger or something tomorrow to clear things up. I'm about done for the night.

[Smoothie]

Ya know what? I'm a total dummy. When I was logged in I was looking at a test skin instead of the default one. The default skin is the one I made the changes to. I was checking it in the other browsers I have and being logged out I could only see the default skin and it looked fine and I'm like WTF?

Foot in mouth......

You may now give me a swift kick in the rearend. I did click install and it is working as advertised.

[nevetS]

LOL... You had me very concerned there. I was just thinking... What could I possibly have forgotten to upload?!? I'm glad someone is making use of my work. :)

[Smoothie]

LOL... You had me very concerned there. I was just thinking... What could I possibly have forgotten to upload?!? I'm glad someone is making use of my work. :)

Thanks for the update, the great instructions and all the confusion. This mod should be by default in vB, but thats another topic, another day.

[Smoothie]

Have a request. Maybe when you have time you can adjust the code so that Private Messages in Folder: Inbox and Private Messages in Folder: Sent Items reflects the same alternating row colors.

[nevetS]

Will Do. I just thought about the Memberlist as well that needs alternating row colors. If I don't get too bogged down, I should post another update tomorrow. Anybody else that is implementing this, or thinking of implementing this, please let me know where else you need alternating row colors.

Also, if you want options, let me know what you want to option-ize. I'm thinking that the class names used should be configurable. Because template changes are involved, you can't turn it on and off via an option - unless there is a way that I don't know of to programatically update templates - now that would be cool! :)

[Ascor]

Thank you very mutch to take the time for look at my problem nevetS,
i just drop your file from zip an all is workin fine now :)
i suggest: the same think for forumdisplay and showthread view, to have the most 3 views harmonised :)

[Smoothie]

Will Do. I just thought about the Memberlist as well that needs alternating row colors. If I don't get too bogged down, I should post another update tomorrow. Anybody else that is implementing this, or thinking of implementing this, please let me know where else you need alternating row colors.

Also, if you want options, let me know what you want to option-ize. I'm thinking that the class names used should be configurable. Because template changes are involved, you can't turn it on and off via an option - unless there is a way that I don't know of to programatically update templates - now that would be cool! :)

Member list is definitely a needed.

[nevetS]

Check back for the updates tomorrow. I have traffic court in the morning, so I've been spending the last few hours prepping my defense.... wish me luck! :)

[Cheertobi]

Hi nevetS,

thanks for the update ;)

Tobi

[Andreas]

Why not just use exec_switch_bg() and get rid of the global_start Plugin?

[nevetS]

Why not just use exec_switch_bg() and get rid of the global_start Plugin?
This is the original solution that I implemented, however, exec_switch_bg() does not seem to work in the forum_bit templates. Add to that that the exec_switch_bg call in the threadbit template did not work when displaying search results. Not to say that it wouldn't work at all, but when I tried implementing it, it didn't.

Additionally, I'm going to implement some options in an update to select the classes so that the colors don't necessarily need to map directly to the alt1 and alt2 classes.

[Smoothie]

Yay! Update to member list coming along too?

[nevetS]

Just uploaded. I'm updating the instructions now, but for upgrades from 0.2, all you just overwrite the plugin, and update the new templates. I attached new pre-modified templates again, so it should be pretty easy.

Today I added memberlist and Private Message listings.

[Smoothie]

If we have the previous version installed and have added the new templates (forumhome level 1, level 2 and threadbit), do we need to update those templates too? Or just the newest templates(Memberlist and Private messages)?

[nevetS]

i suggest: the same think for forumdisplay and showthread view, to have the most 3 views harmonised :)

Forgive me here - but I thought that forumdisplay and showthread were already updated. Either you posted this prior to the update, or maybe I am just thinking of the wrong views?

If I'm wrong, just post a sample url (i.e. forums/showthread.php?t=123) so I can check it on my own forum.

I took a peek and found something like 41 templates that have the possibility of being updated! I don't think I'll be tackling ALL of them just yet :)

[nevetS]

If we have the previous version installed and have added the new templates (forumhome level 1, level 2 and threadbit), do we need to update those templates too? Or just the newest templates(Memberlist and Private messages)?
Just the newest ones. The others have not changed.

[Ascor]

yes your right, i posted before the update :) but when i look at your screen, showthread is not inclued
(what i think is this present view here, that you are just reading at this moment)
Tomorrow i install your upgrade :)

[Smoothie]

Just uploaded. I'm updating the instructions now, but for upgrades from 0.2, all you just overwrite the plugin, and update the new templates. I attached new pre-modified templates again, so it should be pretty easy.

Today I added memberlist and Private Message listings.
Might want to check your memberlist_resultbit template. It's got some funny characters in the first line.


Code:
---------------
Code is only visible to licensed users, and only when logged into the forums.
---------------

[nevetS]

Might want to check your memberlist_resultbit template. It's got some funny characters in the first line.


Code:
---------------
Code is only visible to licensed users, and only when logged into the forums.
---------------


Thanks again smoothie. I copy pasted that from MS Word. It apparently smart-quoted me... In my text editor, they look almost exactly the same.

Template repaired and updated in the zip file. Anybody can use the new file, or replace align=îcenterî with align="center"

[Smoothie]

Installed new version and working. Thanks!

[aceofspades]

Please help me. I made a thread start column by using this tutorial:

http://www.vbulletin.com/forum/showthread.php?t=197265

which gave me this result:

http://img130.imageshack.us/img130/2769/problem11bj5.jpg

Your hack worked perfectly before i added that column but now it doesnt match up. Can you please please please tell me how i would go about getting the row colours to alternate like the other columnbs (i.e last post). I would really appreciate it.

Regards,

James

[nevetS]

Please help me. I made a thread start column by using this tutorial:

http://www.vbulletin.com/forum/showthread.php?t=197265

which gave me this result:

http://img130.imageshack.us/img130/2769/problem11bj5.jpg

Your hack worked perfectly before i added that column but now it doesnt match up. Can you please please please tell me how i would go about getting the row colours to alternate like the other columnbs (i.e last post). I would really appreciate it.

Regards,

James
Take a gander at your threadbit template. I suspect you will find an instance of

Code:
---------------
Code is only visible to licensed users, and only when logged into the forums.
---------------


or possibly, "alt1", but I'm pretty sure that it's alt2.
simply remove it and you should be fine. Basically, that class declaration is over-riding the color for cells in that column.

[aceofspades]

Thanks nevetS, you were right. Fixed and working perfectly, thank you

[Ascor]

Just installed the update, all working nice, thank's again nevest :)

[Smoothie]

Have a quick question. I added a template and a modification that shows another row on forum home, but the alt1 and alt2 in the new template isn't looking quite right. Is it possible to get this new template to work with this mod?

[PayBas]

I used this product/plugin but now I found this other way that doesnt require plugins, and can be modified super easy for each template it is used in.

http://www.vbulletin-styles.com/showthread.php?t=23841

its basically does the exact same thing :)

[PennylessZ28]

I used this product/plugin but now I found this other way that doesnt require plugins, and can be modified super easy for each template it is used in.

http://www.vbulletin-styles.com/showthread.php?t=23841

its basically does the exact same thing :)

that link is invalid.

[PennylessZ28]

Oh BTW: If you wanted to make your stickies stand out after doing this, try this little trick:



Code:
---------------
Code is only visible to licensed users, and only when logged into the forums.
---------------





Code:
---------------
Code is only visible to licensed users, and only when logged into the forums.
---------------

[stek2006]

Thanks so much for this mod - it's exactly what I needed.

I've also modified my templates to use a simpler table row based display on showthread.php - which works fine, but I'd like to use the alternating background colours.

I tried just creating a copy of the 'Alternating Row Color Search Threadbit' plug in and set this to start with the correct postbit hook... changed the tr class to $rowClass but each row seems to show the .alt2 class regardless.

Any suggestions?

[maxicep]

nice hack, installed.

[magnus]

I was using this modification up until I read PayBas's post. To accomplish this without the need for plugins or extra functions simply uninstall the product (leaving the template changes in place) and re-edit the templates listed in the instructions, adding the following to the top of each template:



Code:
---------------
Code is only visible to licensed users, and only when logged into the forums.
---------------




That's it. :)

[maxicep]

I was using this modification up until I read PayBas's post. To accomplish this without the need for plugins or extra functions simply uninstall the product (leaving the template changes in place) and re-edit the templates listed in the instructions, adding the following to the top of each template:



Code:
---------------
Code is only visible to licensed users, and only when logged into the forums.
---------------




That's it. :)

this hack work with without a product, with your way?

[magnus]

this hack work with without a product, with your way?

Yes.

[maxicep]

i got a question one more,
how can i this hack work with Zoints Tags (http://www.vbulletin.org/forum/showthread.php?t=127244&page=38) showing tags results like forumdisplay.
When showing tags results forumdisplay all backrounds White ,how can i fix ?

[DiSpy]

I did this using the changes in this post (http://www.vbulletin.org/forum/showpost.php?p=1207465&postcount=49).

However, for my templates (v3.6.5) there were a few differences that may help others...
In the instructions for "The Easy Way"

in threadbit template updates
add
4) Find all ' class="alt1Active"' and remove

in memberlist_resultsbit
change
2) Find all ' AND exec_switch_bg()"' and remove
to
2) Find all ' AND exec_switch_bg()' and remove
(removed the trailing " symbol)

and lastly, there were no instances of
5) Find all ' class="alt2"' and remove

ALSO, this broke my other mod that changed the bg color of a row on hover. I did wind up getting both to work, but it was all custom stuff so I won't bother posting exactly what I did (since it'll be different for everyone). Just wanted to let you know that it WILL break that.

THANK YOU!!!! (marked installed)

[dynamot]

Can I apply this to vb 3.6.8 version?

[maxicep]

how can i make row color for similar threats ?

[amnesia623]

nice - thank you

[needaltuna]

Many thanks to everybody who's provided a plugin/script with which to achieve this effect.

Somebody has already asked this question, but didn't receive an answer. Do these mods work in 3.6.8?

[needaltuna]

In 3.6.8, the first line of forumhome_forumbit_level2_post has "<tr align="center">" on it instead of "<tr>". Should this be changed to "<tr class="$rowClass">"?

[needaltuna]

Well, it works in 3.6.8. Check out the main page of my forum.

http://www.afeastoffumetti.org/

The only problem with it is that it doesn't alternate the row colors on pages like this.

http://www.afeastoffumetti.org/forumdisplay.php?f=3

Anyone know how I can correct this?

[needaltuna]

Well it turned out that this hack didn't work so well in 3.6.8. In the memberslist page, I got the following error message.

Parse error: syntax error, unexpected '<' in /home/needa/public_html/memberlist.php(831) : eval()'d code on line 14

Anyway, I had to replace the new code with the old.

It'd be nice if somebody came up with a updated version of this hack for the latest version of vBulletin. Got a feeling, though, that everybody but me has abandoned this thread. Pity.

[magnus]

Well it turned out that this hack didn't work so well in 3.6.8. In the memberslist page, I got the following error message.



Anyway, I had to replace the new code with the old.

It'd be nice if somebody came up with a updated version of this hack for the latest version of vBulletin. Got a feeling, though, that everybody but me has abandoned this thread. Pity.

The method in my previous post(s) works fine (tested in 3.6.8). I'd check for typos.

[bulletinboard]

Excellent, just what I was looking for.

[NicholasMarshal]

I was using this modification up until I read PayBas's post. To accomplish this without the need for plugins or extra functions simply uninstall the product (leaving the template changes in place) and re-edit the templates listed in the instructions, adding the following to the top of each template:



Code:
---------------
Code is only visible to licensed users, and only when logged into the forums.
---------------




That's it. :)

Well done, works like a treat

[MichaelJohnston]

Sweet man, this is the way it should be. Thanks a MILLION!

[brendanc]

Would like to point out that this works with 3.7.0 as well. Thanks!

[karp2381]

This code is great! Thanks a bunch.

[ringleader]

Works great with 3.7.3 PL1.

Thanks so much for making it!