YUI Calendar: how does it load the Sam's Skin CSS?

Posted by dound on Stack Overflow See other posts from Stack Overflow or by dound
Published on 2010-05-09T18:23:33Z Indexed on 2010/05/09 18:48 UTC
Read the original article Hit count: 651

Filed under:

skinning

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>

Developer IT

YUI Calendar: how does it load the Sam's Skin CSS? - Developer IT

YUI Calendar: how does it load the Sam's Skin CSS?

yui

JavaScript

css

skinning

Related posts about yui

How to manually check a YUI radio "button".

How to change the datasource on a YUI datagrid after creation

What is the JQuery equivalent of YUI buttons?

Always keep aspect ratio when resizing images in YUI Rich text editor

Rich Text Editor (YUI Simple Text Editor used) not sending data to next page

Related posts about JavaScript

CHAT ROOMs 7 by 6

Integrating JavaScript Unit Tests with Visual Studio

Has Javascript developed beyond what it was originally designed to do?

PHP, javascript, single quote problems with IE when passing variable from ajax post to javascript fu

Javascript in XSL that is loaded by Javascript

Categories cloud