Skip navigation
Currently Being Moderated

Spry menu's: changing default blue colour in rollover/ hover state and the white keyline borders

Aug 24, 2009 10:35 AM

Going quietly nuts!  New to this.  On a spry menu. How do I change the default colour blue of the box in rollover [hover] mode? And also remove the white keyline around it.

Finally, how do I change the width of the drop down boxes.  I know how to change the width of entire menu but not the boxes in side it.

Really grateful of any help and restoration of my sanity!

Attachments:
 
Replies
  • Currently Being Moderated
    Aug 25, 2009 8:23 AM   in reply to bex43

    The answer (and comments that help to figure it out!) is the in the CSS file, SpryMenuBarHorizontal.css. I will show the style rules that govern hover states and drop-down widths:

     

    @charset "UTF-8";

     

    /* SpryMenuBarHorizontal.css - version 0.6 - Spry Pre-Release 1.6.1 */

     

    /* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */

     

    /********************************************************************* **********

     

    LAYOUT INFORMATION: describes box model, positioning, z-order

     

    ********************************************************************* **********/

    ...

     

    /* Menu item containers, position children relative to this container and are a fixed width */

    ul.MenuBarHorizontal li

    {

         margin: 0;

         padding: 0;

         list-style-type: none;

         font-size: 100%;

         position: relative;

         text-align: left;

         cursor: pointer;

         width: 8em;

         float: left;

    }

     

    /* Submenus should appear below their parent (top: 0) with a higher z-index, but they are initially off the left side of the screen (-1000em) */

    ul.MenuBarHorizontal ul

    {

         margin: 0;

         padding: 0;

         list-style-type: none;

         font-size: 100%;

         z-index: 1020;

         cursor: default;

         width: 8.2em;

         position: absolute;

         left: -1000em;

    }

    ...

     

    /* Menu item containers are same fixed width as parent */

    ul.MenuBarHorizontal ul li

    {

         width: 8.2em;

    }

     

    ...

     

    /********************************************************************* **********

     

    DESIGN INFORMATION: describes color scheme, borders, fonts

     

    ********************************************************************* **********/

    ...

     

    /* Menu items that have mouse over or focus have a blue background and white text */

    ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus

    {

         background-color: #33C;

         color: #FFF;

    }

    /* Menu items that are open with submenus are set to MenuBarItemHover with a blue background and white text */

     

    ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible

    {

         background-color: #33C;

         color: #FFF;

    }

     

     

    And there it is, highlighted in red. Don't get rid of the other styles...I just omitted them so it would be clear which ones you need to change to achieve your 'look.'

     

    Check back if this is unclear.

     

    Beth

     
    |
    Mark as:
  • Currently Being Moderated
    Aug 28, 2009 7:10 AM   in reply to bex43

    You're welcome!

    Beth

     
    |
    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