# Logger Widget :: Customizing LogReader UI

### Customizing LogReader

The UI of LogReader can be customized via certain properties and methods, as well as CSS classes. Please refer to the Sample Code section for details on how to achieve the following effects.

#### Example: Compact Ouput

Log a simple message

By default, log messages are printed to the console with a good deal of whitespace for better readability. In this example, verbose output has been disabled so each message gets output on a single line without wrapping.

#### Sample Code

<body> <div id="compact"></div> <script type="text/javascript"> var myCompact = new YAHOO.widget.LogReader("compact", {verboseOutput:false}); myCompact.setTitle("Compact Output"); </script> </body>

#### Example: Oldest On Top

Log a simple message

By default, new messages get prepended at the top of the console. In this example, new messages get appended at the bottom of the console.

#### Sample Code

<body> <div id="oldestOnTop"></div> <script type="text/javascript"> var myOldestOnTop = new YAHOO.widget.LogReader("oldestOnTop", {newestOnTop:false}); myOldestOnTop.setTitle("Oldest On Top"); </script> </body>

#### Example: Undraggable

Log a simple message

Although the Drag and Drop Utility is available on the page, draggability of this LogReader has been disabled.

#### Sample Code

<body> <div id="undraggable"></div> <script type="text/javascript"> var myUndraggable = new YAHOO.widget.LogReader("undraggable", {draggable:false}); myUndraggable.setTitle("Undraggable"); </script> </body>

#### Example: Filtered Output

Log a simple message

The first LogReader will show only global info messages. The second LogReader will only show info messages coming from the "LogReader" class.

#### Sample Code

<body> <div id="filtered"></div> <script type="text/javascript"> var myFiltered1 = new YAHOO.widget.LogReader("filtered"); var myFiltered2 = new YAHOO.widget.LogReader("filtered"); myFiltered1.hideCategory("warn"); myFiltered1.hideCategory("error"); myFiltered1.hideCategory("time"); myFiltered1.hideCategory("window"); myFiltered2.hideCategory("warn"); myFiltered2.hideCategory("error"); myFiltered2.hideCategory("time"); myFiltered2.hideCategory("window"); myFiltered1.hideSource("LogReader"); myFiltered2.hideSource("global"); myFiltered1.setTitle("Filtered LogReader: Global Messages Only"); myFiltered2.setTitle("Filtered LogReader: LogReader Messages Only"); </script> </body>

#### Example: Buffered

Log a simple message

Output buffer has been increased to 3 seconds. Therefore, messages are printed to the screen every 3 seconds.

#### Sample Code

<body> <div id="paused"></div> <script type="text/javascript"> var myBuffered = new YAHOO.widget.LogReader("buffered", {outputBuffer:3000}); myPaused.setTitle("3 Second Output Buffer"); </script> </body>

#### Example: Paused

Resume this LogReader | Pause this LogReader | Log a simple message

Output has been paused.

#### Sample Code

<body> <div id="paused"></div> <script type="text/javascript"> var myPaused = new YAHOO.widget.LogReader("paused"); myPaused.pause(); myPaused.setTitle("Paused LogReader"); </script> </body>

#### Example: Collapsed

Log a simple message

The LogReader console has been collapsed.

#### Sample Code

<body> <div id="collapsed"></div> <script type="text/javascript"> var myCollapsed = new YAHOO.widget.LogReader("collapsed"); myCollapsed.collapse(); myCollapsed.setTitle("Collapsed LogReader"); </script> </body>

#### Example: Hidden

Show this LogReader | Hide this LogReader | Log a simple message

The entire LogReader console has been hidden.

#### Sample Code

<body> <div id="hidden"></div> <script type="text/javascript"> var myHidden = new YAHOO.widget.LogReader("hidden"); myHidden.hide(); myHidden.setTitle("Hidden LogReader"); </script> </body>

#### Example: Styled via CSS

Log a simple message

The UI has been customized via CSS.

#### Sample Code

<head> <style type="text/css"> </style> </head> <body> <div id="styled"></div> <script type="text/javascript"> var myStyled = new YAHOO.widget.LogReader("styled"); myStyled.setTitle("Styled via CSS"); </script> </body>