Home/ Questions/Q 792873
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-14T22:03:41+00:00

I’m using YUI 2’s calendar in YUI 3. How does it load Sam’s skin

  • 0

I’m using YUI 2’s calendar in YUI 3. How does it load Sam’s skin CSS?

I didn’t manually include it (though it seems like I should so the user can download it in the one request I make to the combo loader for css). Strangely, I don’t see it being downloaded nor do I see it in the JS files themselves. I must be overlooking it. This is how I’m loading the CSS and JS now:

<head>
    ...
    <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/combo?3.1.0/build/cssreset/reset.css&amp;3.1.0/build/cssfonts/fonts.css&amp;3.1.0/build/cssbase/base.css"/>
    ...
</head>
...
<!--and at the end of the body tag:-->
<script type="text/javascript" src="http://yui.yahooapis.com/combo?3.1.1/build/yui/yui-min.js&amp;3.1.1/build/oop/oop-min.js&amp;3.1.1/build/event-custom/event-custom-base-min.js&amp;3.1.1/build/event/event-base-min.js&amp;3.1.1/build/json/json-parse-min.js&amp;3.1.1/build/querystring/querystring-stringify-simple-min.js&amp;3.1.1/build/io/io-base-min.js&amp;3.1.1/build/dom/dom-base-min.js&amp;3.1.1/build/dom/selector-native-min.js&amp;3.1.1/build/dom/selector-css2-min.js&amp;3.1.1/build/node/node-base-min.js&amp;3.1.1/build/node/node-style-min.js&amp;3.1.1/build/stylesheet/stylesheet-min.js&amp;2in3.1/2.8.0/build/yui2-calendar/yui2-calendar-min.js&amp;2in3.1/2.8.0/build/yui2-yahoo/yui2-yahoo-min.js&amp;2in3.1/2.8.0/build/yui2-dom/yui2-dom-min.js&amp;2in3.1/2.8.0/build/yui2-event/yui2-event-min.js"></script>
<script type="text/javascript">//<![CDATA[
YUI().use('yui2-calendar', function(Y) {
    var YAHOO = Y.YUI2;
    var cal = new YAHOO.widget.Calendar("cal",{navigator:true,mindate:'1/1/2000');
    cal.render();  
    // ...

Edit:
I want to make a few minor changes to the default sam skin. What is the best way to do that?

I answered this part of my question. If I wrap the calendar in an extra div, then specifying CSS rules which include that div as part of the selector makes the rule more specific so the browser uses it over Sam’s skin. Rough example:

<style type="text/css">
.magic .yui-skin-sam .yui-calendar td.calcell {
    height: 10em;
    width: 15em;
}
</style>
    ...
    <div class="magic">
        <div class="yui-skin-sam">
            <div id="cal"></div>
        </div>
    </div>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    http://yuilibrary.com/forum/viewtopic.php?f=93&t=2269&p=7608&hilit=insertbefore#p7608

    That thread contains information about using the insertBefore configuration, which allows you to ensure that the YUI CSS is inserted above your style overrides in the CSS cascade.

    -Eric

    • 0