YUI Library Examples: Logger Control: Skinning Model

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:

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.

YUI Library Examples: Logger Control: Skinning Model

Sample Code

Configuration for This Example

Logger Control Examples:

More Logger Control Resources: