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

Logger Control Examples:

More Logger Control Resources:

All YUI 2.x users should review the YUI 2.8.2 security bulletin, which discusses a vulnerability present in YUI 2.4.0-2.8.1.