Skip navigation
rjtyrell
Currently Being Moderated

Spry - Hoover colour is blue how do I change it?

Jan 21, 2010 5:19 AM

Hi,

 

I have built my first Spry menu, only a basic one.  When I preview the hoover colour is blue, how do I change this?, the HTML is

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
</head>

 

<body>
<ul id="MenuBar1" class="MenuBarHorizontal">
  <li><a class="MenuBarItemSubmenu" href="#">Latest News</a>
    <ul>
      <li><a href="#">News</a></li>
      <li><a href="#">Match Reports</a></li>
      <li><a href="#">Fixtures / Results</a></li>
      <li><a href="#">Match Photos</a></li>
      <li><a href="#">League Table</a></li>
    </ul>
  </li>
  <li><a href="#" class="MenuBarItemSubmenu">The Club</a>
    <ul>
      <li><a href="#">Honours</a></li>
      <li><a href="#">Non Official Forum</a></li>
      <li><a href="#">Directions</a></li>
      <li><a href="#">HFC Contacts</a></li>
    </ul>
  </li>
  <li><a href="#" class="MenuBarItemSubmenu">1st Team</a>
    <ul>
      <li><a href="#">Match Reports</a></li>
      <li><a href="#">Match Photos</a></li>
      <li><a href="#">Fixtures / Results</a></li>
      <li><a href="#">League Table</a></li>
      <li><a href="#">Appearences</a></li>
      <li><a href="#">Stats</a></li>
    </ul>
  </li>
  <li><a href="#" class="MenuBarItemSubmenu">Reserve Team</a>
    <ul>
      <li><a href="#">Match Reports</a></li>
      <li><a href="#">Match Photos</a></li>
      <li><a href="#">Fixtures / Results</a></li>
      <li><a href="#">League Table</a></li>
      <li><a href="#">Stats</a></li>
    </ul>
  </li>
  <li><a href="#" class="MenuBarItemSubmenu">Fundrising</a>
    <ul>
      <li><a href="#">Chance</a></li>
      <li><a href="#">Easy Fundrising</a></li>
    </ul>
  </li>
  <li><a href="#" class="MenuBarItemSubmenu">Sponsorship</a>
    <ul>
      <li><a href="#">Opportunities</a></li>
      <li><a href="#">Catalogue</a></li>
    </ul>
  </li>
</ul>
<script type="text/javascript">
<!--
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
//-->
</script>
</body>
</html>

 
Replies
  • Currently Being Moderated
    Jan 21, 2010 7:16 AM   in reply to rjtyrell

    The answer lies in the CSS.  Look these classes: ul.MenuBarVertical a:hover, ul.MenuBarHorizontal a:hover  for text, ul.MenuBarVertical a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemHover for menu items, ul.MenuBarVertical a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover for submenu items.  Just look for the hex colors and change them.  If there are multiple, experiment and see what it manipulates =)

     
    |
    Mark as:
  • Currently Being Moderated
    Jan 21, 2010 7:38 AM   in reply to rjtyrell

    All you really need to know about customizing a Spry menu bar: http://foundationphp.com/tutorials/sprymenu/customize1.php.


     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points