I'd like to change the Subforum display list and Forum-thread list so that when mouse is hovered over any coloumn in a row, the whole coloumn changes color.
How can it be done? Which template to modify and how to get a CSS element for this?
EDIT:
Thanks to Ferron, solved fully.
See
Post #9
Ferron's guide where he explains the concept is
here
.trow1:hover {
background: #color;
}
I'm afraid that gives me this:
![[Image: wOUjv.jpg]](https://camo.mybb.com/876e31ffb5ae0d8712c8593e355fa7b8c837ab3c/687474703a2f2f7364756d70732e6e65742f696d616765732f774f556a762e6a7067)
The whole row is not highlighted. Only that particular td is highlighted
Can I bump this thread in hope of an answer?
ACP > Templates > Your theme's templates > Forum Bit Templates > forumbit_depth2_forum > and find <tr> at the top of template code and Change it into;
<tr class="trow_hover">
Save.
Now Open global.css of this theme and add the following code at the bottom of it;
.trow_hover:hover{
background: #F1F7FA;
}
Save.
Thanks, Yaldaram. Unfortunately it didnt work for me.
This is my forumbit_depth2_forum :
<tr class="trow_hover">
<td class="{$bgcolor}" align="center" valign="top" width="1"><img src="{$theme['imgdir']}/{$lightbulb['folder']}.gif" alt="{$lightbulb['altonoff']}" title="{$lightbulb['altonoff']}" class="ajax_mark_read" id="mark_read_{$forum['fid']}" /></td><td class="{$bgcolor}" align="center" valign="top" width="1"><img src="Forum_Icons/{$forum['icon']}" alt="{$forum['name']}" /></td>
<td class="{$bgcolor}" valign="top">
<!-- ImSubscribed -->{$forum['im_subscribed']}<!-- /ImSubscribed --><strong><a href="{$forum_url}">{$forum['name']}</a></strong>{$forum_viewers_text}<div class="smalltext">{$forum['description']}{$modlist}{$subforums}</div>
</td>
<td class="{$bgcolor}" valign="top" align="center" style="white-space: nowrap">{$threads}{$unapproved['unapproved_threads']}</td>
<td class="{$bgcolor}" valign="top" align="center" style="white-space: nowrap">{$posts}{$unapproved['unapproved_posts']}</td>
<td class="{$bgcolor}" valign="top" align="right" style="white-space: nowrap">{$lastpost}</td>
</tr>
And this is part of my global.css
body {background:#efe8dd;color:#000;font:10pt verdana,geneva,lucida,'lucida grande',arial,helvetica,sans-serif;
margin-bottom: 10px;
margin-left: 0;
margin-right: 0;
margin-top: 5px;
padding:0;}
.trow_hover:hover {
background: #FF7FAA;
}
a:link {
color: #b35400;
text-decoration: none;
}
a:visited {
color: #b35400;
}
(2011-11-20, 05:54 PM)Yaldaram Wrote: [ -> ]ACP > Templates > Your theme's templates > Forum Bit Templates > forumbit_depth2_forum > and find <tr> at the top of template code and Change it into;
<tr class="trow_hover">
Save.
Now Open global.css of this theme and add the following code at the bottom of it;
.trow_hover:hover{
background: #F1F7FA;
}
Save.
Can you please post your forum's URL?
Perfect! It definitely works! Thank you... rep added.
Edit: It seems to do that only for the first starting page of the main forum. It doesnt work on the subforums or thread list pages. How can I modify it to work on these too?
Ok, I have solved this fully..!
Added the tag:
<tbody style="{$expdisplay}" id="cat_">
surrounding the following code in
forumdisplay_threadlist like this:
<tbody style="{$expdisplay}" id="cat_">
{$selectall}
{$announcementlist}
{$threads}
<tr>
<td class="tfoot" align="right" colspan="{$colspan}">
<form action="forumdisplay.php" method="get">
<input type="hidden" name="selectall" value="{$allselected}" />
<input type="hidden" name="fid" value="{$fid}" />
<select name="sortby">
<option value="subject" {$sortsel['subject']}>{$lang->sort_by_subject}</option>
<option value="lastpost" {$sortsel['lastpost']}>{$lang->sort_by_lastpost}</option>
<option value="starter" {$sortsel['starter']}>{$lang->sort_by_starter}</option>
<option value="started" {$sortsel['started']}>{$lang->sort_by_started}</option>
{$ratingsort}
<option value="replies" {$sortsel['replies']}>{$lang->sort_by_replies}</option>
<option value="views" {$sortsel['views']}>{$lang->sort_by_views}</option>
</select>
<select name="order">
<option value="asc" {$ordersel['asc']}>{$lang->sort_order_asc}</option>
<option value="desc" {$ordersel['desc']}>{$lang->sort_order_desc}</option>
</select>
<select name="datecut">
<option value="1" {$datecutsel['1']}>{$lang->datelimit_1day}</option>
<option value="5" {$datecutsel['5']}>{$lang->datelimit_5days}</option>
<option value="10" {$datecutsel['10']}>{$lang->datelimit_10days}</option>
<option value="20" {$datecutsel['20']}>{$lang->datelimit_20days}</option>
<option value="50" {$datecutsel['50']}>{$lang->datelimit_50days}</option>
<option value="75" {$datecutsel['75']}>{$lang->datelimit_75days}</option>
<option value="100" {$datecutsel['100']}>{$lang->datelimit_100days}</option>
<option value="365" {$datecutsel['365']}>{$lang->datelimit_lastyear}</option>
<option value="9999" {$datecutsel['9999']}>{$lang->datelimit_beginning}</option>
</select>
{$gobutton}
</form>
</td>
</tr>
</tbody>
And for
forumdisplay_subforums, like this..
<table border="0" cellspacing="0" cellpadding="{$theme['tablespace']}" class="tborder">
<tr>
<td class="thead" colspan="6" align="center"><strong>{$lang->sub_forums_in}</strong></td>
</tr>
<tbody style="{$expdisplay}" id="cat_">
<tr>
<td class="tcat" width="2%"> </td><td class="tcat" width="2%"> </td>
<td class="tcat" width="59%"><span class="smalltext"><strong>{$lang->forumbit_forum}</strong></span></td>
<td class="tcat" width="7%" align="center" style="white-space: nowrap"><span class="smalltext"><strong>{$lang->forumbit_threads}</strong></span></td>
<td class="tcat" width="7%" align="center" style="white-space: nowrap"><span class="smalltext"><strong>{$lang->forumbit_posts}</strong></span></td>
<td class="tcat" width="15%" align="center"><span class="smalltext"><strong>{$lang->forumbit_lastpost}</strong></span></td>
</tr>
{$forums}
</tbody>
</table>
<br />
It obviously uses Ferron's css mod in global.css:
tbody[id*='cat'] tr:hover td.trow1,
tbody[id*='cat'] tr:hover td.trow2 {
background: #dedede;
}
The initial index obviously already has the necessary tbody code for the tweak..
Now, my forum looks just beautiful
[/align]