I want it so that when ever you hover your mouse over a forum, the table's background changes colours.
I know CSS, but where do I put it to enable the change?
Thanks,
BP
blueparukia Wrote:In what file?
Templates & themes are in database. If you want edit template, go: AdminCP -> Templates -> add/modify
Then find group "Form Bit Templates", next look for "forumbit_depth2_forum"
this template contain html code for rows with forum name, last post, threads & views count (forum list form index page)
If you know css & html this is easy.
In default template is something like:
<tr>
<td class="{$bgcol}"...
</tr>
move "class" to TR element, and you can make
<tr class="trow1" onmouseover="this.className='rowHilite';" onmouseout="this.className='trow1';">
-------
If you want change css styles: AdminCP -> themes -> your theme
if you want add new css class there, find at the bottom of this page "Additional CSS"
css for "trow1" and "trow2" you have in "Alternating Table Row 1/2"
That would work, but what about people who don't have javascript turned on? You can achieve the same result with CSS. Okay, so you have the main class that you apply to the backgrounds. Next, in the CSS, you could do something like this:
CLASSNAME:hover {
background: COLOR HERE;
}
That would achieve the same effects as the JavaScript, but would be available to more people.
CLASSNAME:hover {
background-color: COLOR HERE;
}
What is the classs name, I've looked everywhere for it....
And would I put it in "Extara CSS"
The class name isn't part of the Extra CSS. It's the 'Alternating Table Row 1' and 'Alternating Table Row 2'. What I do to get around having two related css bits is this. I would add a '}' in the 'Additional CSS' box. Then, do the 'hover' stuff there.
For the default theme, the 'Additional CSS' box is empty. Here's what that applied code would look like:
}
.trow1:hover {
background: COLOR;
Notice the first bracket at the top. That closes off the original 'Alternating Table Row 1' CSS block. Then, we start our own CSS block for the hover, which doesn't have a closing bracket, as that is added by the software.
LegosJedi Wrote:The class name isn't part of the Extra CSS. It's the 'Alternating Table Row 1' and 'Alternating Table Row 2'. What I do to get around having two related css bits is this. I would add a '}' in the 'Additional CSS' box. Then, do the 'hover' stuff there.
For the default theme, the 'Additional CSS' box is empty. Here's what that applied code would look like:
}
.trow1 {
background: COLOR;
Notice the first bracket at the top. That closes off the original 'Alternating Table Row 1' CSS block. Then, we start our own CSS block for the hover, which doesn't have a closing bracket, as that is added by the software.
small comment.
In mybb this classes (Trow1 & trow2) are used not only in forum list.
Usually this is used in most of TD elements (not TR) so after changes like this, is possible that:
1) only table cells is highlighted
2) cells can be highlighted in all places in mybb system (table with posts content, table with registration data, forum stats, ...)
I hope that effect of this changes is what you want blueparukia.
HOVER working good in FireFox, thaks LogosJedi, but not uder IE6
maybe this is only my settings...
This is something I'd like to use, although I didn't manage to get it working.
Quote:}
.trow1 {
background: COLOR;
Colour after the ; or instead of the "color".. well I did before but none shown anything different
Kerrang! Wrote:This is something I'd like to use, although I didn't manage to get it working.
Quote:}
.trow1 {
background: COLOR;
Colour after the ; or instead of the "color".. well I did before but none shown anything different
this should be
}
.trow1:hover {
background:#FFFF00; /*or other color*/
}
and for second (alternating row 2) is .trow2:hover {...