Adding Signup Status Color

GuildPortal admin site link to the original post

This jQuery script will add CSS classes to the character status, so you can set the color yourself with the CSS and the script will do the rest. Within the script, you can set it to just color the Status column or the entire row. This is what it will look like:



The Code

---

---

Or, add the code to a free form text/HTML box on your calendar page while in <> HTML mode (ideally). It should also work if you decide to add the code to the Banner or Footer HTML.

<style type="text/css">
.Alternate, .Alternate a:link { color: #ff8000; }
.Available, .Available a:link { color: #00dd00; }
.Cancelled, .Cancelled a:link { color: #dd0000; text-decoration: line-through; }
.Confirmed, .Confirmed a:link { color: #0080dd; }
.Tentative, .Tentative a:link { color: #888888; }
.WaitList, .WaitList a:link { color: #dd00dd; }
</style>
<script type="text/javascript">
$(document).ready(function(){
  var styleEntireRow = true

 // ***************************
 // Don't Change anything below
 // ***************************
 , tmp, c;
  $("div[id$='signupsHolder']").find("table[class^=signupsTable]")
  .find('.AltGridRow,.NormGridRow').each(function(){
  tmp = $(this).find('td:nth-child(2)');
  c = (tmp.text()).replace(/\s+/,'');
  if (styleEntireRow) {
   $(this).addClass(c);
  } else {
    tmp.addClass(c);
  }
 });
});
</script>

Customizing

• Change the CSS to your desired coloring/style for the event status (in blue)
• Set the script variable "styleEntireRow" to true if you want the entire row to have the CSS applied to it. if set to false, only the Status will have the style.

Edit (2/5/2011): Updated and cleaned up to work with Calendar changes.
Edit (2/11/2011): Updated to work with new changes.
Edit (5/28/2011): Updated to work again.

Hi Lakshmii!

I just took a look at your site (this event) and everything but the mini calendar seems fine to me... I looked at the mini calendar on my site and it hadn't changed, so maybe there is some css on your site that is interfering? I can't tell. 

But if you add this css to your custom css, it should un-squish the calendar:

table.eventComments { width: 100%; }
table.eventComments th { width: 14.2%; }

Ok, I just fixed it... awaiting GP approval now.