1. #1
    Ext User
    Join Date
    Mar 2007
    Posts
    2
    Vote Rating
    0
    nate is on a distinguished road

      0  

    Default Nice CSS Skin for YUI Logger

    Nice CSS Skin for YUI Logger


    I'm getting ready to do a heavy amount of coding using the Logger and needed a nice place in the browser window for the Logger to be. I made it fixed on the bottom of the browser window and styled it to flow better with Firefox and appear like a Firefox extension. Just wanted to share this with you - hope it may help you out as well!

    Here's a snapshot. This is the bottom half of a Firefox browser window:


    The container I have located right inside the body tag as shown. The reason I named the logger div "logger-global" is in the case I need to instantiate another instance of the logger. You could name it any way you like:
    Code:
    <body>
         <div id="logger"><div id="logger-global" class="yui-log"></div></div>
    Then the JS that fires it off...
    Code:
    /* ---------------------------------
      @ Yahoo UI Library Logger
    ----------------------------------- */
    LogManager = function() {
    	return {
    		init : function()
    		{
    			this.logger = new YAHOO.widget.LogReader("logger-global");
    			this.logger.setTitle("JS Logger");
    		}
    	}
    }();
    YAHOO.ext.EventManager.onDocumentReady(LogManager.init, LogManager, true);
    And finally, the CSS used to style it. I've got some parent font styles applied to the body tag that might be inherited by this CSS, so you might need to adjust the font sizes to your preference.
    Code:
    /* YAHOO UI Logger */
    #logger
    {
    	background-color:#ece9d8;
    	border-top:1px solid #aca899;
    	position:absolute;
    	z-index:100;
    	left:0px;
    	bottom:0px;
    	font:normal normal normal 100% verdana, sans-serif;
    	font-size:1em;
    	width:100%;
    }
    .yui-log
    {
    	border-top:1px solid #fff;
    	padding:5px 3px 3px 3px;
    }
    
    .yui-log code
    {
    	border-top:1px dotted #ccc;
    	font-family:monospace;
    	font-size:11px;
    	display:block;
    	padding:2px 0 5px 0;
    }
    .yui-log p { margin:0; padding:0; }
    
    .yui-log .yui-log-hd
    {
    	position:relative;
    	padding:0 0 3px 2px;
    	font-weight:normal;
    	color:#000;
    }
    .yui-log .yui-log-hd h4 { font-size:1em }
    
    .yui-log .yui-log-bd
    {
    	position:relative;
    	background-color:#fff;
    	border:1px solid #bdb9ad;
    	overflow:auto;
    	width:99.2%;
    	height:20em;
    	margin:2px 0 0 0;
    	padding:0 3px 0 3px;
    }
    
    .yui-log .yui-log-ft
    {
    	position:relative;
    	padding:5px 0 0 0;
    }
    .yui-log .yui-log-btns
    {
    	position:relative;
    	float:right;
    	bottom:.25em;
    }
    .yui-log .info {background-color:#a3c925;}
    .yui-log .warn {background-color:#f58515;}
    .yui-log .error {background-color:#e1300b;}
    .yui-log .time {background-color:#a4c8d6;}
    .yui-log .window {background-color:#f2e784;}
    
    .yui-log .mytype {background-color:#ff95ca;}
    
    .yui-log .yui-log-sourcefilters,
    .yui-log .yui-log-categoryfilters
    {
    	float:left;
    }
    .yui-log .yui-log-sourcefilters
    {
    	border-left:1px solid #bdb9ad;
    	padding-left:16px;
    	margin-left:10px;
    }
    .yui-log span.yui-log-filtergrp
    {
    	margin-right:4px;
    	font-size:0.9em;
    }
    .yui-log span.yui-log-filtergrp label { padding:0 1px 0 1px }

  2. #2
    Ext User
    Join Date
    Mar 2007
    Posts
    58
    Vote Rating
    0
    luke83 is on a distinguished road

      0  

    Default


    NOTE: due to posting HTML element attributes in the forums being blocked (is this is the case?) on the divs below the outer div has id="logger" and the inner div has id="logger-global" and class="yui-log"::
    u have to disable html when u post..

    bottom in the page qhen u post there is a check box ("Disable HTML in this post") to do this

  3. #3
    Ext User
    Join Date
    Mar 2007
    Posts
    2
    Vote Rating
    0
    nate is on a distinguished road

      0  

    Default


    Ah thanks fixed now.

Similar Threads

  1. New skin
    By alex1er in forum Ext 2.x: Help & Discussion
    Replies: 3
    Last Post: 27 Mar 2007, 7:40 AM
  2. Nice little plug
    By INeedADip in forum Ext 2.x: Help & Discussion
    Replies: 3
    Last Post: 24 Feb 2007, 6:08 PM
  3. Oh! CookieProvider is so nice!
    By moraes in forum Ext 1.x: Help & Discussion
    Replies: 1
    Last Post: 20 Dec 2006, 9:09 PM
  4. nice forms...
    By genius551v in forum Ext 1.x: Help & Discussion
    Replies: 2
    Last Post: 30 Nov 2006, 9:59 AM
  5. YUI Logger and Basic Dialog
    By jbowman in forum Community Discussion
    Replies: 12
    Last Post: 27 Nov 2006, 5:50 PM

Thread Participants: 1