YUI Library Home

YUI Library Examples: Color Picker Control: Skinning Example

Color Picker Control: Skinning Example

The purpose of this example is to call out explicitly the CSS used to create the look and feel of the Color Picker Control so that you may more easily modify it in your own implementations. In the description below, the full CSS for Color Picker is displayed.

  • R
  • G
  • B
  • H °
  • S %
  • V %
  • FF
  • FF
  • FF
#

The Color Picker Control and the YUI Sam 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. 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.

The Color Picker Control is a skinned control whose CSS is entirely presentational; that is, the Color Picker has no "core" CSS but only a skin-level CSS. The CSS for the default YUI Sam Skin is displayed below. To modify the presentation of your Color Picker instance, add rules that override those you see here or use this CSS block as a starting point for creating your own custom Color Picker skin.

1/*
2Copyright (c) 2007, Yahoo! Inc. All rights reserved.
3Code licensed under the BSD License:
4http://developer.yahoo.net/yui/license.txt
5version: 2.7.0*/ 
6
7.yui-picker-panel { 
8    background: #e3e3e3
9    border-color: #888
10} 
11
12.yui-picker-panel .hd { 
13    background-color:#ccc; 
14    font-size:100%
15    line-height:100%
16    border:1px solid #e3e3e3
17    font-weight:bold
18    overflow:hidden
19    padding6px
20    color: #000
21} 
22
23.yui-picker-panel .bd { 
24    background: #e8e8e8
25    margin1px
26    height200px
27} 
28
29.yui-picker-panel .ft { 
30    background: #e8e8e8
31    margin1px
32    padding1px
33             /*
34    text-align: center;
35    */ 
36} 
37
38.yui-picker { 
39    positionrelative
40} 
41
42.yui-picker-hue-thumb { cursor:defaultwidth:18pxheight:18px;  
43top-8px
44left-2px
45    z-index9position:absolute} 
46.yui-picker-hue-bg {-moz-outlinenoneoutline:0px none
47    position:absoluteleft:200pxheight:183pxwidth:14px
48    background:url(hue_bg.png) no-repeat;  
49    top:4px;  
50} 
51
52.yui-picker-bg { 
53    -moz-outlinenone;  
54    outline:0px none;  
55    position:absolute;  
56    top:4px
57    left:4px;  
58    height:182px;  
59    width:182px;  
60    background-color:#F00;  
61    background-imageurl(picker_mask.png); 
62}  
63
64*html .yui-picker-bg { 
65    background-imagenone
66    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../../build/colorpicker/assets/picker_mask.png'sizingMethod='scale'); 
67} 
68
69
70.yui-picker-mask { position:absolutez-index1top:0pxleft:0px}  
71
72.yui-picker-thumb { cursor:defaultwidth:11pxheight:11pxz-index9position:absolute;  
73    top:-4pxleft:-4px} 
74
75.yui-picker-swatch { position:absoluteleft:240pxtop:4pxheight:60px
76    width:55pxborder:1px solid #888} 
77.yui-picker-websafe-swatch { position:absoluteleft:304pxtop:4px
78    height:24pxwidth:24pxborder:1px solid #888} 
79
80.yui-picker-controls { position:absolutetop72pxleft:226pxfont:1em monospace;} 
81.yui-picker-controls .hd { backgroundtransparentborder-width0px !important;} 
82.yui-picker-controls .bd { height100pxborder-width0px !important;} 
83.yui-picker-controls ul {float:left;padding:0 2px 0 0;margin:0
84.yui-picker-controls li {padding:2px;margin:0;list-style:none;} 
85.yui-picker-controls input {  
86    font-size0.85em
87    width2.4em
88} 
89.yui-picker-hex-controls {  
90    clearboth;  
91    padding2px
92} 
93.yui-picker-hex-controls input {  
94    width4.6em
95} 
96
97.yui-picker-controls a { 
98    font1em arial,helvetica,clean,sans-serif; 
99    display:block
100    *display:inline-block/* IE */ 
101    padding0
102    color: #000
103 
104} 
view plain | print | ?

Configuration for This Example

You can load the necessary JavaScript and CSS for this example from Yahoo's servers. Click here to load the YUI Dependency Configurator with all of this example's dependencies preconfigured.

Copyright © 2009 Yahoo! Inc. All rights reserved.

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