Announcement

Collapse
No announcement yet.

[Beta RELEASE] Color Change on Hover

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • [Beta RELEASE] Color Change on Hover

    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

    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

    PHP Code:
    <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

    PHP Code:
    <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

    PHP Code:
    <td bgcolor="{ secondaltcolor }" width="30%" nowrap><normalfont>$thread[postedby]</normalfont></td
    **replace with

    PHP Code:
    <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

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

    PHP Code:
    <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

    PHP Code:
    $threadrating
        
    <td bgcolor="$backcolor"
    **replace with

    PHP Code:
    $threadrating
        
    <td bgcolor="$backcoloronMouseOver="this.style.backgroundColor='{firstalthovercolor}'; this.style.cursor='hand';"  onMouseOut="this.style.backgroundColor='{secondalthovercolor}';" 

    Still with me? Good


    Step 3: Edit template "forumdisplay_forumbit_level1_post"

    **find

    PHP Code:
    <td bgcolor="{ firstaltcolor }" align="left" valign="top" colspan="2"
    **replace with

    PHP Code:
    <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

    PHP Code:
    <td bgcolor="{ secondaltcolor }"><smallfont>$forum[lastpostinfo]</smallfont></td
    **replace with

    PHP Code:
    <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

    PHP Code:
    <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

    PHP Code:
    <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

    PHP Code:
    <td bgcolor="{ secondaltcolor }"><smallfont>$forum[lastpostinfo]</smallfont></td
    **replace with

    PHP Code:
    <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

    PHP Code:
    <tr align="center">
        <
    td bgcolor="{ firstaltcolor }" colspan="2" align="left"
    **replace with

    PHP Code:
    <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

    PHP Code:
    <td bgcolor="{ secondaltcolor }"><smallfont>$forum[lastpostinfo]</smallfont></td
    **replace with

    PHP Code:
    <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

    PHP Code:
    <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

    PHP Code:
    <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

    PHP Code:
    <td bgcolor="{ secondaltcolor }"><smallfont>$forum[lastpostinfo]</smallfont></td
    **replace with

    PHP Code:
    <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!

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

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

    Enjoy
    Last edited by Pie'oh'pah; Sun 9 Sep '01, 6:54pm.
    I want to express my deepest compassion to all who have lost their loved ones in the latest terroristic attack

    >> Nuke Bin Laden yourself here <<

    Webmaster NÐE | Webmaster UA Forums | ArtworX ECL | Admin DiGL | Hosted at RWH | Portfolio

    My Stylez
    Red Darkness | Velvet Night | Dreadful Cyan
    Goodiez
    Table bgcolor change on hover | Onlinestatus modifications | German Templates

                                   \\\ ///
                                    (ô ô)
    -------------------ooO-(_)-Ooo-----------------

  • #2
    Little Errors

    Yo,

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

    -Pie
    Last edited by Pie'oh'pah; Sun 5 Aug '01, 5:03pm.
    I want to express my deepest compassion to all who have lost their loved ones in the latest terroristic attack

    >> Nuke Bin Laden yourself here <<

    Webmaster NÐE | Webmaster UA Forums | ArtworX ECL | Admin DiGL | Hosted at RWH | Portfolio

    My Stylez
    Red Darkness | Velvet Night | Dreadful Cyan
    Goodiez
    Table bgcolor change on hover | Onlinestatus modifications | German Templates

                                   \\\ ///
                                    (ô ô)
    -------------------ooO-(_)-Ooo-----------------

    Comment


    • #3
      This was already mentioned earlier and moved to the Templates forum. http://www.vbulletin.com/forum/showt...threadid=24538

      Good job though.
      Rob

      Comment


      • #4
        Damn, I knew this would happen

        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
        Last edited by Pie'oh'pah; Sun 5 Aug '01, 5:12pm.
        I want to express my deepest compassion to all who have lost their loved ones in the latest terroristic attack

        >> Nuke Bin Laden yourself here <<

        Webmaster NÐE | Webmaster UA Forums | ArtworX ECL | Admin DiGL | Hosted at RWH | Portfolio

        My Stylez
        Red Darkness | Velvet Night | Dreadful Cyan
        Goodiez
        Table bgcolor change on hover | Onlinestatus modifications | German Templates

                                       \\\ ///
                                        (ô ô)
        -------------------ooO-(_)-Ooo-----------------

        Comment


        • #5
          call me a dummy but i dont know heh well where do ya add the replacement variables?
          http://www.danasoft.com/vipersig.jpg

          Comment


          • #6
            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
            I want to express my deepest compassion to all who have lost their loved ones in the latest terroristic attack

            >> Nuke Bin Laden yourself here <<

            Webmaster NÐE | Webmaster UA Forums | ArtworX ECL | Admin DiGL | Hosted at RWH | Portfolio

            My Stylez
            Red Darkness | Velvet Night | Dreadful Cyan
            Goodiez
            Table bgcolor change on hover | Onlinestatus modifications | German Templates

                                           \\\ ///
                                            (ô ô)
            -------------------ooO-(_)-Ooo-----------------

            Comment


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

              Maybe in 0.92 ?



              Excuse my english.

              Comment


              • #8
                On Announcements

                Ok here you go:

                Open your forumhome_announcement template

                **find
                PHP Code:
                <td bgcolor="{ firstaltcolor }" align="left"
                **replace
                PHP Code:
                    <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

                PHP Code:
                <td bgcolor="{ secondaltcolor }" nowrap
                **replace
                PHP Code:
                    <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
                Last edited by Pie'oh'pah; Thu 16 Aug '01, 2:23am.
                I want to express my deepest compassion to all who have lost their loved ones in the latest terroristic attack

                >> Nuke Bin Laden yourself here <<

                Webmaster NÐE | Webmaster UA Forums | ArtworX ECL | Admin DiGL | Hosted at RWH | Portfolio

                My Stylez
                Red Darkness | Velvet Night | Dreadful Cyan
                Goodiez
                Table bgcolor change on hover | Onlinestatus modifications | German Templates

                                               \\\ ///
                                                (ô ô)
                -------------------ooO-(_)-Ooo-----------------

                Comment


                • #9
                  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?

                  Comment


                  • #10
                    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
                    Last edited by Pie'oh'pah; Sun 9 Sep '01, 7:10pm.
                    I want to express my deepest compassion to all who have lost their loved ones in the latest terroristic attack

                    >> Nuke Bin Laden yourself here <<

                    Webmaster NÐE | Webmaster UA Forums | ArtworX ECL | Admin DiGL | Hosted at RWH | Portfolio

                    My Stylez
                    Red Darkness | Velvet Night | Dreadful Cyan
                    Goodiez
                    Table bgcolor change on hover | Onlinestatus modifications | German Templates

                                                   \\\ ///
                                                    (ô ô)
                    -------------------ooO-(_)-Ooo-----------------

                    Comment


                    • #11
                      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

                      Comment


                      • #12
                        Hehe

                        yes you did

                        the rollover has to be the color it is
                        hmm why is that? Can you give me the URL?
                        I want to express my deepest compassion to all who have lost their loved ones in the latest terroristic attack

                        >> Nuke Bin Laden yourself here <<

                        Webmaster NÐE | Webmaster UA Forums | ArtworX ECL | Admin DiGL | Hosted at RWH | Portfolio

                        My Stylez
                        Red Darkness | Velvet Night | Dreadful Cyan
                        Goodiez
                        Table bgcolor change on hover | Onlinestatus modifications | German Templates

                                                       \\\ ///
                                                        (ô ô)
                        -------------------ooO-(_)-Ooo-----------------

                        Comment


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

                          Comment


                          • #14
                            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
                            I want to express my deepest compassion to all who have lost their loved ones in the latest terroristic attack

                            >> Nuke Bin Laden yourself here <<

                            Webmaster NÐE | Webmaster UA Forums | ArtworX ECL | Admin DiGL | Hosted at RWH | Portfolio

                            My Stylez
                            Red Darkness | Velvet Night | Dreadful Cyan
                            Goodiez
                            Table bgcolor change on hover | Onlinestatus modifications | German Templates

                                                           \\\ ///
                                                            (ô ô)
                            -------------------ooO-(_)-Ooo-----------------

                            Comment


                            • #15
                              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.
                              KCi aka Rhyze

                              Comment

                              widgetinstance 262 (Related Topics) skipped due to lack of content & hide_module_if_empty option.
                              Working...
                              X