Highlight status messages on load, fade them out after a few seconds. Make success green brighter.

2 files changed, 19 insertions, 3 deletions

diff --git a/themes/default/css/screen.css b/themes/default/css/screen.css
index dd27b774..9313086c 100644
--- a/themes/default/css/screen.css
+++ b/themes/default/css/screen.css
@@ -267,6 +267,10 @@ li.gError select {
 
 /* Status messages ~~~~~~~~~~~~~~~~~~~~~~~ */
 
+#gMessage {
+  width: 99%;
+}
+
 #gAdminAkismet .gSuccess,
 #gSiteStatus li,
 #gMessage li {
@@ -318,7 +322,7 @@ form p.gError {
 }
 
 .gSuccess {
-  background-color: #cfc;
+  background-color: #96EF95;
 }
 
 #gSiteStatus .gSuccess,
diff --git a/themes/default/js/ui.init.js b/themes/default/js/ui.init.js
index ffcc3ed3..e250a1c3 100644
--- a/themes/default/js/ui.init.js
+++ b/themes/default/js/ui.init.js
@@ -44,9 +44,11 @@ $(document).ready(function() {
   // Album view only
   if ($("#gAlbumGrid").length) {
     // Vertical align thumbnails/metadata in album grid
-    $('.gItem').vAlign();
+    $(".gItem").vAlign();
   }
 
+  $("#gMessage li").showMessage();
+
   // Photo/Item item view only
   if ($("#gItem").length) {
     // Ensure that sized image versions
@@ -93,7 +95,7 @@ $(document).ready(function() {
 });
 
 // Vertically align a block element's content
-(function ($) {
+(function () {
   $.fn.vAlign = function(container) {
     return this.each(function(i){
       if (container == null) {
@@ -165,4 +167,14 @@ function shortFormInit(formID) {
       $(this).val(eLabelVal);
     }
   });
+
+  (function () {
+    $.fn.showMessage = function(message) {
+      return this.each(function(i){
+        $(this).effect("highlight", {"color": "white"}, 3000);
+        $(this).animate({opacity: 1.0}, 6000);
+        $(this).fadeOut("slow");
+      });
+    };
+  })(jQuery);
 }