make the info message box pretty

lib/WebGUI/Admin.pm

@@ -428,7 +428,9 @@ __DATA__
 </dl>
 
 <div id="wrapper" class="yui-skin-sam">
-    <div id="infoMessage" style="display: none"></div>
+    <div id="infoMessageContainer" style="display: none" >
+        <div id="infoMessage" style="background-image: url(^Extras(icon/information.png););"></div>
+    </div>
     <div id="versionTag" style="display: none">
         <div style="float: right">
             <a href="#" target="view" id="publishTag">Publish (i18n)</span>

www/extras/admin/admin.css

@@ -120,3 +120,20 @@ a:link {
     background-repeat:  no-repeat;
     background-position: 0 50%;
 }
+
+#infoMessageContainer {
+    position:       absolute;
+    left:           30%;
+    top:            0px;
+    width:          35%;
+    overflow:       hidden;
+}
+
+#infoMessage {
+    width:          100%;
+    height:         100%;
+    background-color: #ccf;
+    background-position: 0 50%;
+    background-repeat: no-repeat;
+    padding-left:   20px;
+}

www/extras/admin/admin.js

@@ -521,7 +521,10 @@ WebGUI.Admin.prototype.showInfoMessage
 
     var info    = document.getElementById( 'infoMessage' );
     info.innerHTML = message;
-    info.style.display = "block";
+
+    var infoContainer   = document.getElementById( 'infoMessageContainer' );
+    infoContainer.style.height   = WebGUI.Admin.getRealHeight( infoContainer );
+    infoContainer.style.display  = "block";
 
     this.infoMessageTimeout = setTimeout( this.hideInfoMessage, 3000 );
 };
@@ -532,8 +535,8 @@ WebGUI.Admin.prototype.showInfoMessage
  */
 WebGUI.Admin.prototype.hideInfoMessage
 = function ( ) {
-    var info = document.getElementById( 'infoMessage' );
+    var infoContainer   = document.getElementById( 'infoMessageContainer' );
-    info.style.display = "none";
+    infoContainer.style.display  = "none";
 };
 
 /****************************************************************************