[Beta RELEASE] Color Change on Hover

[Pie'oh'pah]

Yo folx,

recently i found a nice effect on UBB, thought it might be cool to have that one on vB either.

Version: 0.9.1

What it does:

When you hover over any Forum, Thread or Post (as well as Last Poster etc.), the color of the table changes as you desire and goes back to default (or any other color you set) when moving out of that field.

Also, on the Forum and Thread Fields, you may just click inside the table and you'll be routed to the proper Forum/Thread without actually hitting the original link.

Example: Click here to see in action (http://www.unreal-alliance.net)

How-To:

Note: Remove all spaces between the brackets and the variable names of { timecolor } , { firstaltcolor } and { secondaltcolor } . I had to seperate them because otherwise you'd see the colors used by this vbulletin.

Step 1: Add 2 new Replacement Variables:

Name: {firstalthovercolor}
Value: #colorcode

Name: {secondalthovercolor}
Value: #colorcode


Step 2: Edit template "forumdisplaybit"

**find



<td bgcolor="{ firstaltcolor }" align="left" width="70%"><normalfont>$thread[gotonew] $paperclip$thread[movedprefix]$thread[typeprefix]<a href="showthread.php3?s=$session[sessionhash]&threadid=$thread[threadid]">$thread[title]</a></normalfont> <smallfont>$thread[pagenav]</smallfont></td>


**replace with



<td bgcolor="{ firstaltcolor }" align="left" width="70%" onMouseOver="this.style.backgroundColor='{secondalthovercolor}' ; this.style.cursor='hand';" onMouseOut="this.style.backgroundColor='{firstalthovercolor}';"
onclick="window.location.href='showthread.php3?s=$session[sessionhash]&threadid=$thread[threadid]'"><normalfont>$thread[gotonew] $paperclip$thread[movedprefix]$thread[typeprefix]<a href="showthread.php3?s=$session[sessionhash]&threadid=$thread[threadid]">$thread[title]</a></normalfont> <smallfont>$thread[pagenav]</smallfont></td>


**find



<td bgcolor="{ secondaltcolor }" width="30%" nowrap><normalfont>$thread[postedby]</normalfont></td>


**replace with



<td bgcolor="{ secondaltcolor }" width="30%" nowrap onMouseOver="this.style.backgroundColor='{firstalthovercolor}'; this.style.cursor='hand';" onMouseOut="this.style.backgroundColor='{secondalthovercolor}' ;"><normalfont>$thread[postedby]</normalfont></td>


**find



<td bgcolor="{ firstaltcolor }"><normalfont><a href="javascript:who($thread[threadid])">$thread[replycount]</a></normalfont></td>


**replace with



<td bgcolor="{ firstaltcolor }" onMouseOver="this.style.backgroundColor='{secondalthovercolor}' ; this.style.cursor='hand';" onMouseOut="this.style.backgroundColor='{firstalthovercolor}';"><normalfont><a href="javascript:who($thread[threadid])">$thread[replycount]</a></normalfont></td>


**find



$threadrating
<td bgcolor="$backcolor">


**replace with



$threadrating
<td bgcolor="$backcolor" onMouseOver="this.style.backgroundColor='{firstalthovercolor}'; this.style.cursor='hand';" onMouseOut="this.style.backgroundColor='{secondalthovercolor}' ;"



Still with me? Good :D


Step 3: Edit template "forumdisplay_forumbit_level1_post"

**find



<td bgcolor="{ firstaltcolor }" align="left" valign="top" colspan="2">


**replace with



<td bgcolor="{ firstaltcolor }" align="left" valign="top" colspan="2" onMouseOver="this.style.backgroundColor='{secondalthovercolor}' ; this.style.cursor='hand';" onMouseOut="this.style.backgroundColor='{firstalthovercolor}';"
onclick="window.location.href='forumdisplay.php3?s=$session[sessionhash]&forumid=$forum[forumid]'">


**find



<td bgcolor="{ secondaltcolor }"><smallfont>$forum[lastpostinfo]</smallfont></td>


**replace with



<td bgcolor="{ secondaltcolor }" onMouseOver="this.style.backgroundColor='{firstalthovercolor}'; this.style.cursor='hand';" onMouseOut="this.style.backgroundColor='{secondalthovercolor}' ;"><smallfont>$forum[lastpostinfo]</smallfont></td>



Step 4: Edit template "forumdisplay_forumbit_level2_post"


**find



<td bgcolor="{ firstaltcolor }" align="left"><a href="forumdisplay.php3?s=$session[sessionhash]&forumid=$forum[forumid]"><normalfont><b>$forum[title]</b></normalfont></a>
<br><smallfont>$forum[description]</smallfont></td>


**replace with



<td bgcolor="{ firstaltcolor }" align="left" onMouseOver="this.style.backgroundColor='{secondalthovercolor}' ; this.style.cursor='hand';" onMouseOut="this.style.backgroundColor='{firstalthovercolor}';"
onclick="window.location.href='forumdisplay.php3?s=$session[sessionhash]&forumid=$forum[forumid]'"><a href="forumdisplay.php3?s=$session[sessionhash]&forumid=$forum[forumid]"><normalfont><b>$forum[title]</b></normalfont></a>
<br><smallfont>$forum[description]</smallfont></td>


**find



<td bgcolor="{ secondaltcolor }"><smallfont>$forum[lastpostinfo]</smallfont></td>


**replace with



<td bgcolor="{ secondaltcolor }" onMouseOver="this.style.backgroundColor='{firstalthovercolor}'; this.style.cursor='hand';" onMouseOut="this.style.backgroundColor='{secondalthovercolor}' ;"><smallfont>$forum[lastpostinfo]</smallfont></td>



Step 5: Edit template "forumhome_forumbit_level1_post"


**find



<tr align="center">
<td bgcolor="{ firstaltcolor }" colspan="2" align="left">


**replace with



<tr align="center">
<td bgcolor="{ firstaltcolor }" colspan="2" align="left" onMouseOver="this.style.backgroundColor='{secondalthovercolor}' ; this.style.cursor='hand';" onMouseOut="this.style.backgroundColor='{firstalthovercolor}';"
onclick="window.location.href='forumdisplay.php3?s=$session[sessionhash]&forumid=$forum[forumid]'">


**find



<td bgcolor="{ secondaltcolor }"><smallfont>$forum[lastpostinfo]</smallfont></td>


**replace with



<td bgcolor="{ secondaltcolor }" onMouseOver="this.style.backgroundColor='{firstalthovercolor}'; this.style.cursor='hand';" onMouseOut="this.style.backgroundColor='{secondalthovercolor}' ;"><smallfont>$forum[lastpostinfo]</smallfont></td>



Step 6: Edit template "forumhome_forumbit_level2_post"


**find



<td bgcolor="{ firstaltcolor }" align="left"><a href="forumdisplay.php3?s=$session[sessionhash]&forumid=$forum[forumid]"><normalfont><b>$forum[title]</b></normalfont></a>
<br><smallfont>$forum[description]</smallfont></td>


**replace with



<td bgcolor="{ firstaltcolor }" align="left" onMouseOver="this.style.backgroundColor='{secondalthovercolor}' ; this.style.cursor='hand';" onMouseOut="this.style.backgroundColor='{firstalthovercolor}';"
onclick="window.location.href='forumdisplay.php3?s=$session[sessionhash]&forumid=$forum[forumid]'"><a href="forumdisplay.php3?s=$session[sessionhash]&forumid=$forum[forumid]"><normalfont><b>$forum[title]</b></normalfont></a>
<br><smallfont>$forum[description]</smallfont></td>


**find



<td bgcolor="{ secondaltcolor }"><smallfont>$forum[lastpostinfo]</smallfont></td>


**replace with



<td bgcolor="{ secondaltcolor }" onMouseOver="this.style.backgroundColor='{firstalthovercolor}'; this.style.cursor='hand';" onMouseOut="this.style.backgroundColor='{secondalthovercolor}' ;"><smallfont>$forum[lastpostinfo]</smallfont></td>



That's all folks! :D

There may be much more simpler ways to accomplish this, unfortunately i dunno of any :D
You got to deal either with this, or make something up yourself.

If you have amendmends or found bugs, please let me know.

Enjoy

[Pie'oh'pah]

Yo,

i fixed some little bugs... so its version 0.9.1 now

-Pie

[RobAC]

This was already mentioned earlier and moved to the Templates forum. :) http://www.vbulletin.com/forum/showthread.php?s=&threadid=24538

Good job though. :)

[Pie'oh'pah]

Damn, I knew this would happen :p

I checked that link and i think mine is a little different though. This one works even on subforums, the other don't i suppose.
Further, you may simply change the hover/dehover color by changing the value of the variables :)

Thnx anyways Rob. See ya in the template-section :D

[almighty one]

call me a dummy but i dont know heh :Dwell where do ya add the replacement variables? :confused:

[Pie'oh'pah]

Hi there.

in your admin cp chhose 'add' und 'Replacement Variables'

Then you create those new replacements.

This where it says code to find:
{firstalthovercoler} and {secondalthovercoler}

And the color values in the field below.

HTH

-Alex

[Danielillo]

Nice hack, but it doesn't work on announcements as you can see at: http://www.unreal-alliance.de/vbulletin/forumdisplay.php3?s=&forumid=33

Maybe in 0.92 ;) ?



Excuse my english.

[Pie'oh'pah]

Ok here you go:

Open your forumhome_announcement template

**find


<td bgcolor="{ firstaltcolor }" align="left">


**replace


<td bgcolor="{ firstaltcolor }" align="left" onMouseOver="this.style.backgroundColor='{defaulthovercolor}'; this.style.cursor='hand';" onMouseOut="this.style.backgroundColor='{firstalthovercolor}';"
onclick="window.location.href='announcement.php?s=$session[sessionhash]&forumid=$foruminfo[forumid]'">



**find



<td bgcolor="{ secondaltcolor }" nowrap>


**replace


<td bgcolor="{ secondaltcolor }" nowrap onMouseOver="this.style.backgroundColor='{defaulthovercolor}'; this.style.cursor='hand';" onMouseOut="this.style.backgroundColor='{firstalthovercolor}';"
onclick="window.location.href='announcement.php?s=$session[sessionhash]&forumid=$foruminfo[forumid]'">



That should do it :)

Remember to remove the spaces befor and after the brackets again ;)

- Alex

[fthrjack]

ok, how about doing that, but making the cells text change color?? to make it easier to read, (eg. white text on rollover) i tried adding a bit of code, but it didnt do anything, this should happen without the links hover color being white, it should change with the cell, any ideas?
:confused: :confused:

[Pie'oh'pah]

Well,

i haven't tested this way yet.

I'm not sure if your request can be done that easily, since the code is within the <td> tag, which is not responsible for any text or link colors.

Anyways, regarding the "make it easier to read", why not change to a color that fits to your link and text color?

It's an easy task. Just change the {firstalthovercolor} and {secondalthovercolor} in your replacement set to another value.


-Alex

[fthrjack]

thanks for the quick response Pie'oh'pah :)

its not my board, im working on it though. the rollover has to be the color it is, making the text and link color lighter makes it hard to read on the white background, until i (or someone else) finds a way to change the text too.. i think ill have to take the rollovers out , shame, it looks great apart from the text!

:(

thanks again, ive given you something else to puzzle over now i suppose lol

[Pie'oh'pah]

Hehe

yes you did :)


the rollover has to be the color it is

hmm why is that? Can you give me the URL?

[[VbbFr]Elie]

All your links are to PHP3 ...
I send a long time to find my error

[Pie'oh'pah]

Yes

they are linked to php3 since im using this extension. Sorry for not mentioning it.

On the other hand, it's quite obvious: Whenever you click a link, you'll get File not found and in the URL bar the filename.php3

So it should have been not that hard to find out :)

I assume, that most other people using my modification are on php extension as well, and since nobody complained about it, it kinda underlines my statement.

Nevertheless, sorry for not mentioning it and causing you trouble...

-Alex

[kcikees]

Does somebody has a good working hover hack for vbulletin 2.2.x with vbportal7??

When I try this hack on my board everything is going to look strange.