YUI Library Home

YUI Library Examples: Container Family: Skinning a Panel with Custom CSS: Advanced

Container Family: Skinning a Panel with Custom CSS: Advanced

In this example, we move beyond the basic skinning steps demonstrated in the introductory skinning example and show more advanced techniques with multiple styled Panel Control instances on the same page. Use the buttons below to show and hide the styled panels.

Skinning Panel: Beyond the Basics

Panels can be skinned using only CSS, and a bit of extra markup. In the previous Skinning Tutorial, we covered the basics of skinning Panels using CSS.

In this tutorial, we will create two Panels — one skinned to look like a Windows XP window, and one that looks like the Mac OS X Aqua style. First, let's look at the markup structure that will serve as the framework for our newly skinned Panels. You'll notice that a few additional elements have been added to the header and footer. The classes of these elements — "tl", "tr", "br" and "bl" — represent each of the corner images that will be applied to the XP skin. The Aqua skin will be built from script (not based on existing markup) using the same structure, although the rounded corners will only be applied to the top corners. The script and markup for the two skinned Panels are listed below:

1YAHOO.example.container.panel2.setHeader("<div class='tl'></div><span>Panel #2 from Script</span><div class='tr'></div>"); 
2YAHOO.example.container.panel2.setBody("This is a dynamically generated Panel."); 
3YAHOO.example.container.panel2.setFooter("<span>End of Panel #2</span>"); 
view plain | print | ?
1<div id="panel1"
2    <div class="hd"><div class="tl"></div><span>Panel #1 from Markup</span><div class="tr"></div></div
3    <div class="bd">This is a Panel that was marked up in the document.</div> 
4    <div class="ft"><div class="bl"></div><span>End of Panel #1</span><div class="br"></div></div
5</div> 
view plain | print | ?

The skinning of these Panels is achieved using CSS definitions. As with the basic skinning example, we'll start with container/assets/container-core.css as our base set of CSS rules, instead of container/assets/skins/sam/container.css, so that we don't have to reset the additional style properties which are applied to implement Sam Skin.

In this tutorial, we will use id selectors in our CSS definitions to specify which Panel should receive each skin. Most of the styles consist of background images that are applied to various pieces of the Panels. The styles are defined below:

XP Panel Skin CSS

1/* XP Panel Skin CSS */ 
2 
3/* Skin default elements */ 
4#panel1_c.yui-panel-container.shadow .underlay { 
5    left:3px
6    right:-3px
7    top:3px
8    bottom:-3px
9    position:absolute
10    background-color:#000
11    opacity:0.12
12    filter:alpha(opacity=12); 
13} 
14 
15/* Apply the border to the right side */ 
16#panel1.yui-panel { 
17    border:none
18    overflow:visible
19    background:transparent url(assets/img/xp-brdr-rt.gif) no-repeat top right
20} 
21 
22/* Style the close icon */ 
23#panel1.yui-panel .container-close { 
24    position:absolute
25    top:5px
26    right:8px
27    height:21px
28    width:21px
29    background:url(assets/img/xp-close.gif) no-repeat
30       z-index:1
31} 
32 
33/* Style the header with its associated corners */ 
34#panel1.yui-panel .hd { 
35    padding:0
36    border:none
37    background:url(assets/img/xp-hd.gif) repeat-x
38    color:#FFF; 
39    height:30px
40    margin-left:8px
41    margin-right:8px
42    text-align:left
43    vertical-align:middle
44    overflow:visible
45} 
46 
47/* Style the body with the left border */ 
48#panel1.yui-panel .bd { 
49    overflow:hidden
50    padding:10px
51    border:none
52    background:#FFF url(assets/img/xp-brdr-lt.gif) repeat-y;  
53    margin:0 4px 0 0
54} 
55 
56/* Style the footer with the bottom corner images */ 
57#panel1.yui-panel .ft { 
58    background:url(assets/img/xp-ft.gif) repeat-x
59    font-size:11px
60    height:26px
61    padding:0px 10px
62    border:none 
63} 
64 
65/* Skin custom elements */ 
66#panel1.yui-panel .hd span { 
67    line-height:30px
68    vertical-align:middle
69    font-weight:bold
70} 
71#panel1.yui-panel .hd .tl { 
72    width:8px
73    height:29px
74    top:1px
75    left:0
76    background:url(assets/img/xp-tl.gif) no-repeat
77    position:absolute
78} 
79#panel1.yui-panel .hd .tr { 
80    width:8px
81    height:29px
82    top:1px
83    right:0
84    background:url(assets/img/xp-tr.gif) no-repeat;  
85    position:absolute
86} 
87
88#panel1.yui-panel .ft span { 
89    line-height:22px
90    vertical-align:middle
91} 
92#panel1.yui-panel .ft .bl { 
93    width:8px
94    height:26px
95    bottom:0
96    left:0
97    background:url(assets/img/xp-bl.gif) no-repeat
98    position:absolute
99} 
100#panel1.yui-panel .ft .br { 
101    width:8px
102    height:26px
103    bottom:0
104    right:0
105    background:url(assets/img/xp-br.gif) no-repeat
106    position:absolute
107} 
view plain | print | ?

Aqua Panel Skin CSS

1/* Aqua Panel Skin CSS */ 
2 
3/* Skin default Panel elements */ 
4#panel2_c.yui-panel-container.shadow .underlay { 
5    position:absolute
6    background-color:#000
7    opacity:0.12
8    filter:alpha(opacity=12); 
9    left:3px
10    right:-3px
11    bottom:-3px
12    top:3px
13} 
14#panel2.yui-panel { 
15    border:none
16    overflow:visible
17    background-color:transparent
18} 
19 
20/* Apply styles to the close icon to anchor it to the left side of the header */ 
21#panel2.yui-panel .container-close { 
22    position:absolute
23    top:3px
24    left:4px
25    height:18px
26    width:17px
27    background:url(assets/img/aqua-hd-close.gif) no-repeat
28       z-index:1
29} 
30/* span:hover not supported on IE6 */ 
31#panel2.yui-panel .container-close:hover { 
32    background:url(assets/img/aqua-hd-close-over.gif) no-repeat
33} 
34 
35/* Style the header and apply the rounded corners, center the text */ 
36#panel2.yui-panel .hd { 
37    padding:0
38    border:none
39    background:url(assets/img/aqua-hd-bg.gif) repeat-x
40    color:#000
41    height:22px
42    margin-left:7px
43    margin-right:7px
44    text-align:center
45    overflow:visible
46} 
47/* Style the body and footer */ 
48#panel2.yui-panel .bd { 
49    overflow:hidden
50    padding:4px
51    border:1px solid #aeaeae; 
52    background-color:#FFF; 
53} 
54#panel2.yui-panel .ft { 
55    font-size:75%
56    color:#666
57    padding:2px
58    overflow:hidden
59    border:1px solid #aeaeae; 
60    border-top:none
61    background-color:#dfdfdf; 
62} 
63 
64/* Skin custom elements */ 
65#panel2.yui-panel .hd span { 
66    vertical-align:middle
67    line-height:22px
68    font-weight:bold
69} 
70#panel2.yui-panel .hd .tl { 
71    width:7px
72    height:22px
73    top:0
74    left:0
75    background:url(assets/img/aqua-hd-lt.gif) no-repeat
76    position:absolute
77} 
78#panel2.yui-panel .hd .tr { 
79    width:7px
80    height:22px
81    top:0
82    right:0
83    background:url(assets/img/aqua-hd-rt.gif) no-repeat
84    position:absolute
85} 
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.

Container Family Examples:

More Container Family Resources:

Copyright © 2011 Yahoo! Inc. All rights reserved.

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