YUI Library Home

Site Search (YDN & YUIBlog):

# YUI Library Examples: Logger Control: Skinning Model

# Logger Control: Skinning Model

This example demonstrates the CSS applied to an implementation of the Logger control that uses the "Sam Skin". You can read more about the general approach to skinning YUI components in this in-depth article. Change any or all of the skin CSS for a more customized look and feel.

View example in new window.

## Sample Code

DOM Overview:

<div class="yui-log yui-log-container"> <div class="yui-log-hd"> <div class="yui-log-btns"> <input type="button" class="yui-log-button" value="Collapse"> </div> <h4>Logger Console</h4> </div> <div class="yui-log-bd"> <pre class="yui-log-verbose"> <p><span class="[category]">CATEGORY</span> Message.</p> </pre> ... </div> <div class="yui-log-ft"> <div class="yui-log-btns"> <input type="button" class="yui-log-button" value="Pause"> <input type="button" class="yui-log-button" value="Clear"> </div> <div class="yui-log-categoryfilters"> <span class="yui-log-filtergrp"> <input type="checkbox" class="yui-log-filter-[category]"> <label class="[category]">category</label> </span> ... </div> <div class="yui-log-sourcefilters"> <span class="yui-log-filtergrp"> <input type="checkbox" class="yui-log-filter[source]"> <label class="[source]">source</label> </span> ... </div> </div> </div>

Core CSS:

/* none */

Skin CSS:

/* logger default styles */ /* default width: 31em */ /* default font-size 77% */ .yui-skin-sam .yui-log { padding:1em;width:31em;background-color:#AAA;color:#000;border:1px solid black;font-family:monospace;font-size:77%;text-align:left;z-index:9000; } /* for containers built from scratch */ .yui-skin-sam .yui-log-container { position:absolute;top:1em;right:1em; } /* buttons */ .yui-skin-sam .yui-log input { margin:0;padding:0; font-family:arial; font-size:100%; font-weight:normal; } .yui-skin-sam .yui-log .yui-log-btns { position:relative;float:right;bottom:.25em; } /* header */ .yui-skin-sam .yui-log .yui-log-hd { margin-top:1em;padding:.5em;background-color:#575757; } .yui-skin-sam .yui-log .yui-log-hd h4 { margin:0;padding:0;font-size:108%;font-weight:bold;color:#FFF; } /* body */ .yui-skin-sam .yui-log .yui-log-bd { width:100%;height:20em;background-color:#FFF;border:1px solid gray;overflow:auto; } /* height is controlled here: default 20em*/ .yui-skin-sam .yui-log p { margin:1px;padding:.1em; } .yui-skin-sam .yui-log pre { margin:0;padding:0; } /* for pre to respect newlines yet wrap long lines */ /* http://www.longren.org/2006/09/27/wrapping-text-inside-pre-tags/ */ .yui-skin-sam .yui-log pre.yui-log-verbose { white-space: pre-wrap; /* css-3 */ white-space: -moz-pre-wrap !important; /* Mozilla, since 1999 */ white-space: -pre-wrap; /* Opera 4-6 */ white-space: -o-pre-wrap; /* Opera 7 */ word-wrap: break-word; /* Internet Explorer 5.5+ */ } /* footer */ .yui-skin-sam .yui-log .yui-log-ft { margin-top:.5em; } .yui-skin-sam .yui-log .yui-log-ft .yui-log-categoryfilters { } .yui-skin-sam .yui-log .yui-log-ft .yui-log-sourcefilters { width:100%;border-top:1px solid #575757;margin-top:.75em;padding-top:.75em; } .yui-skin-sam .yui-log .yui-log-filtergrp { margin-right:.5em; } /* logs */ .yui-skin-sam .yui-log .info { background-color:#A7CC25; } /* A7CC25 green */ .yui-skin-sam .yui-log .warn { background-color:#F58516; } /* F58516 orange */ .yui-skin-sam .yui-log .error { background-color:#E32F0B; } /* E32F0B red */ .yui-skin-sam .yui-log .time { background-color:#A6C9D7; } /* A6C9D7 blue */ .yui-skin-sam .yui-log .window { background-color:#F2E886; } /* F2E886 tan */

## 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.

### Logger Control Examples:

### More Logger Control Resources:

- User's Guide (external)
- API Documentation
- Cheat Sheet PDF (external)

Copyright © 2010 Yahoo! Inc. All rights reserved.

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