HomeMottie's Help SiteResourcesSupport Tickets
Sign Up! • Login: Password: New User? Forgot? Support
Top Mods!
Wowhead Search
by sonofsamedi
Admin Forums
Welcome to the GuildPortal Help Community! These forums are for admin-to-admin help.
Available Forums
Forums : Feature Discussion > Different row colour on Calendar for cancelled/tentative/available
1 2Next
Rakhman (Guild Admin) 7/13/2009 4:56 AM EST : Different row colour on Calendar for cancelled/tentat... link

Rakhman
Posts: 467
Fingers of Fury!
Our raid leader is notoriously dim, so the current Guild Portal calendar signups page confused him, then he needs to read "Available" "Cancelled" or "Tentative" for each person who signs up.

Now before I think when someone Cancelled it disappeared off the calendar, however now we seem to have people in Cancelled state again.

So I would like some way to style the row of a person's sign up, depending on their status. I would have Available as normal (or maybe green text), Cancelled with a strike through all the text and red, and Tentative as maybe greyed.

In this way everyone could have visual clues as to the status of people signing up by glancing at the page.

Ideally I'd like this done by having the HTML table row <tr> having a class which depends on the status of the signup, something like class="available"/"cancelled"/"tentative" etc so in the Custom CSS I could code some styles on the row and cells, change the colours/fonts/etc.

You may want to keep this an "advanced" feature so the default templates work as they currently do, ie do not style lines in differently.

Rakhman
Top • Bottom

Mottie (MVP) 7/13/2009 10:36 AM EST : RE: Different row colour on Calendar for cancelled/te... link
GuildPortal MVP
Mottie
Posts: 3873
Zomgawsh Poster
Hi Rakhman!

I threw together this jQuery script that will add CSS classes to the 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:



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.

The Code
<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
>>help-site<<
Top • Bottom

Guppy Queen (New Admin) 8/25/2009 11:54 PM EST : RE: Different row colour on Calendar for cancelled/te... link
Guppy Queen
Posts: 41034
Zomgawsh Poster
Thanks for the code Mottie! I added this to my guild site.
Top • Bottom

Rakhman (Guild Admin) 8/27/2009 9:30 AM EST : RE: Different row colour on Calendar for cancelled/te... link

Rakhman
Posts: 467
Fingers of Fury!
Nice, I will give that a go.
Rakhman
Top • Bottom

Shirrah (Guild Admin) 4/14/2011 12:16 PM EST : RE: Different row colour on Calendar for cancelled/te... link
Shirrah
Posts: 209
Fingers of Fury!
I'd love to add this code however, I am brand new to site management here and am unclear on just what to do. I tried looking through the FAQ but couldn't see anything that would help me.

I went to the calendar page but didn't see any free-form editor as mentioned. Can you point me in the direction of the instructions for this?

Thanks in advance.
Top • Bottom

Mottie (MVP) 5/28/2011 3:43 PM EST : RE: Different row colour on Calendar for cancelled/te... link
GuildPortal MVP
Mottie
Posts: 3873
Zomgawsh Poster
Hi Shirrah!!

Wow sorry only took me a month to respond. Basically you have to manually add a free form text/HTML widget to your calendar page. 

Then to hide that "code" widget, just put the code from this post inside.

Also, I've updated this code due to the recent changes made to the columns (GP User and Character columns were combined)
>>help-site<<
Top • Bottom

Ciarrah Zarrak (Guild Admin) 5/29/2011 12:20 PM EST : RE: Different row colour on Calendar for cancelled/te... link
Ciarrah Zarrak
Posts: 422
Fingers of Fury!
Thanks for the response!

I did add a free form widget to my calendar page. Now there is a box to the right of my calendar, which shows the code to hide it, followed by the code to change the signup colors. Nothing is hidden and there is no change in the color of the signups. Is there another step I'm missing?

Thanks in advance for any help.

(I just realized I confused you. I posted the original query under my old ID. Sorry about that!)
Top • Bottom

Mottie (MVP) 5/29/2011 3:58 PM EST : RE: Different row colour on Calendar for cancelled/te... link
GuildPortal MVP
Mottie
Posts: 3873
Zomgawsh Poster
Hi again!

Your calendar page is hidden from public view I guess, but from your description it sounds like you added the code to the editor while it was in "Design" mode (bottom left corner above the Save button). Switch the editor to [ <> HTML ] mode then paste in all of the code.
>>help-site<<
Top • Bottom

Ciarrah Zarrak (Guild Admin) 5/29/2011 4:53 PM EST : RE: Different row colour on Calendar for cancelled/te... link
Ciarrah Zarrak
Posts: 422
Fingers of Fury!
HAH!! Ok, *next* time I wait til my second cup of coffee before trying to make sense of anything!

That's done the trick and all set up now. I'll get my dunce cap and return to my corner.

Thanks again!
Top • Bottom

Ciarrah Zarrak (Guild Admin) 6/24/2011 5:00 PM EST : RE: Different row colour on Calendar for cancelled/te... link
Ciarrah Zarrak
Posts: 422
Fingers of Fury!
ugh!

I added the code on the main page for our vent info, following your instructions in the vent post and it worked right away. Now, our raid signups don't have color again and I can't figure out why. It was working fine until now so I have to blame that addition for it.

Any idea what I've done wrong this time?
Top • Bottom

1 2Next
Admins Online
There are   members online.
GuildPortal Home • Frequently Asked Questions • Videos • Recent Updates • Support • Terms of Use • Privacy Policy
GuildPortal™ Axiom Shift, LLC.  All Rights Reserved. All game-related trademarks are properties of their respective owners. Several adorable monkeys were harmed during the creation of this site, and for that, we are wholly unapologetic.
So-and-so has logged on!
%title%
%message%