Logger Widget :: Customizing LogReader

Customized LogReader Example

This LogReader implementation has been modified by changing some default CSS styles as well as modifying some properties through the constructor. In this example, the LogReader is placed in a fixed position at the bottom right of the screen. The height of each of the consoles has been made smaller, the font size has been bumped up, and the log messages of the second LogReader has been made more compact (i.e., the line break within each message has been removed).

(not supported in Opera, Safari)

Hide All LogReaders || Show All LogReaders

Disable Output to Firebug || Enable Output to Firebug

Sample Code

CSS:


    /* font size is controlled here: default 77% */

    #yui-log {position:absolute;bottom:1em;right:1em;font-size:100%;}

    /* width is controlled here: default 31em */

    .yui-log {padding:1em;width:31em;background-color:#AAA;border:1px solid black;font-family:monospace;z-index:9000;}

    .yui-log p {margin:1px;padding:.1em;}

    .yui-log button {font-family:monospace;}

    .yui-log .yui-log-hd {position:relative;margin-top:1em;padding:.5em;background-color:#575757;color:#FFF;}

    /* height is controlled here: default 20em*/

    .yui-log .yui-log-bd {position:relative;background-color:#FFF;border:1px solid gray;overflow:auto;width:100%;height:10em;}

    .yui-log .yui-log-ft {position:relative;margin-top:.5em;margin-bottom:1em;}

    .yui-log .yui-log-btns {position:relative;float:right;bottom:.25em;}

    .yui-log .info {background-color:#A7CC25;} /* A7CC25 green */

    .yui-log .warn {background-color:#F58516;} /* F58516 orange */

    .yui-log .error {background-color:#E32F0B;} /* E32F0B red */

    .yui-log .time {background-color:#A6C9D7;} /* A6C9D7 blue */

    .yui-log .window {background-color:#F2E886;} /* F2E886 tan */

    

Markup:


    <!-- Logger begins -->

    <div id="yui-log" class="yui-log"></div>

    <!-- Logger ends -->

    

JavaScript:


    myLogReader1 = new YAHOO.widget.LogReader("yui-log");

    myLogReader2 = new YAHOO.widget.LogReader("yui-log",{compactOutput: true});