Loading ...
Sorry, an error occurred while loading the content.

YUI Calendar 2.3.0 not getting styles?

Expand Messages
  • treborhudson
    Hello, I m building out a site that is using the calendars. I was using 2.2.2 but since 2.3.0 came out and has a nicer look, I m switching over. I can t get
    Message 1 of 3 , Aug 1, 2007
    • 0 Attachment
      Hello,

      I'm building out a site that is using the calendars. I was using
      2.2.2 but since 2.3.0 came out and has a nicer look, I'm switching
      over. I can't get the CSS to style the calendar, though. I've boiled
      it down to the bare minimum and I'm still not getting it to work. Can
      someone take a look at my test file and spot anything wrong? This
      code is taken from the YUI example page almost directly...

      Thanks,
      Rob


      <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
      "http://www.w3.org/TR/html4/loose.dtd">
      <html lang="en">
      <head>
      <script type="text/javascript"
      src="http://yui.yahooapis.com/2.3.0/build/yahoo-dom-event/yahoo-dom-event.js"></script>

      <script type="text/javascript"
      src="http://yui.yahooapis.com/2.3.0/build/calendar/calendar-min.js"></script>
      <link rel="stylesheet" type="text/css"
      href="http://yui.yahooapis.com/2.3.0/build/calendar/assets/skins/sam/calendar.css">
      </head>
      <body>

      <div id="cal1Container"></div>

      <script>
      YAHOO.namespace("example.calendar");
      YAHOO.example.calendar.init = function() {
      YAHOO.example.calendar.cal1 = new
      YAHOO.widget.Calendar("cal1","cal1Container");
      YAHOO.example.calendar.cal1.render();
      }
      YAHOO.util.Event.onDOMReady(YAHOO.example.calendar.init);
      </script>

      </body>
      </html>
    • Satyen Desai
      Hi Rob, Changing to should do it. The Skinning CSS is only applied to widgets inside a container with the Skin Class applied
      Message 2 of 3 , Aug 1, 2007
      • 0 Attachment
        Hi Rob,
        Changing <body> to <body class="yui-skin-sam"> should do it.
         
        The Skinning CSS is only applied to widgets inside a container with the Skin Class applied (in this case "yui-skin-sam")
         
        See the following link for more details about YUI's skinning architecture: http://developer.yahoo.com/yui/articles/skinning/
         
        NOTE: The class doesn't have to be applied to BODY. It could be applied to any other parent of the Calendar Container DIV.
         
        I do believe this is worth highlighting on the Calendar landing page, and we'll look into getting that updated at the next possible opportunity.
         
        Hope that helps,
        Satyen

        ----- Original Message ----
        From: treborhudson <treborhudson@...>
        To: ydn-javascript@yahoogroups.com
        Sent: Wednesday, August 1, 2007 4:09:49 PM
        Subject: [ydn-javascript] YUI Calendar 2.3.0 not getting styles?

        Hello,

        I'm building out a site that is using the calendars. I was using
        2.2.2 but since 2.3.0 came out and has a nicer look, I'm switching
        over. I can't get the CSS to style the calendar, though. I've boiled
        it down to the bare minimum and I'm still not getting it to work. Can
        someone take a look at my test file and spot anything wrong? This
        code is taken from the YUI example page almost directly...

        Thanks,
        Rob

        <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional/ /EN"
        "http://www.w3. org/TR/html4/ loose.dtd">
        <html lang="en">
        <head>
        <script type="text/javascri pt"
        src="http://yui.yahooapi s.com/2.3. 0/build/yahoo- dom-event/ yahoo-dom- event.js"></script>

        <script type="text/javascri pt"
        src="http://yui.yahooapi s.com/2.3. 0/build/calendar /calendar- min.js"></script>
        <link rel="stylesheet" type="text/css"
        href="http://yui.yahooapi s.com/2.3. 0/build/calendar /assets/skins/ sam/calendar. css">
        </head>
        <body>

        <div id="cal1Container" ></div>

        <script>
        YAHOO.namespace( "example. calendar" );
        YAHOO.example. calendar. init = function() {
        YAHOO.example. calendar. cal1 = new
        YAHOO.widget. Calendar( "cal1","cal1Cont ainer");
        YAHOO.example. calendar. cal1.render( );
        }
        YAHOO.util.Event. onDOMReady( YAHOO.example. calendar. init);
        </script>

        </body>
        </html>




        Be a better Globetrotter. Get better travel answers from someone who knows.
        Yahoo! Answers - Check it out.
      • Nate Koechley
        Hi Rob, In order to preserve backward compatibility, you must actively opt in to the new skin. It s easy. Simply add a class, yui-skin-sam , to any node
        Message 3 of 3 , Aug 1, 2007
        • 0 Attachment
          Hi Rob,
           
          In order to preserve backward compatibility, you must actively opt in to the new skin. It's easy. Simply add a class, "yui-skin-sam", to any node containing the calendar. Unless you want to make this choice on a widget by widget level, I recommend added it to your body element.
           
          <body class="yui-skin-sam">
           
          For more information please refer to the new skinning article:
           
          Thanks,
          Nate


          From: ydn-javascript@yahoogroups.com [mailto:ydn-javascript@yahoogroups.com] On Behalf Of treborhudson
          Sent: Wednesday, August 01, 2007 4:10 PM
          To: ydn-javascript@yahoogroups.com
          Subject: [ydn-javascript] YUI Calendar 2.3.0 not getting styles?

          Hello,

          I'm building out a site that is using the calendars. I was using
          2.2.2 but since 2.3.0 came out and has a nicer look, I'm switching
          over. I can't get the CSS to style the calendar, though. I've boiled
          it down to the bare minimum and I'm still not getting it to work. Can
          someone take a look at my test file and spot anything wrong? This
          code is taken from the YUI example page almost directly...

          Thanks,
          Rob

          <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional/ /EN"
          "http://www.w3. org/TR/html4/ loose.dtd">
          <html lang="en">
          <head>
          <script type="text/javascri pt"
          src="http://yui.yahooapi s.com/2.3. 0/build/yahoo- dom-event/ yahoo-dom- event.js"></script>

          <script type="text/javascri pt"
          src="http://yui.yahooapi s.com/2.3. 0/build/calendar /calendar- min.js"></script>
          <link rel="stylesheet" type="text/css"
          href="http://yui.yahooapi s.com/2.3. 0/build/calendar /assets/skins/ sam/calendar. css">
          </head>
          <body>

          <div id="cal1Container" ></div>

          <script>
          YAHOO.namespace( "example. calendar" );
          YAHOO.example. calendar. init = function() {
          YAHOO.example. calendar. cal1 = new
          YAHOO.widget. Calendar( "cal1","cal1Cont ainer");
          YAHOO.example. calendar. cal1.render( );
          }
          YAHOO.util.Event. onDOMReady( YAHOO.example. calendar. init);
          </script>

          </body>
          </html>

        Your message has been successfully submitted and would be delivered to recipients shortly.