YUI recommends YUI3.

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

This documentation is no longer maintained.

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

More Logger Control Resources:

Copyright © 2013 Yahoo! Inc. All rights reserved.

Privacy Policy - Copyright Policy - Job Openings