Admin Forum:Hover Coloring in Tables

This Forum has been archived

Visit the new Forums!

Forums: Admin Central Index → Technical Help → Hover Coloring in Tables

Central's forums are a place for the community to help other members.
To contact staff directly or to report bugs, please use Special:Contact.

Note: This topic has been unedited for 4048 days. It is considered archived - the discussion is over. Do not add to unless it really needs a response.

Another admin wanted to add a table mouseover hover effect like they have here, but I can't figure out how to implement it. I THINK it uses jQuery to work, and I don't really know much about that. Can anyone help with this? -- Lycentia 22:13, April 4, 2012 (UTC)

Their Common.js did not show anything about this. But their Common.css however, contains:

table.linetable { background: #996600 border: 1px #321801 solid; border-collapse: collapse;}
table.linetable th, table.linetable td { border: 1px #321801 solid; padding: 0.2em; }
table.linetable th { background: #996600; text-align: center; }
table.linetable caption { margin-left: inherit; margin-right: inherit; font-weight: bold; }
 
table.treetable { background-color: transparent; border: 1px #f9d691 solid; border-collapse: collapse;}
table.treetable th { padding-left: 2px; }
table.treetable th, table.treetable td { border: 1px #f9d691 solid; border-collapse: collapse; padding-left: 2px; }
table.treetable tr { background-color: #cb995e; }
table.treetable tr:hover { background-color: #ffff99; }
 
table.hover tr { background-color: transparent; }
table.hover tr:hover { background-color: #ffff99; }
 
table.hover2 tr:hover { background-color: #cc9555; }
 
table.hover3 tr { background-color: #cb995e; }
table.hover3 tr:hover { background-color: #ffff99; }

Notice the usage of the class treetable in the table source. ~ Flightmare 22:30, April 4, 2012 (UTC)

I forgot to add that the hover is the thing you are looking for. Good luck. ~ Flightmare 22:32, April 4, 2012 (UTC)

I copied and pasted it exactly as you have it here and tested it. It isn't working. -- Lycentia 00:31, April 5, 2012 (UTC)

It was not intended for 1:1 copy paste usage, it was a guideline. The CSS might get overridden somewhere else. Furthermore, you make use of the class linetable where I said it is about treetable. ~ Flightmare 00:45, April 5, 2012 (UTC)

Try adding it to MediaWiki:Wikia.css, see if it works —Sam Wang 01:27, April 5, 2012 (UTC)

Bingo! Worked when I put it in the Wikia.css. Thank you both. -- Lycentia 01:35, April 5, 2012 (UTC)

I liked the idea so I implemented it on my own wikis as well, but

table.hover tr:hover { background-color: #ffff99; }

is everything you need. You can give a table multiple classes

{| class="wikitable hover"....

will load both the wikitable and hover classes. This way you can combine the hover effect with any table you have. ~ Flightmare 21:51, April 6, 2012 (UTC)