Need my custom made text to change colour when hover over in nav

rommany · October 26, 2007

Hello guys,

I had someone quite a bit back build me a nav in the header.php, they done a great job and made it look great but they did not make the text change colour when it gets hovered over, is this hard to do?

the code he wrote is below.

<td class="headerNavigation<? if (strpos($_SERVER["REQUEST_URI"],"baby-shoes-c-81.html")) echo "P" ?>" align="center"><a href="http://www.jellybabys.co.uk/baby-shoes-c-81.html">SHOES</a></td>

<td class="headerNavigation<? if (strpos($_SERVER["REQUEST_URI"],"baby-clothes-c-49.html")) echo "P" ?>" align="center"><a href="http://www.jellybabys.co.uk/baby-clothes-c-49.html">CLOTHES</a></td>

<td class="headerNavigation<? if (strpos($_SERVER["REQUEST_URI"],"baby-shoes-c-81.html")) echo "P" ?>" align="center"><a href="http://www.jellybabys.co.uk/baby-gifts-c-22.html">GIFTS</a></td>

<td class="headerNavigation<? if (strpos($_SERVER["REQUEST_URI"],"baby-bibs-c-74.html")) echo "P" ?>" align="center"><a href="http://www.jellybabys.co.uk/baby-bibs-c-74.html">BIBS</a></td>

<td class="headerNavigation<? if (strpos($_SERVER["REQUEST_URI"],"bedroom-stickers-c-70.html")) echo "P" ?>" align="center"><a href="http://www.jellybabys.co.uk/bedroom-stickers-c-70.html">STICKERS</a></td>

<td class="headerNavigation<? if (strpos($_SERVER["REQUEST_URI"],"baby-toys-c-69.html")) echo "P" ?>" align="center"><a href="http://www.jellybabys.co.uk/baby-toys-c-69.html">TOYS</a></td>

<td class="headerNavigation<? if (strpos($_SERVER["REQUEST_URI"],"play-houses-c-55.html")) echo "P" ?>" align="center"><a href="http://www.jellybabys.co.uk/play-houses-c-55.html">PLAYHOUSES</a></td>

<td class="headerNavigation<? if (strpos($_SERVER["REQUEST_URI"],"cots-amp-cradles-c-47.html")) echo "P" ?>" align="center"><a href="http://www.jellybabys.co.uk/cots-amp-cradles-c-47.html">COTS</a></td>

<td class="headerNavigation<? if (strpos($_SERVER["REQUEST_URI"],"accessories-c-44.html")) echo "P" ?>" align="center"><a href="http://www.jellybabys.co.uk/accessories-c-44.html">ACCESSORIES</a></td>

<td class="headerNavigation<? if (strpos($_SERVER["REQUEST_URI"],"activity-mats-c-85.html")) echo "P" ?>" align="center"><a href="http://www.jellybabys.co.uk/activity-mats-c-85.html">MATS</a></td>

<td class="headerNavigation<? if (strpos($_SERVER["REQUEST_URI"],"baby-jewellery-c-66.html")) echo "P" ?>" align="center"><a href="http://www.jellybabys.co.uk/baby-jewellery-c-66.html">JEWELLERY</a></td>

</tr>

</table>

any help would be great :)

dave

LooInSpain · October 26, 2007

In the stylesheet, change the following section:

a.headernavigation {

color: FFFFFF; <- for example

}

To:

a.headernavigation {

color: "put here whatever color you want followed by a ;

}

That's it!

nextprevious · October 26, 2007

LogoInSpain beat me to it!

rommany · October 26, 2007

Thanks, could not find that code in the css file, below is what i have for the nav bar..

td.topNavigation {

background-color:#fff;

font: 10.5px Verdana, Helvetica, Arial, sans-serif;

border-top: 2px solid white;

border-bottom: 2px solid white;

padding-top: 2px;

padding-bottom: 2px;

padding-left: 2px;

padding-right: 2px;

}

td.topNavigation a, td.topNavigation a:visited, td.topNavigation a:hover {

color:#999;

font-weight:bold;

text-decoration:none;

}

td.headerNavigation a, td.headerNavigation a:visited, td.headerNavigation a:hover {

color:#fff;

font-weight: bold;

text-decoration:none;

}

td.headerNavigationP a, td.headerNavigationP a:visited, td.headerNavigationP a:hover {

color:#fff;

font-weight: bold;

text-decoration:none;

}

td.headerNavigation, td.headerNavigationP {

font-family: Verdana, Arial, sans-serif;

font-size: 10px;

padding-top: 2px;

padding-right: 6px;

padding-bottom: 2px;

padding-left: 6px;

color:#fff;

}

td.headerNavigation {

background-color: #d4acce;

}

td.headerNavigationP {

background-color: #b56ca8;

}

do i need to change any off the above.

cheers

LooInSpain · October 26, 2007

td.headerNavigation a, td.headerNavigation a:visited, td.headerNavigation a:hover {
color:#fff;

font-weight: bold;

text-decoration:none;

}

Change the above to this:

td.headerNavigation a {

color:#fff;

font-weight: bold;

text-decoration:none;

}

td.headerNavigation a:visited, td.headerNavigation a:hover {

color: <<<of your choice>>>

}

Or you can split the above two to make the color difference between visited and hover

rommany · October 26, 2007

Thank you, that worked great, i keeped the a:visited as it was and just added the td.headerNavigation a:hover { bit.

Many thanks

Dave

LooInSpain · October 26, 2007

no problem, let me know when the site is finished so i can take a look

cleverflo · October 30, 2007

Hi,

I'm having kind of the same problem:

The colours of my links differ from page to page. It doesn't make sense. For example, on my privacy page, the links on my left column show as underlined if they have already been visited, but they show not underlined on my index page. My advanced search page is ok, so is my shopping cart page.

It seems the problem is on my information pages (privacy, conditions, etc...)

I would like the link to stay the normal colour even if they have been clicked on already.

I have amended both stylesheets. (in catalog/ and catalog/includes) nothing works.

But it's weird that the colour of the links doesn't change on the my account page for example but they do on the privacy page. The class must be already defined somewhere?

It's driving me mad. I've now spent over 5 hours trying to sort that out!

Pleaaaaaaaase help!

Florence

cleverflo · October 30, 2007

Hi,

I'm having kind of the same problem:

The colours of my links differ from page to page. It doesn't make sense. For example, on my privacy page, the links on my left column show as underlined if they have already been visited, but they show not underlined on my index page. My advanced search page is ok, so is my shopping cart page.

It seems the problem is on my information pages (privacy, conditions, etc...)

I would like the link to stay the normal colour even if they have been clicked on already.

I have amended both stylesheets. (in catalog/ and catalog/includes) nothing works.

But it's weird that the colour of the links doesn't change on the my account page for example but they do on the privacy page. The class must be already defined somewhere?

It's driving me mad. I've now spent over 5 hours trying to sort that out!

Pleaaaaaaaase help!

Florence

I've found it! At last!

It's because I'm using html files for the information (privacy, conditions) so separate classes are automatically created in those files.

Florence

Need my custom made text to change colour when hover over in nav

Recommended Posts

rommany

LooInSpain

nextprevious

rommany

LooInSpain

rommany

LooInSpain

cleverflo

cleverflo

Archived

Browse

Activity