Community Central

Admin Forum:Hover Coloring in Tables

19,211pages on
this wiki
Add New Page
Talk0 Share

This Forum has been archived

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 1400 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)

Ad blocker interference detected!

Wikia is a free-to-use site that makes money from advertising. We have a modified experience for viewers using ad blockers

Wikia is not accessible if you’ve made further modifications. Remove the custom ad blocker rule(s) and the page will load as expected.

Also on Fandom

Random Wiki