Lighting Effect Upon Cursor Trailing

[MelvinL]

I don't know what to call it so I just came up with that title.

Anyways, I'm trying to figure out how, on most of your themes, (combus's) when you put your cursor over a forum it lights out. Is that jquery and could you teach me how to do that please?

[Joshee]

You can do this with CSS.
If you want to make just the boards have the light fade effect, you will have to do two simple template edits, and add some CSS classes.
I could tell you how if you would like

[combus]

It's pretty easy with CSS. What I do is to add an extra class (".trowH") along the {bgcolor} class on the forumbit_deph_2 (I'm not sure if that's the exact template). And then on the CSS I add something like this:

Code:

.trowH:hover{
  background: #FFF !important;
}

The !important is to overwrite the background color the .trow1 or .trow2 gave to the cell when it is hovered.

[BluEditor]

(09-25-2009 10:51 PM)combus Wrote:  It's pretty easy with CSS. What I do is to add an extra class (".trowH") along the {bgcolor} class on the forumbit_deph_2 (I'm not sure if that's the exact template). And then on the CSS I add something like this:

Code:

.trowH:hover{
  background: #FFF !important;
}

The !important is to overwrite the background color the .trow1 or .trow2 gave to the cell when it is hovered.

:o Thank you for being so generous

[Joshee]

What I do is make a new CSS class like Combus did, and in forumbit_depth2_cat I replace:

Code:

<tr>

(That should be the very first thing in the template)
With:

Code:

<tr class="trowH">

(Just using trowH as an example, I make a class called trow3 )
And the remove all of these:

Code:

class="{$bgcolor}"

You will have to make the same modifications in forumbit_depth2_forum for it to work.

As for the fading effect, you will have to create another CSS class. Make it the same as the one Combus gave you, only take out the ':hover', and then add this to it:

Code:

-webkit-transition: all 0.3s ease-out;

[MelvinL]

Haha two people giving me instructions yet I can not follow them. Can you make a more simpler guide (Joshee or combus) directing me specifically on what to do? Sorry I'm a noob. >.<

[Joshee]

Add this to your CSS:

Code:

.trowH {
  background: #FFF !important;
  -webkit-transition: all 0.3s ease-out;
}

.trowH:hover {
  background: #eee !important;
}

Then go into your templates and edit forumbit_depth2_cat and change the first <tr> to <tr class="trowH">. Then remove all 'class={$bgcolor}' from the template and save. Then do the same thing for forumbit_depth2_forum.
Then just edit the the CSS to make the colors match your needs

[combus]

Joshee's techinique would work, but you woudln't be able to have different colors for the trows as they are beign removed.

[MelvinL]

Well then what's your technique? :O

[combus]

I already posted it

(09-25-2009 10:51 PM)combus Wrote:  It's pretty easy with CSS. What I do is to add an extra class (".trowH") along the {bgcolor} class on the forumbit_deph_2 (I'm not sure if that's the exact template). And then on the CSS I add something like this:

Code:

.trowH:hover{
  background: #FFF !important;
}

The !important is to overwrite the background color the .trow1 or .trow2 gave to the cell when it is hovered.

The only difference is that I place the extra class along the {$bgcolor}, and not on the parent < tr >