YUI Library Home

YUI Library Examples: ProfilerViewer Control: Skinning the ProfilerViewer Control

ProfilerViewer Control: Skinning the ProfilerViewer Control

ProfilerViewer's 'skin' is provided via a combination of CSS and other style information passed via JavaScript to the Flash-based Charts Control. This example helps you understand where to start if you want to customize the look and feel of a ProfilerViewer implementation.

The Sam Skin UI for the ProfilerViewer Control:

The Sam Skin UI for the ProfilerViewer Control

Skinning the ProfilerViewer Control

ProfilerViewer's YUI Sam Skin CSS

The bulk of the ProfilerViewer's UI is designated by the skin CSS file for YUI Sam Skin. That file defines:

  1. The header/launch bar and its background;
  2. The launcher's buttons (show/hide, refresh data);
  3. The busy indicator;
  4. The ProfilerViewer console's body color;
  5. The look and feel of the ProfilerViewer's DataTable (via style rules on top of the DataTable's Sam Skin CSS file);
  6. The style rules for minimizing the console.

Here is the full CSS for ProfilerViewer's YUI Sam Skin treatment. You can modify these rules or replace this file entirely in customizing ProfilerViewer.

Styling the Charts component of ProfilerViewer

The other source of style information is that which controls the YUI Charts visualization. The chart is styled globally with the chartStyle attribute of ProfilerViewer. The default chartStyle definition is as follows:

The series definitions of the chart are styled via the chartSeriesDefinitions attribute. The default value for that attribute is as follows:

To fully skin the chart, you would want to modify these style objects and pass them as custom attributes when you instantiate your ProfilerViewer console. For example, to change the background color of the chart component to full black, you would do the following:

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.

Copyright © 2011 Yahoo! Inc. All rights reserved.

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