YUI Calendar: Skinning and 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:28 UTC
Read the original article Hit count: 371

Filed under:

skinning

I'm using YUI 2's calendar in YUI 3. I want to make a few minor changes to the default sam skin. What is the best way to do that?

Also, 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?).

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();  
    // ...

The main problem I'm having is that it seems to dynamically load the Sam's skin, so any CSS I specify in my stylesheet or in the <head> section seem to be overridden. I can modify the style by getting the nodes and using YUI's Node.setStyle() method, but this doesn't seem like the best way to do things.

Note: The script does include more than I need for just YUI 2's calendar, but that's because I use YUI 3 for other things irrelevant to this question.

Developer IT

YUI Calendar: Skinning and CSS - Developer IT

YUI Calendar: Skinning and 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