7a6a57d5b030103b5b64157208acbecbfe4118b1Jenny Donnelly<style scoped>

7a6a57d5b030103b5b64157208acbecbfe4118b1Jenny Donnelly #demo .light {

7a6a57d5b030103b5b64157208acbecbfe4118b1Jenny Donnelly padding: 1em;

7a6a57d5b030103b5b64157208acbecbfe4118b1Jenny Donnelly }

7a6a57d5b030103b5b64157208acbecbfe4118b1Jenny Donnelly #demo .dark {

7a6a57d5b030103b5b64157208acbecbfe4118b1Jenny Donnelly background: #000;

7a6a57d5b030103b5b64157208acbecbfe4118b1Jenny Donnelly padding: 1em;

7a6a57d5b030103b5b64157208acbecbfe4118b1Jenny Donnelly }

7a6a57d5b030103b5b64157208acbecbfe4118b1Jenny Donnelly #demo {

7a6a57d5b030103b5b64157208acbecbfe4118b1Jenny Donnelly overflow: hidden;

7a6a57d5b030103b5b64157208acbecbfe4118b1Jenny Donnelly }

7a6a57d5b030103b5b64157208acbecbfe4118b1Jenny Donnelly /* needed for the chromeless version */

7a6a57d5b030103b5b64157208acbecbfe4118b1Jenny Donnelly #demo h4 {

7a6a57d5b030103b5b64157208acbecbfe4118b1Jenny Donnelly font-weight: normal;

7a6a57d5b030103b5b64157208acbecbfe4118b1Jenny Donnelly color: #FF8800;

7a6a57d5b030103b5b64157208acbecbfe4118b1Jenny Donnelly }

7a6a57d5b030103b5b64157208acbecbfe4118b1Jenny Donnelly #demo h5 {

7a6a57d5b030103b5b64157208acbecbfe4118b1Jenny Donnelly margin-top: 1em;

7a6a57d5b030103b5b64157208acbecbfe4118b1Jenny Donnelly text-transform: uppercase;

7a6a57d5b030103b5b64157208acbecbfe4118b1Jenny Donnelly color: #666;

7a6a57d5b030103b5b64157208acbecbfe4118b1Jenny Donnelly border-bottom: 1px solid #D9D9D9;

7a6a57d5b030103b5b64157208acbecbfe4118b1Jenny Donnelly }

7a6a57d5b030103b5b64157208acbecbfe4118b1Jenny Donnelly</style>

7a6a57d5b030103b5b64157208acbecbfe4118b1Jenny Donnelly

7a6a57d5b030103b5b64157208acbecbfe4118b1Jenny Donnelly<div class="intro">

7a6a57d5b030103b5b64157208acbecbfe4118b1Jenny Donnelly <p>This example demonstrates the alternate skins available for Slider, and how to apply them.</p>

7a6a57d5b030103b5b64157208acbecbfe4118b1Jenny Donnelly</div>

7a6a57d5b030103b5b64157208acbecbfe4118b1Jenny Donnelly

7a6a57d5b030103b5b64157208acbecbfe4118b1Jenny Donnelly<div class="example">

b6e6ef638648fe8a5e9072663c2e47e092da6ec4Luke Smith {{>slider-skin-markup}}

b6e6ef638648fe8a5e9072663c2e47e092da6ec4Luke Smith {{>slider-skin-js}}

7a6a57d5b030103b5b64157208acbecbfe4118b1Jenny Donnelly</div>

7a6a57d5b030103b5b64157208acbecbfe4118b1Jenny Donnelly

7a6a57d5b030103b5b64157208acbecbfe4118b1Jenny Donnelly<h3>Specify the skin in the YUI config</h3>

b6e6ef638648fe8a5e9072663c2e47e092da6ec4Luke Smith<p>

b6e6ef638648fe8a5e9072663c2e47e092da6ec4Luke Smith To access alternate skins for a component, specify an override in the YUI

59343bceb540ed5208265bea4b8d041efba13585Luke Smith configuration. The "slider" module is actually a virtual rollup of other

59343bceb540ed5208265bea4b8d041efba13585Luke Smith modules, so you need to override the skin for "slider-base".

b6e6ef638648fe8a5e9072663c2e47e092da6ec4Luke Smith</p>

7a6a57d5b030103b5b64157208acbecbfe4118b1Jenny Donnelly

59343bceb540ed5208265bea4b8d041efba13585Luke Smith<p>Then just `use("slider")` as you normally would.</p>

59343bceb540ed5208265bea4b8d041efba13585Luke Smith

7a6a57d5b030103b5b64157208acbecbfe4118b1Jenny Donnelly```

7a6a57d5b030103b5b64157208acbecbfe4118b1Jenny DonnellyYUI({

7a6a57d5b030103b5b64157208acbecbfe4118b1Jenny Donnelly skin: {

7a6a57d5b030103b5b64157208acbecbfe4118b1Jenny Donnelly overrides: {

59343bceb540ed5208265bea4b8d041efba13585Luke Smith "slider-base": [ "capsule" ]

7a6a57d5b030103b5b64157208acbecbfe4118b1Jenny Donnelly }

7a6a57d5b030103b5b64157208acbecbfe4118b1Jenny Donnelly }

7a6a57d5b030103b5b64157208acbecbfe4118b1Jenny Donnelly}).use( "slider", function (Y) {

7a6a57d5b030103b5b64157208acbecbfe4118b1Jenny Donnelly ...

7a6a57d5b030103b5b64157208acbecbfe4118b1Jenny Donnelly});

7a6a57d5b030103b5b64157208acbecbfe4118b1Jenny Donnelly```

7a6a57d5b030103b5b64157208acbecbfe4118b1Jenny Donnelly

7a6a57d5b030103b5b64157208acbecbfe4118b1Jenny Donnelly<h3>Use the appropriate skin class in the markup</h3>

59343bceb540ed5208265bea4b8d041efba13585Luke Smith<p>

59343bceb540ed5208265bea4b8d041efba13585Luke Smith The default skin is the Sam skin. Style YUI components with this skin by

59343bceb540ed5208265bea4b8d041efba13585Luke Smith including the class `yui3-skin-sam` in the class list of an element that

59343bceb540ed5208265bea4b8d041efba13585Luke Smith contains the component. Typically, setting `<body class="yui3-skin-sam">`

59343bceb540ed5208265bea4b8d041efba13585Luke Smith is good enough.

59343bceb540ed5208265bea4b8d041efba13585Luke Smith</p>

7a6a57d5b030103b5b64157208acbecbfe4118b1Jenny Donnelly

59343bceb540ed5208265bea4b8d041efba13585Luke Smith<p>

59343bceb540ed5208265bea4b8d041efba13585Luke Smith When overriding the default skin, use a different class on the containing

59343bceb540ed5208265bea4b8d041efba13585Luke Smith element.

59343bceb540ed5208265bea4b8d041efba13585Luke Smith</p>

7a6a57d5b030103b5b64157208acbecbfe4118b1Jenny Donnelly

7a6a57d5b030103b5b64157208acbecbfe4118b1Jenny Donnelly```

7a6a57d5b030103b5b64157208acbecbfe4118b1Jenny Donnelly<div class="yui3-skin-round-dark">

7a6a57d5b030103b5b64157208acbecbfe4118b1Jenny Donnelly <h5>Round skin (dark)</h5>

7a6a57d5b030103b5b64157208acbecbfe4118b1Jenny Donnelly <div id="round_dark"><!-- Slider rendered here --></div>

7a6a57d5b030103b5b64157208acbecbfe4118b1Jenny Donnelly</div>

7a6a57d5b030103b5b64157208acbecbfe4118b1Jenny Donnelly```

7a6a57d5b030103b5b64157208acbecbfe4118b1Jenny Donnelly

7a6a57d5b030103b5b64157208acbecbfe4118b1Jenny Donnelly<h3 id="full_code_listing">Full Code Listing</h3>

7a6a57d5b030103b5b64157208acbecbfe4118b1Jenny Donnelly<p>This is the full code listing for this example.</p>

7a6a57d5b030103b5b64157208acbecbfe4118b1Jenny Donnelly

7a6a57d5b030103b5b64157208acbecbfe4118b1Jenny Donnelly<h4>Markup</h4>

7a6a57d5b030103b5b64157208acbecbfe4118b1Jenny Donnelly```

b6e6ef638648fe8a5e9072663c2e47e092da6ec4Luke Smith{{>slider-skin-markup}}

7a6a57d5b030103b5b64157208acbecbfe4118b1Jenny Donnelly```

7a6a57d5b030103b5b64157208acbecbfe4118b1Jenny Donnelly

7a6a57d5b030103b5b64157208acbecbfe4118b1Jenny Donnelly<h4>JavaScript</h4>

7a6a57d5b030103b5b64157208acbecbfe4118b1Jenny Donnelly```

b6e6ef638648fe8a5e9072663c2e47e092da6ec4Luke Smith{{>slider-skin-js}}

7a6a57d5b030103b5b64157208acbecbfe4118b1Jenny Donnelly```

7a6a57d5b030103b5b64157208acbecbfe4118b1Jenny Donnelly