YUI Library Examples: Color Picker Control: Skinning Example

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	/*
2	Copyright (c) 2007, Yahoo! Inc. All rights reserved.
3	Code licensed under the BSD License:
4	http://developer.yahoo.net/yui/license.txt
5	version: 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	padding: 6px;
20	color: #000;
21	}
22
23	.yui-picker-panel .bd {
24	background: #e8e8e8;
25	margin: 1px;
26	height: 200px;
27	}
28
29	.yui-picker-panel .ft {
30	background: #e8e8e8;
31	margin: 1px;
32	padding: 1px;
33	/*
34	text-align: center;
35	*/
36	}
37
38	.yui-picker {
39	position: relative;
40	}
41
42	.yui-picker-hue-thumb { cursor:default; width:18px; height:18px;
43	top: -8px;
44	left: -2px;
45	z-index: 9; position:absolute; }
46	.yui-picker-hue-bg {-moz-outline: none; outline:0px none;
47	position:absolute; left:200px; height:183px; width:14px;
48	background:url(hue_bg.png) no-repeat;
49	top:4px;
50	}
51
52	.yui-picker-bg {
53	-moz-outline: none;
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-image: url(picker_mask.png);
62	}
63
64	*html .yui-picker-bg {
65	background-image: none;
66	filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../../build/colorpicker/assets/picker_mask.png', sizingMethod='scale');
67	}
68
69
70	.yui-picker-mask { position:absolute; z-index: 1; top:0px; left:0px; }
71
72	.yui-picker-thumb { cursor:default; width:11px; height:11px; z-index: 9; position:absolute;
73	top:-4px; left:-4px; }
74
75	.yui-picker-swatch { position:absolute; left:240px; top:4px; height:60px;
76	width:55px; border:1px solid #888; }
77	.yui-picker-websafe-swatch { position:absolute; left:304px; top:4px;
78	height:24px; width:24px; border:1px solid #888; }
79
80	.yui-picker-controls { position:absolute; top: 72px; left:226px; font:1em monospace;}
81	.yui-picker-controls .hd { background: transparent; border-width: 0px !important;}
82	.yui-picker-controls .bd { height: 100px; border-width: 0px !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-size: 0.85em;
87	width: 2.4em;
88	}
89	.yui-picker-hex-controls {
90	clear: both;
91	padding: 2px;
92	}
93	.yui-picker-hex-controls input {
94	width: 4.6em;
95	}
96
97	.yui-picker-controls a {
98	font: 1em arial,helvetica,clean,sans-serif;
99	display:block;
100	display:inline-block; / IE */
101	padding: 0;
102	color: #000;
103
104	}
	view plain \| print \| ?

/*
Copyright (c) 2007, Yahoo! Inc. All rights reserved.
Code licensed under the BSD License:
http://developer.yahoo.net/yui/license.txt
version: 2.7.0*/

.yui-picker-panel {
    background: #e3e3e3;
    border-color: #888;
}

.yui-picker-panel .hd {
	background-color:#ccc;
	font-size:100%;
	line-height:100%;
	border:1px solid #e3e3e3;
	font-weight:bold;
	overflow:hidden;
	padding: 6px;
    color: #000;
}

.yui-picker-panel .bd {
    background: #e8e8e8;
    margin: 1px;
    height: 200px;
}

.yui-picker-panel .ft {
    background: #e8e8e8;
    margin: 1px;
    padding: 1px;
             /*
    text-align: center;
    */
}

.yui-picker {
    position: relative;
}

.yui-picker-hue-thumb { cursor:default; width:18px; height:18px; 
top: -8px;
left: -2px;
    z-index: 9; position:absolute; }
.yui-picker-hue-bg {-moz-outline: none; outline:0px none;
    position:absolute; left:200px; height:183px; width:14px;
    background:url(hue_bg.png) no-repeat; 
    top:4px; 
}

.yui-picker-bg {
    -moz-outline: none; 
    outline:0px none; 
    position:absolute; 
    top:4px;
    left:4px; 
    height:182px; 
    width:182px; 
    background-color:#F00; 
    background-image: url(picker_mask.png);
}

*html .yui-picker-bg {
    background-image: none;
    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../../build/colorpicker/assets/picker_mask.png', sizingMethod='scale');
}

.yui-picker-mask { position:absolute; z-index: 1; top:0px; left:0px; }

.yui-picker-thumb { cursor:default; width:11px; height:11px; z-index: 9; position:absolute; 
    top:-4px; left:-4px; }

.yui-picker-swatch { position:absolute; left:240px; top:4px; height:60px;
    width:55px; border:1px solid #888; }
.yui-picker-websafe-swatch { position:absolute; left:304px; top:4px;
    height:24px; width:24px; border:1px solid #888; }

.yui-picker-controls { position:absolute; top: 72px; left:226px; font:1em monospace;}
.yui-picker-controls .hd { background: transparent; border-width: 0px !important;}
.yui-picker-controls .bd { height: 100px; border-width: 0px !important;}
.yui-picker-controls ul {float:left;padding:0 2px 0 0;margin:0}
.yui-picker-controls li {padding:2px;margin:0;list-style:none;}
.yui-picker-controls input { 
    font-size: 0.85em;
    width: 2.4em;
}
.yui-picker-hex-controls { 
    clear: both; 
    padding: 2px;
}
.yui-picker-hex-controls input { 
    width: 4.6em;
}

.yui-picker-controls a {
    font: 1em arial,helvetica,clean,sans-serif;
    display:block;
    *display:inline-block; /* IE */
    padding: 0;
    color: #000;

}

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.

YUI Library Examples: Color Picker Control: Skinning Example

The Color Picker Control and the YUI Sam Skin

Configuration for This Example

Color Picker Control Examples:

More Color Picker Control Resources: