Skip navigation
SandraTaraLynn
Currently Being Moderated

How do I re-style the 'Menu' button in Yahoo! Menu Popup from the Widget Gallery by Zizzer Zazzer

Jun 12, 2013 2:50 PM

Tags: #dreamweaver #css_help #widget_menu

Ive re-styled everything else by editing the CSS in the head of the doument, and in both CSS files. I dont find anywhere that this button is mentioned in any CSS. It is outside the OAWidget Div. This menu is using the Sam Skin. Here is the code:

 

<!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>

<link href="Includes/scripts/YUI/2.8.2r1/build/fonts/fonts-min.css" rel="stylesheet" type="text/css" />

<link href="Includes/scripts/YUI/2.8.2r1/build/menu/assets/skins/sam/menu.c ss" rel="stylesheet" type="text/css" />

<script src="Includes/scripts/YUI/2.8.2r1/build/yahoo-dom-event/yahoo-dom-eve nt.js" type="text/javascript"></script>

<script src="Includes/scripts/YUI/2.8.2r1/build/container/container_core-min. js" type="text/javascript"></script>

<script src="Includes/scripts/YUI/2.8.2r1/build/menu/menu-min.js" type="text/javascript"></script>

<script type="text/xml">

<!--

<oa:widgets>

  <oa:widget wid="2489526" binding="#OAWidget" />

</oa:widgets>

-->

</script>

</head>

 

<body>

 

<style>

.yuimenu .button {

    background-color: #cda577;

    border: none;

}

 

  .yui-skin-sam .yui-menu-shadow-visible {

      background-color:#3d214b;

      opacity:0.5;

    }

   

    .yui-menu-shadow-visible {

        top:3px;

        right:-4px;

        left:3px;

        bottom:-4px;

    }

   

    .yuimenu {

        top: 40px;

        left: 10px;

    }

   

    .yui-skin-sam .yuimenuitem-selected {

        background-color:#cda577;

    }       

   

    .yui-skin-sam .yuimenuitemlabel {

        color:#000000;

    }

   

    .yui-skin-sam .yuimenuitemlabel-disabled {

        color:#666699;

    }

   

    .yui-skin-sam .yuimenu {

        font-size:14px;

    }

   

    .yui-skin-sam .yuimenu .bd {

        background-color: #f4e7d3;

        border: none;

    }   

  </style>

  <button id="OAWidget_show" type="button">Menu</button>

  <div id="OAWidget" class="yuimenu">

    <div class="bd">

      <ul class="first-of-type">

      <li class="yuimenuitem"> <a class="yuimenuitemlabel" href="#">Home</a></li>

      <li class="yuimenuitem"> <a class="yuimenuitemlabel" href="#">About</a></li>

        <li class="yuimenuitem"> <a class="yuimenuitemlabel" href="#">Calendar</a>

          <div id="submenu1" class="yuimenu">

            <div class="bd">

              <ul>

                <li class="yuimenuitem"><a class="yuimenuitemlabel" href="#">This Year</a></li>

                <li class="yuimenuitem"><a class="yuimenuitemlabel" href="#">Last year</a></li>

              </ul>

            </div><!-- end .bd -->

          </div><!-- end .submenu1 -->

        </li><!-- end Calendar -->

        <li class="yuimenuitem"> <a class="yuimenuitemlabel" href="#">Contact</a></li>

        <li class="yuimenuitem"> <a class="yuimenuitemlabel" href="#">Public Relations</a>

          <div id="submenu2" class="yuimenu">

            <div class="bd">

              <ul>

                <li class="yuimenuitem"><a class="yuimenuitemlabel" href="#">Information</a></li>

                <li class="yuimenuitem"><a class="yuimenuitemlabel" href="#">Public Recognition</a></li>

              </ul>

            </div><!-- end .bd -->

          </div><!-- end .submenu2 -->

        </li>

        <li class="yuimenuitem"> <a class="yuimenuitemlabel" href="#">Youth Outreach</a></li>

        <li class="yuimenuitem"> <a class="yuimenuitemlabel" href="#">Households</a>

          <div id="submenu3" class="yuimenu">

            <div class="bd">

              <ul>

                <li class="yuimenuitem"><a class="yuimenuitemlabel" href="#">Govenors</a></li>

                <li class="yuimenuitem"><a class="yuimenuitemlabel" href="#">Nobles</a></li>

                <li class="yuimenuitem"><a class="yuimenuitemlabel" href="#">Ladies in Waiting</a></li>

                <li class="yuimenuitem"><a class="yuimenuitemlabel" href="#">Royal Guard</a></li>

                <li class="yuimenuitem"><a class="yuimenuitemlabel" href="#">Highlanders</a></li>

              </ul>

            </div><!-- end .bd -->

          </div><!-- end .submenu3 -->

        </li>

        <li class="yuimenuitem"> <a class="yuimenuitemlabel" href="#">Guild Houses</a>

          <div id="submenu4" class="yuimenu">

            <div class="bd">

              <ul>

                <li class="yuimenuitem"><a class="yuimenuitemlabel" href="#">Antioch</a></li>

                <li class="yuimenuitem"><a class="yuimenuitemlabel" href="#">East Bay</a></li>

                <li class="yuimenuitem"><a class="yuimenuitemlabel" href="#">Lowlands</a></li>

              </ul>

            </div><!-- end .bd -->

          </div><!-- end .submenu4 -->

        </li>

        <li class="yuimenuitem"> <a class="yuimenuitemlabel" href="#">Membership</a>

          <div id="submenu5" class="yuimenu">

            <div class="bd">

              <ul>

                <li class="yuimenuitem"><a class="yuimenuitemlabel" href="#">Information</a></li>

                <li class="yuimenuitem"><a class="yuimenuitemlabel" href="#">Application Package</a></li>

              </ul>

            </div><!-- end .bd -->

          </div><!-- end .submenu5 -->

        </li>

        <li class="yuimenuitem"> <a class="yuimenuitemlabel" href="#">Gallery</a>

          <div id="submenu6" class="yuimenu">

            <div class="bd">

              <ul>

                <li class="yuimenuitem"><a class="yuimenuitemlabel" href="#">Photos</a></li>

                <li class="yuimenuitem"><a class="yuimenuitemlabel" href="#">Videos</a></li>

              </ul>

            </div><!-- end .bd -->

          </div><!-- end .submenu6 -->

        </li>

      <li class="yuimenuitem"> <a class="yuimenuitemlabel" href="#">Mercantile</a></li>

      <li class="yuimenuitem"> <a class="yuimenuitemlabel" href="#">Publications</a></li>

      <li class="yuimenuitem"> <a class="yuimenuitemlabel" href="#">In Memorium</a>

          <div id="submenu7" class="yuimenu">

            <div class="bd">

              <ul>

                <li class="yuimenuitem"><a class="yuimenuitemlabel" href="#">Linda Duncan</a></li>

                <li class="yuimenuitem"><a class="yuimenuitemlabel" href="#">Tony Damico</a></li>

              </ul>

            </div><!-- end .bd -->

          </div><!-- end .submenu7 -->

        </li>

      <li class="yuimenuitem"> <a class="yuimenuitemlabel" href="#">Guild Directory</a></li>

      <li class="yuimenuitem"> <a class="yuimenuitemlabel" href="#">Sponsors</a>

          <div id="submenu8" class="yuimenu">

            <div class="bd">

              <a href="http://www.ninahanphotography.com/" target="_blank"><img src="../Images/hanPhotography.gif" width="135" alt="Nina Han Photography"/></a>

                <br /><a href="http://www.ninahanphotography.com/" target="_blank">Nina Han Photography</a>

            </div><!-- end .bd -->

          </div><!-- end .submenu8 -->

        </li>

      </ul><!-- end .first-of-type -->

    </div><!-- end .bd -->

   

   

 

  </div><!-- end .OAWidget -->

  <script type="text/javascript">

// BeginOAWidget_Instance_2489526: #OAWidget

 

(function() {

  var cn = document.body.className.toString();

  if (cn.indexOf('yui-skin-sam') == -1) {

    document.body.className += " yui-skin-sam";

  }

})();

 

var initOAWidget = function() {

  // Create a YUI Menu and position the top left of the menu

  // to the bottom left of "Show Menu" button.

  var OAWidget = new YAHOO.widget.Menu("OAWidget",

      { fixedcenter: false,

      autosubmenudisplay: true,

      showdelay: 250, 

      hidedelay: 100,

      clicktohide: true,

      disabled: false

    });

 

  OAWidget.render();

 

  // See: http://developer.yahoo.com/yui/menu/ for more

  // information on Menu configurations and events.

  //

  // The YUI Menu API cheatsheet can be found at:

  // http://yuiblog.com/assets/pdf/cheatsheets/calendar.pdf

  OAWidget.getItem(1).cfg.setProperty("disabled", true);

 

  YAHOO.util.Event.on("OAWidget_show", "click", OAWidget.show, null, OAWidget);

};

 

// Create the YUI Menu when the HTML document is usable.

YAHOO.util.Event.onDOMReady(initOAWidget);

 

// EndOAWidget_Instance_2489526

  </script>

</body>

</html>

 
Replies
  • Currently Being Moderated
    Jun 12, 2013 3:59 PM   in reply to SandraTaraLynn

    I don't use Yahoo hosting or any of their services, so I'm completely in the dark about how they operate their web sites.

     

    I'm guessing the code for the menu is contained in this file:

    Includes/scripts/YUI/2.8.2r1/build/menu/assets/skins/sam/menu.css

     

    If you have access to it, you can edit it.  If you don't, you probably can't.

     

     

    Nancy O.


     
    |
    Mark as:
  • Currently Being Moderated
    Jun 12, 2013 5:55 PM   in reply to SandraTaraLynn

    Preview in Firefox or Chrome. 

    Right Click and select Inspect Elements to find the relevant div ID/classes used in your menus.

     

    Nancy O.

     
    |
    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