YUI recommends YUI 3.

YUI 2 has been deprecated since 2011. This site acts as an archive for files and documentation.

YUI Library Home

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.

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

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

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.

More Logger Control Resources:

Copyright © 2011 Yahoo! Inc. All rights reserved.

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