Yahoo! Developer Network Home - Help

YDN Site Search

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

Click here to log a simple message.

## 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 */

### Logger Control Examples:

- Basic Logging
- Configuring LogReader
- Using LogWriter
- Logger Integration with YUI Components
- Skinning Model
- Complex Application (included with examples for Layout Manager (beta))

### More Logger Control Resources:

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

Copyright © 2008 Yahoo! Inc. All rights reserved.

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