Forum Highlight

[Indyaboard]

How can I make the forums highlight when the mouse is over them? Something like the below screen shot.

[Indyaboard]

Originally Posted by Indyaboard

How can I make the forums highlight when the mouse is over them? Something like the below screen shot.

Demo: http://www.helpviatwitter.com/index....gora&Itemid=53

[Bellardia]

Use CSS and the pseudo class :hover to style classes or perhaps some javascript if you're more comfortable with that.

[Indyaboard]

Originally Posted by Bellardia

Use CSS and the pseudo class :hover to style classes or perhaps some javascript if you're more comfortable with that.

Not sure what you mean, can you provide me the code and how to edit it? or any hacks that are already posted here @ vB.org?

[Bellardia]

Not sure if there are any hacks, it's a relatively simple concept.
A better way for threads since it is in a table is to actually use Javascript.

If you go to the showthread_threadbit_level1_post and showthread_threadbit_level2_post you can add some inline JS code to the <tr>'s. Make sure you strip the classes from the <td>'s so that the <tr> takes precedence.

Make the <tr>

<tr onmouseover="this.className='somestyle'" onmouseout="this.className='originalstyle'" class="originalstyle">

Note: this will prevent the colors of the backgrounds from changing when using the inline mod. You can prevent that by using javascript on the <td>'s instead but it wouldn't be such a generic code.

Make sure you define the classes in the css.

[Indyaboard]

Sorry, but I'm kinda new to this stuff. I don't know where the "showthread_threadbit_level1_post" and "showthread_threadbit_level2_post" are. I want to put this color as my highlight color "#FFFF66" Can you provide me step by step on how to do this? Cause I don't know where to add the CSS / <tr><td> and stuff like that It would be really cool if you can teach me how to do this in an easier way lol? Sorry and thank you so much for your help! :up:

[Indyaboard]

Any help, someone?

[Digital Jedi]

Originally Posted by Indyboard

Sorry, but I'm kinda new to this stuff. I don't know where the "showthread_threadbit_level1_post" and "showthread_threadbit_level2_post" are. I want to put this color as my highlight color "#FFFF66" Can you provide me step by step on how to do this? Cause I don't know where to add the CSS / <tr><td> and stuff like that It would be really cool if you can teach me how to do this in an easier way lol? Sorry and thank you so much for your help! :up:

They're the name of templates in your Style Manager in the Admin CP, and they control the look of your threads on the forum homepage and in subforums. <tr> and <td> are the subdivisions of <table>. They'll be arranged in those templates like this:

 
<table>
<tr>
<td>
</td>   
</tr>
</table>

Notice they're nested inside each other. A <tr></tr> creates a row and a <td></td> creates a cell inside that row. Bellardia is showing you an opening <tr> tag with a bit of Javascript inside of it. It should do what you've asked about. By "stripping the classes", all that means is removing the class="" part from that tag if it has any. Probably need to remove them from the <td> tags well.

To test it out, create a new style in your Style Manager with No Parent style, and open up those templates and experiment with putting them into those tags. You can then view the forum in your test style to see if the changes are working the way you want them to.

Oh, um, this is the easy way.

[Bellardia]

The templates I told you start off with
<tbody>
<tr>
<td>

On a default theme typically the <td>'s have the class="" inside them, usually alternating between alt1 and alt2. You'll need to remove all of these and place on class alt1 on the <tr>. This is because the <td>'s would show their style over the <tr> and you cant change the style of all the <td>'s as easily as you can change the style of the <tr>.

CSS is located in Styles & Templates > All Style Options

And yeah, this is the easiest way