indiePaper MyBB Premium Themes

Toggle Panel

Post Reply 
 
Thread Rating:
  • 0 Votes - 0 Average
  • 1
  • 2
  • 3
  • 4
  • 5
Lighting Effect Upon Cursor Trailing
09-25-2009, 05:46 PM
Post: #1
Lighting Effect Upon Cursor Trailing
I don't know what to call it so I just came up with that title. Tongue

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?

Find all posts by this user
Quote this message in a reply
09-25-2009, 10:12 PM
Post: #2
RE: Lighting Effect Upon Cursor Trailing
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 Wink

Visit this user's website Find all posts by this user
Quote this message in a reply
09-25-2009, 10:51 PM
Post: #3
RE: Lighting Effect Upon Cursor Trailing
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.

Find all posts by this user
Quote this message in a reply
09-25-2009, 11:04 PM
Post: #4
RE: Lighting Effect Upon Cursor Trailing
(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 Big Grin

http://lethalzone.net
Find all posts by this user
Quote this message in a reply
09-26-2009, 09:08 AM (This post was last modified: 09-26-2009 09:12 AM by Joshee.)
Post: #5
RE: Lighting Effect Upon Cursor Trailing
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 Tongue)
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;

Wink

Visit this user's website Find all posts by this user
Quote this message in a reply
09-26-2009, 09:43 AM
Post: #6
RE: Lighting Effect Upon Cursor Trailing
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. >.<

Find all posts by this user
Quote this message in a reply
09-26-2009, 03:22 PM (This post was last modified: 09-26-2009 03:23 PM by Joshee.)
Post: #7
RE: Lighting Effect Upon Cursor Trailing
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 Wink

Visit this user's website Find all posts by this user
Quote this message in a reply
09-26-2009, 05:06 PM
Post: #8
RE: Lighting Effect Upon Cursor Trailing
Joshee's techinique would work, but you woudln't be able to have different colors for the trows as they are beign removed.

Find all posts by this user
Quote this message in a reply
09-27-2009, 07:44 AM
Post: #9
RE: Lighting Effect Upon Cursor Trailing
Well then what's your technique? :O

Find all posts by this user
Quote this message in a reply
09-27-2009, 02:19 PM
Post: #10
RE: Lighting Effect Upon Cursor Trailing
I already posted it Tongue

(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 >

Find all posts by this user
Quote this message in a reply
Post Reply 


Forum Jump: