mNo edit summary |
(archive) |
||
(3 intermediate revisions by 3 users not shown) | |||
Line 1: | Line 1: | ||
+ | {{ForumArchiveBox}} |
||
+ | |||
{{Admin-Forumheader|Technical Help}} |
{{Admin-Forumheader|Technical Help}} |
||
Line 33: | Line 35: | ||
:Bingo! Worked when I put it in the Wikia.css. Thank you both. -- Lycentia 01:35, 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 <pre>table.hover tr:hover { background-color: #ffff99; }</pre> is everything you need. You can give a table multiple classes <pre>{| class="wikitable hover"....</pre> will load both the wikitable and hover classes. This way you can combine the hover effect with any table you have. ~ [[User:Flightmare|Flightmare]] 21:51, April 6, 2012 (UTC) |
Latest revision as of 09:24, 7 March 2013
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.
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)
- 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)
- I liked the idea so I implemented it on my own wikis as well, but