YUI Library Examples: Logger Control: Skinning Model

Sample Code

DOM Overview:


1	<div class="yui-log yui-log-container">
2	<div class="yui-log-hd">
3	<div class="yui-log-btns">
4	<input type="button" class="yui-log-button" value="Collapse">
5	</div>
6	<h4>Logger Console</h4>
7	</div>
8	<div class="yui-log-bd">
9	<pre class="yui-log-verbose">
10	<p><span class="[category]">CATEGORY</span> Message.</p>
11	</pre>
12	...
13	</div>
14	<div class="yui-log-ft">
15	<div class="yui-log-btns">
16	<input type="button" class="yui-log-button" value="Pause">
17	<input type="button" class="yui-log-button" value="Clear">
18	</div>
19	<div class="yui-log-categoryfilters">
20	<span class="yui-log-filtergrp">
21	<input type="checkbox" class="yui-log-filter-[category]">
22	<label class="[category]">category</label>
23	</span>
24	...
25	</div>
26	<div class="yui-log-sourcefilters">
27	<span class="yui-log-filtergrp">
28	<input type="checkbox" class="yui-log-filter[source]">
29	<label class="[source]">source</label>
30	</span>
31	...
32	</div>
33	</div>
34	</div>
	view plain \| print \| ?

<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:


1	/* none */
	view plain \| print \| ?

Skin CSS:


1	/* logger default styles */
2	/* default width: 31em */
3	/* default font-size 77% */
4	.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; }
5
6	/* for containers built from scratch */
7	.yui-skin-sam .yui-log-container { position:absolute;top:1em;right:1em; }
8
9	/* buttons */
10	.yui-skin-sam .yui-log input {
11	margin:0;padding:0;
12	font-family:arial;
13	font-size:100%;
14	font-weight:normal;
15	}
16	.yui-skin-sam .yui-log .yui-log-btns { position:relative;float:right;bottom:.25em; }
17
18	/* header */
19	.yui-skin-sam .yui-log .yui-log-hd { margin-top:1em;padding:.5em;background-color:#575757; }
20	.yui-skin-sam .yui-log .yui-log-hd h4 { margin:0;padding:0;font-size:108%;font-weight:bold;color:#FFF; }
21
22	/* body */
23
24	.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*/
25	.yui-skin-sam .yui-log p { margin:1px;padding:.1em; }
26	.yui-skin-sam .yui-log pre { margin:0;padding:0; }
27
28	/* for pre to respect newlines yet wrap long lines */
29	/* http://www.longren.org/2006/09/27/wrapping-text-inside-pre-tags/ */
30	.yui-skin-sam .yui-log pre.yui-log-verbose {
31	white-space: pre-wrap; /* css-3 */
32	white-space: -moz-pre-wrap !important; /* Mozilla, since 1999 */
33	white-space: -pre-wrap; /* Opera 4-6 */
34	white-space: -o-pre-wrap; /* Opera 7 */
35	word-wrap: break-word; /* Internet Explorer 5.5+ */
36	}
37
38	/* footer */
39	.yui-skin-sam .yui-log .yui-log-ft { margin-top:.5em; }
40	.yui-skin-sam .yui-log .yui-log-ft .yui-log-categoryfilters { }
41	.yui-skin-sam .yui-log .yui-log-ft .yui-log-sourcefilters { width:100%;border-top:1px solid #575757;margin-top:.75em;padding-top:.75em; }
42	.yui-skin-sam .yui-log .yui-log-filtergrp { margin-right:.5em; }
43
44	/* logs */
45	.yui-skin-sam .yui-log .info { background-color:#A7CC25; } /* A7CC25 green */
46	.yui-skin-sam .yui-log .warn { background-color:#F58516; } /* F58516 orange */
47	.yui-skin-sam .yui-log .error { background-color:#E32F0B; } /* E32F0B red */
48	.yui-skin-sam .yui-log .time { background-color:#A6C9D7; } /* A6C9D7 blue */
49	.yui-skin-sam .yui-log .window { background-color:#F2E886; } /* F2E886 tan */
	view plain \| print \| ?

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

YUI Library Examples: Logger Control: Skinning Model

Sample Code

Logger Control Examples:

More Logger Control Resources:

Logger Console