Yahoo! Developer Network Home - Help

YUI Library Examples: Calendar Control: Skinning The Calendar

Calendar Control: Skinning The Calendar

The Calendar and CalendarGroup controls are provided with an implementation of the default YUI skin called "Sam Skin". This example highlights the CSS you'll need to modify to customize Calendar's default "Sam Skin" implementation to develop a custom look and feel.

Customizing Calendar's Skin

YUI controls that support "skinning" generally have two levels of CSS: one that is core to the control and its functioning and another that is purely presentational.

Both the Skin and Core CSS for Calendar/CalendarGroup is show below. To modify the presentation of your Calendar instance, add rules that override those you see here or use this CSS block as a starting point for creating your own custom skin.

As a rule, you should avoid changes that affect the core CSS for a skinned control; rather, you should modify the presentation of a control by building upon (or replacing) its skin-level CSS. For more information about the skinning of YUI controls, please review our skinning reference article which goes into much more detail about how skins are created and how they operate.

Skin CSS

Core CSS

Copyright © 2008 Yahoo! Inc. All rights reserved.

Privacy Policy - Terms of Service - Copyright Policy - Job Openings