MyBB Community Forums

Full Version: How to change the color of hover text in a table
You're currently viewing a stripped down version of our content. View the full version with proper formatting.
In the theme section, the background area controls the color of the text and links for my header. I have a table with links in it in my header, and want to have the hover link color different than what the color for hover link in the background area of the theme.

My question is, how do I get that one table that contains that row of links to use its own color for hover links? I want the hover link in this table to be set to black. Here's my table:


<table
style="width: 100%; text-align: center; margin-left: auto; margin-right: auto;"
border="1" cellpadding="2" cellspacing="2">
<tbody>
<tr>
<td style="text-align: center; font-weight: bold;"
valign="top"><a href="http://www.flagshipmagazine.com/">Home</a></td>
<td
style="vertical-align: top; text-align: center; font-weight: bold;"><a
href="http://www.flagshipmagazine.com/index.php">Forums</a></td>
<td
style="vertical-align: top; text-align: center; font-weight: bold;"><a
href="http://www.flagshipmagazine.com/forumdisplay.php?fid=14">Polls</a></td>
<td style="text-align: center; font-weight: bold;"
valign="top"><a
href="http://www.flagshipmagazine.com/showthread.php?tid=4">Back
Issues</a></td>
<td style="text-align: center; font-weight: bold;"
valign="top"><a
href="http://www.flagshipmagazine.com/search.php">Search</a></td>
<td style="text-align: center; font-weight: bold;"
valign="top"><a
href="http://www.flagshipmagazine.com/memberlist.php">Member
List</a></td>
<td style="text-align: center; font-weight: bold;"
valign="top"><a
href="http://www.flagshipmagazine.com/calendar.php">Calendar</a></td>
<td style="text-align: center; font-weight: bold;"
valign="top"><a
href="http://www.flagshipmagazine.com/stats.php">Site
Statistics</a></td>
<td style="text-align: center; font-weight: bold;"
valign="top"><a
href="http://www.flagshipmagazine.com/misc.php?action=help">Help</a></td>
<td style="text-align: center; font-weight: bold;"
valign="top"><a
href="http://flagshipmagazine.com/subs.html" target="_blank">Subscribe</a></td>
</tr>
</tbody>
</table>


It is the row of links in the boxes just below the header image on this page:

http://www.flagshipmagazine.com/index.php

When hovered over, the links turn white. I want them to turn black, without affecting other links anywhere else on the page.
If I were you, I'd replace that text with:

<div class="menu">
	<ul>
		<li><a href="http://www.flagshipmagazine.com/">Home</a></li>
		<li><a
href="http://www.flagshipmagazine.com/index.php">Forums</a></li>
		<li><a
href="http://www.flagshipmagazine.com/forumdisplay.php?fid=14">Polls</a></li>
		<li><a
href="http://www.flagshipmagazine.com/showthread.php?tid=4">Back
Issues</a></li>
		<li><a
href="http://www.flagshipmagazine.com/search.php">Search</a></li>
		<li><a
href="http://www.flagshipmagazine.com/memberlist.php">Member
List</a></li>
		<li><a
href="http://www.flagshipmagazine.com/calendar.php">Calendar</a></li>
		<li><a
href="http://www.flagshipmagazine.com/stats.php">Site
Statistics</a></li></li>
		<li><a
href="http://www.flagshipmagazine.com/misc.php?action=help">Help</a></li>
		<li><a
href="http://flagshipmagazine.com/subs.html" target="_blank">Subscribe</a></li>
	</ul>
</div>
and just use the width: auto; css on your .menu to get that look and just add your font-weight: bold; and border: settings. But the easy way is to edit that table style attribute to include links. So try this:

<table border="1" cellpadding="2" cellspacing="2" class="menu_table">

and in your stylesheet at the very very bottom in the extra css portion, write this:

.menu_table {
width: 100%; 
text-align: center; 
margin-left: auto; 
margin-right: auto;
}

a:hover.menu_table {
color: #000000;
}

Cheers!
Audentio Wrote:<table border="1" cellpadding="2" cellspacing="2" class="menu_table">

I place this in the Extra CSS Attributes section?

I made the other changes that you recommended, and they worked fine. I just am not seeing a border around the links, to form the boxes that I had previously.
I was able to just use the original method, and change the colors of the hover text in the Page Container section.