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:

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

Aqua Panel Skin CSS

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 © 2009 Yahoo! Inc. All rights reserved.

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