YUI Library Home

YUI Library Examples: Resize Utility: Skinning the Resize Utility

Resize Utility: Skinning the Resize Utility

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

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse justo nibh, pharetra at, adipiscing ullamcorper.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse justo nibh, pharetra at, adipiscing ullamcorper.

Resize Utility's core CSS file

The Resize Utility's base class is a starting point for skinning the Resize Utility. 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 Resize Utility by working with the skinnning 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/* Give the handle a background color */ 
2.yui-skin-sam .yui-resize .yui-resize-handle { 
3    background-color: #F2F2F2; 
4} 
5/* Give the active handle a different color */ 
6.yui-skin-sam .yui-resize .yui-resize-handle-active { 
7    background-color: #7D98B8; 
8    zoom: 1; 
9} 
10.yui-skin-sam .yui-resize .yui-resize-handle-l, 
11.yui-skin-sam .yui-resize .yui-resize-handle-r, 
12.yui-skin-sam .yui-resize .yui-resize-handle-l-active, 
13.yui-skin-sam .yui-resize .yui-resize-handle-r-active { 
14    height: 100%; 
15} 
16/* Give a border to the 8-way knob style handles */ 
17.yui-skin-sam .yui-resize-knob .yui-resize-handle { 
18    border: 1px solid #808080; 
19} 
20/* Show the active handle when hovered */ 
21.yui-skin-sam .yui-resize-hover .yui-resize-handle-active { 
22    opacity: 1; 
23    filter: alpha(opacity=100); 
24} 
25 
26/* Style the resize proxy */ 
27.yui-skin-sam .yui-resize-proxy { 
28    border: 1px dashed #426FD9; 
29} 
30 
31/* Style the status box similar to a tooltip */ 
32.yui-skin-sam .yui-resize-status { 
33    border: 1px solid #A6982B; 
34    border-top: 1px solid #D4C237; 
35    background-color: #FFEE69; 
36    color: #000; 
37} 
38 
39 
40/* Style the content of the status box */ 
41.yui-skin-sam .yui-resize-status strong, .yui-skin-sam .yui-resize-status em { 
42    float: left; 
43    display: block; 
44    clear: both; 
45    padding: 1px; 
46    text-align: center; 
47} 
48 
49/* Setup the gripper */ 
50.yui-skin-sam .yui-resize .yui-resize-handle-inner-r, 
51.yui-skin-sam .yui-resize .yui-resize-handle-inner-l { 
52    background: transparent url( layout_sprite.png) no-repeat 0 -5px; 
53    height: 16px; 
54    width: 5px; 
55    position: absolute; 
56    top: 45%; 
57} 
58 
59/* Setup the gripper */ 
60.yui-skin-sam .yui-resize .yui-resize-handle-inner-t, 
61.yui-skin-sam .yui-resize .yui-resize-handle-inner-b { 
62    background: transparent url(layout_sprite.png) no-repeat -20px 0; 
63    height: 5px; 
64    width: 16px; 
65    position: absolute; 
66    left: 50%; 
67} 
68 
69/* Bottom Right Gripper */ 
70.yui-skin-sam .yui-resize .yui-resize-handle-br { 
71    background-image: url( layout_sprite.png ); 
72    background-repeat: no-repeat; 
73    background-position: -22px -62px; 
74} 
75 
76/* Top Right Gripper */ 
77.yui-skin-sam .yui-resize .yui-resize-handle-tr { 
78    background-image: url( layout_sprite.png ); 
79    background-repeat: no-repeat; 
80    background-position: -22px -42px; 
81} 
82 
83/* Top Left Gripper */ 
84.yui-skin-sam .yui-resize .yui-resize-handle-tl { 
85    background-image: url( layout_sprite.png ); 
86    background-repeat: no-repeat; 
87    background-position: -22px -82px; 
88} 
89 
90/* Bottom Left Gripper */ 
91.yui-skin-sam .yui-resize .yui-resize-handle-bl { 
92    background-image: url( layout_sprite.png ); 
93    background-repeat: no-repeat; 
94    background-position: -22px -23px; 
95} 
96 
97/* Remove the background image from the 8-way knobs */ 
98.yui-skin-sam .yui-resize-knob .yui-resize-handle-t, 
99.yui-skin-sam .yui-resize-knob .yui-resize-handle-r, 
100.yui-skin-sam .yui-resize-knob .yui-resize-handle-b, 
101.yui-skin-sam .yui-resize-knob .yui-resize-handle-l, 
102.yui-skin-sam .yui-resize-knob .yui-resize-handle-tl, 
103.yui-skin-sam .yui-resize-knob .yui-resize-handle-tr, 
104.yui-skin-sam .yui-resize-knob .yui-resize-handle-bl, 
105.yui-skin-sam .yui-resize-knob .yui-resize-handle-br, 
106.yui-skin-sam .yui-resize-knob .yui-resize-handle-inner-t, 
107.yui-skin-sam .yui-resize-knob .yui-resize-handle-inner-r, 
108.yui-skin-sam .yui-resize-knob .yui-resize-handle-inner-b, 
109.yui-skin-sam .yui-resize-knob .yui-resize-handle-inner-l, 
110.yui-skin-sam .yui-resize-knob .yui-resize-handle-inner-tl, 
111.yui-skin-sam .yui-resize-knob .yui-resize-handle-inner-tr, 
112.yui-skin-sam .yui-resize-knob .yui-resize-handle-inner-bl, 
113.yui-skin-sam .yui-resize-knob .yui-resize-handle-inner-br { 
114    background-image: none; 
115} 
116 
117.yui-skin-sam .yui-resize-knob .yui-resize-handle-l, 
118.yui-skin-sam .yui-resize-knob .yui-resize-handle-r, 
119.yui-skin-sam .yui-resize-knob .yui-resize-handle-l-active, 
120.yui-skin-sam .yui-resize-knob .yui-resize-handle-r-active { 
121    height: 6px; 
122    width: 6px; 
123} 
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.

More Resize Utility Resources:

Copyright © 2009 Yahoo! Inc. All rights reserved.

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