Yahoo! Developer Network Home - Help

YUI Library Examples: Layout Manager (beta): Skinning a Layout

Layout Manager (beta): Skinning a Layout

Layout skinning is done via CSS. The Layout Manager comes with a default skin, but you can extend or override this as needed.

Layout Managers core CSS file

The Layout Manager's base class is a starting point for skinning a Layout. Include this file and use the skin file as a reference for your new skin (you can view the full contents of the base class here).

Sam's skin CSS file

Once you have the base class in place, you can proceed to customize the look and feel of your Layout by working with the skinning file. Starting with the Sam Skin version below is generally the fastest approach, allowing you to customize just those parts of the skin that will make your implementation resonate with the overall design of your application.

1/* Remove the dotted border on the resize proxy */ 
2.yui-skin-sam .yui-layout .yui-resize-proxy { 
3    bordernone
4} 
5/* During resize, hide the handles */ 
6.yui-skin-sam .yui-layout .yui-resize-resizing .yui-resize-handle { 
7    opacity0
8    filteralpha(opacity=0); 
9} 
10/* Style the div inside the resize proxy */ 
11.yui-skin-sam .yui-layout .yui-resize-proxy div { 
12    positionabsolute
13    border1px solid #808080
14    background-color: #EDF5FF; 
15} 
16/* Set the color of the Active resize handle */ 
17.yui-skin-sam .yui-layout .yui-resize .yui-resize-handle-active { 
18    background-color: #EDF5FF; 
19} 
20/* Styles for the left handle */ 
21.yui-skin-sam .yui-layout .yui-resize-proxy .yui-layout-handle-l { 
22    width5px
23    height100%
24    top0
25    left0
26} 
27/* Styles for the right handle */ 
28.yui-skin-sam .yui-layout .yui-resize-proxy .yui-layout-handle-r { 
29    width5px
30    top0
31    right0
32    height100%
33} 
34/* Styles for the bottom handle */ 
35.yui-skin-sam .yui-layout .yui-resize-proxy .yui-layout-handle-b { 
36    width100%
37    bottom0
38    left0
39    height5px
40} 
41/* Styles for the top handle */ 
42.yui-skin-sam .yui-layout .yui-resize-proxy .yui-layout-handle-t { 
43    width100%
44    top0
45    left0
46    height5px
47} 
48 
49/* Left Collapse button */ 
50.yui-skin-sam .yui-layout .yui-layout-unit-left div.yui-layout-hd .collapse { 
51    backgroundtransparent url(layout_sprite.png) no-repeat -20px -160px
52    border1px solid #808080
53} 
54/* Left Collapsed Expand Button */ 
55.yui-skin-sam .yui-layout .yui-layout-clip-left .collapse { 
56    backgroundtransparent url(layout_sprite.png) no-repeat -20px -140px
57    border1px solid #808080
58} 
59/* Right Collapse Button */ 
60.yui-skin-sam .yui-layout .yui-layout-unit-right div.yui-layout-hd .collapse { 
61    backgroundtransparent url(layout_sprite.png) no-repeat -20px -200px
62    border1px solid #808080
63} 
64/* Right Collapsed Expand Button */ 
65.yui-skin-sam .yui-layout .yui-layout-clip-right .collapse { 
66    backgroundtransparent url(layout_sprite.png) no-repeat -20px -120px
67    border1px solid #808080
68} 
69/* Bottom Collapse Button */ 
70.yui-skin-sam .yui-layout .yui-layout-unit-bottom div.yui-layout-hd .collapse { 
71    backgroundtransparent url(layout_sprite.png) no-repeat -20px -260px
72    border1px solid #808080
73} 
74/* Bottom Collapsed Expand Button */ 
75.yui-skin-sam .yui-layout .yui-layout-clip-bottom .collapse { 
76    backgroundtransparent url(layout_sprite.png) no-repeat -20px -180px
77    border1px solid #808080
78} 
79/* Top Collapse Button */ 
80.yui-skin-sam .yui-layout .yui-layout-unit-top div.yui-layout-hd .collapse { 
81    backgroundtransparent url(layout_sprite.png) no-repeat -20px -220px
82    border1px solid #808080
83} 
84/* Top Collapsed Expand Button */ 
85.yui-skin-sam .yui-layout .yui-layout-clip-top .collapse { 
86    backgroundtransparent url(layout_sprite.png) no-repeat -20px -240px
87    border1px solid #808080
88} 
89/* Close Button */ 
90.yui-skin-sam .yui-layout .yui-layout-unit div.yui-layout-hd .close { 
91    backgroundtransparent url(layout_sprite.png) no-repeat -20px -100px
92    border1px solid #808080
93} 
94 
95/* Give the header a blue background */ 
96.yui-skin-sam .yui-layout .yui-layout-hd { 
97    background:url(sprite.png) repeat-x 0 -1400px
98    border1px solid #808080
99} 
100/* Set the background color */ 
101.yui-skin-sam .yui-layout { 
102    background-color: #EDF5FF; 
103} 
104/* Style the text in the header */ 
105.yui-skin-sam .yui-layout .yui-layout-unit div.yui-layout-hd h2 { 
106    font-weightbold
107    color: #fff; 
108    padding3px
109} 
110/* Style the body */ 
111.yui-skin-sam .yui-layout .yui-layout-unit div.yui-layout-bd { 
112    border1px solid #808080
113    border-bottomnone
114    border-topnone
115    *border-bottom-width0
116    *border-top-width0
117    background-color: #f2f2f2
118    text-alignleft
119} 
120/* Add a border to the bottom of the body because there is no footer */ 
121.yui-skin-sam .yui-layout .yui-layout-unit div.yui-layout-bd-noft { 
122    border-bottom1px solid #808080
123} 
124/* Add a border to the top of the body because there is no header */ 
125.yui-skin-sam .yui-layout .yui-layout-unit div.yui-layout-bd-nohd { 
126    border-top1px solid #808080
127} 
128 
129/* Style the Clip */ 
130.yui-skin-sam .yui-layout .yui-layout-clip { 
131    positionabsolute
132    height20px
133    background-color: #EDF5FF; 
134    displaynone
135    border1px solid #808080
136} 
137/* Style the footer */ 
138.yui-skin-sam .yui-layout div.yui-layout-ft { 
139    border1px solid #808080
140    border-topnone
141    *border-top-width0
142    background-color: #f2f2f2
143} 
144 
145/* Remove the color from the resize handle */ 
146.yui-skin-sam .yui-layout-unit .yui-resize-handle { 
147    background-colortransparent
148} 
149/* Reposition the handles */ 
150.yui-skin-sam .yui-layout-unit .yui-resize-handle-r { 
151    right0
152    top0
153    background-imagenone
154} 
155.yui-skin-sam .yui-layout-unit .yui-resize-handle-l { 
156    left0
157    top0
158    background-imagenone
159} 
160.yui-skin-sam .yui-layout-unit .yui-resize-handle-b { 
161    right0
162    bottom0
163    background-imagenone
164} 
165.yui-skin-sam .yui-layout-unit .yui-resize-handle-t { 
166    right0
167    top0
168    background-imagenone
169} 
170/* Add the gripper */ 
171.yui-skin-sam .yui-layout-unit .yui-resize-handle-r .yui-layout-resize-knob, 
172.yui-skin-sam .yui-layout-unit .yui-resize-handle-l .yui-layout-resize-knob { 
173    positionabsolute
174    height16px
175    width6px
176    top45%
177    left0px
178    backgroundtransparent url(layout_sprite.png) no-repeat 0 -5px
179} 
180/* Add the gripper */ 
181.yui-skin-sam .yui-layout-unit .yui-resize-handle-t .yui-layout-resize-knob, 
182.yui-skin-sam .yui-layout-unit .yui-resize-handle-b .yui-layout-resize-knob { 
183    positionabsolute
184    height6px
185    width16px
186    left45%
187    backgroundtransparent url(layout_sprite.png) no-repeat -20px 0
188} 
view plain | print | ?

Copyright © 2008 Yahoo! Inc. All rights reserved.

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