Sign Up! Login: Password: New User? Forgot? Support
Top Mods!
Wowhead Search
by sonofsamedi
Digital Clock
by Wolfar15
Admin Forums
Welcome to the GuildPortal Help Community! These forums are for admin-to-admin help.
Available Forums
Forums : Pimp My Site! > Adding Icons to your Calendar
1 2 3 4 5 6 7 8Next
Mottie (MVP) 9/23/2008 10:15 AM EST : Adding Icons to your Calendar
GuildPortal MVP
Mottie
Posts: 3884
Zomgawsh Poster

Calendar Icons: v1.0 (no styling) | Calendar & Event Icons: v1.1 (no styling) | v1.2 (styling) | v1.3 (changing links)

BEFORE

AFTER


The Code & Customizing
<script type="text/javascript">
$(document).ready(function() {
 var events = new Array();

 var imageAlign = "right";
 var imageHeight = "22";
 var imageWidth = "22";
 
 events.push(["Karazhan|Kara","http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/Kar.gif"]);
 events.push(["Zul'Aman|ZA","http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/ZA.gif"]);
 events.push(["Gruul","http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/GL.gif"]);
 events.push(["Mag|Magtheridon","http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/Mag.gif"]);
 events.push(["Tempest|Eye|TK","http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/TK.gif"]);
 events.push(["Serpentshrine|SSC","http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/SSC.gif"]);
 events.push(["Hyjal|MH","http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/MH.gif"]);
 events.push(["Kazzak|DLK","http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/DLK.gif"]);
 events.push(["Doomwalker|DW","http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/DW.gif"]);
 events.push(["Black|BT","http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/BT.gif"]);
 events.push(["Sunwell|SW|SP","http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/SP.gif"]);

 events.push(["Naxx","http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/Nax2.gif"]);
 events.push(["VoA|Archavon","http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/VoA.gif"]);
 events.push(["CoA|OS|Obsidian|Sartharion","http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/OS.gif"]);
 events.push(["EoE|Malygos","http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/EoE.gif"]);
 events.push(["Ulduar","http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/ulduar.gif"]);
 events.push(["ToC|of Crusader|he Crusader","http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/Crusader.gif"]);
 events.push(["TGC|Grand Crusader","http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/GrandCrusader.gif"]);

 events.push(["birthday|Birthday","http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/birthday.gif"]);
 events.push(["quest|Quest","http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/quest.gif"]);
 events.push(["Unk|unk","http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/unknown.gif"]);

  $("#tblMonthlyCalendarTable").find(".NormGridRow,.AltGridRow").each(function() {
   for (var j=0; j < events.length; j++ ) {
    if ($(this).html().match(events[j][0])) {
     var temp = "<img align='" + imageAlign + "' src='" + events[j][1];
     temp += "'width='" + imageWidth + "' height='" + imageHeight + "'>";
     $(this).html(temp + $(this).html());
    }
   }
  });
});
</script>
  • Add the following script to the header area, footer or to a "Free Form Text/HTML" box on the calendar page.
  • Change the "imageAlign" variable (in green) to position the icon on either the "right" or "left" side of the calendar box
  • Change "imageHeight" and "imageWidth" to set the image size (in red) you prefer.
  • Edit, add or remove events by changing the "events.push" line.

    events.push(["Zul'Aman|ZA","http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/ZA.gif"]);

    • The first part (in blue) has the possible names of the event separated by a "|" (Shift-\, above the enter key on the keyboard). So you'll notice for the "Zul'Aman" instance, that the first part includes both "Zul'Aman" and "ZA" (ZA being the abbreviation for the instance). The names are case dependent, but can match partial names... so I could have used "irthday" to find both "Birthday" and "birthday", but I didn't so everyone would understand what's going on here.
    • The second part of the events variable (in orange) is the URL to the icon.
    • I have several custom events included: "Birthday", "Quest" and "Unknown". So feel free to follow those examples and add your own custom icons to your guild calendar!
Edit (1/5/2009): Added WotLK icons
Edit (4/23/2009): Added Ulduar icon
Edit (8/7/2009): Added Trial of the (Grand) Crusader icons
TopBottom

Kaysi (Guild Admin) 9/23/2008 10:45 PM EST : RE: Adding Icons to your Calendar

Kaysi
Posts: 445
Fingers of Fury!

Mottie for President!!!!

You are the greatest, thank you!

Hmmmm... for some reason when I pasted this code into my footer I get double sets of pictures....

For Example, on the Hyjal/BT days I get two Hyjal pictures and two BT pictures. You can take a look at October 9th on my Calender. Any ideas why it might be doing that?

Thanks Mottie!

Miria Signature
"I can heal any flashpoint, quest, or player, but I can't heal stupidity."
TopBottom

Mottie (MVP) 9/24/2008 1:39 AM EST : RE: Adding Icons to your Calendar
GuildPortal MVP
Mottie
Posts: 3884
Zomgawsh Poster

I don't see any events on your Calendar, but maybe the script is somehow getting run twice... try moving it into the header and see if that makes a difference. I'll modify it to make it only run once just in case 
TopBottom

Kaysi (Guild Admin) 9/24/2008 6:51 PM EST : RE: Adding Icons to your Calendar

Kaysi
Posts: 445
Fingers of Fury!

I am so sorry! I forgot the events were set to Member's access!

October 9th has been made public and I did change the code into the header and for some reason it still doubles the pictures.
Miria Signature
"I can heal any flashpoint, quest, or player, but I can't heal stupidity."
TopBottom

Mottie (MVP) 9/24/2008 7:38 PM EST : RE: Adding Icons to your Calendar
GuildPortal MVP
Mottie
Posts: 3884
Zomgawsh Poster

DOH, I guess I should have seen this when you first posted about the problem... you have the script on your page twice! Once in the banner area and a second time in your footer area. They are both independent of each other, so that's why you see it twice. I'd delete the banner area copy.
TopBottom

Kaysi (Guild Admin) 9/24/2008 8:45 PM EST : RE: Adding Icons to your Calendar

Kaysi
Posts: 445
Fingers of Fury!

 Ack! I knew it had to be something on my end, thank you again!
Miria Signature
"I can heal any flashpoint, quest, or player, but I can't heal stupidity."
TopBottom

Mottie (MVP) 10/1/2008 7:53 AM EST : Calendar Icons v1.1
GuildPortal MVP
Mottie
Posts: 3884
Zomgawsh Poster

Calendar Icons: v1.0 (no styling) | Calendar & Event Icons: v1.1 (no styling) | v1.2 (styling) | v1.3 (changing links)

This update will now add icons to the Events box and if you place a calendar in one of the side columns, it will add icons and shrink it to make it more ascetically pleasing.

Events


Center Column Calendar
(same as before)


Side Column Calendar

Before (shrunk)
After (with tooltips)
->

The Code & Customizing

<style type="text/css">
.sideCalendarTooltip {color:#ffcc00;}
.sideCalendarMonthTitleContainer { height:10px; font-size:7pt; }
.sideCalendarMonthTitle { background: #2d2d2d; color:#daca92; font-weight:bold; padding: 5px; border:0px; }
.sideCalendarMonthTitle a:link { text-decoration:none; color:#daca92;}
.iconWrap { height:16px; width:16px; }
</style>
<script type="text/javascript">
$(document).ready(function() {
 var events = new Array();
 
 events.push(["Karazhan|Kara","http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/Kar.gif"]);
 events.push(["Zul'Aman|ZA","http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/ZA.gif"]);
 events.push(["Gruul","http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/GL.gif"]);
 events.push(["Mag|Magtheridon","http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/Mag.gif"]);
 events.push(["Tempest|Eye|TK","http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/TK.gif"]);
 events.push(["Serpentshrine|SSC","http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/SSC.gif"]);
 events.push(["Hyjal|MH","http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/MH.gif"]);
 events.push(["Kazzak|DLK","http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/DLK.gif"]);
 events.push(["Doomwalker|DW","http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/DW.gif"]);
 events.push(["Black|BT","http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/BT.gif"]);
 events.push(["Sunwell|SW|SP","http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/SP.gif"]);

 events.push(["Naxx","http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/Nax2.gif"]);
 events.push(["VoA|Archavon","http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/VoA.gif"]);
 events.push(["CoA|OS|Obsidian|Sartharion","http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/OS.gif"]);
 events.push(["EoE|Malygos","http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/EoE.gif"]);
 events.push(["Ulduar","http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/ulduar.gif"]);
 events.push(["ToC|of Crusader|he Crusader","http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/Crusader.gif"]);
 events.push(["TGC|Grand Crusader","http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/GrandCrusader.gif"]);

 events.push(["birthday|Birthday","http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/birthday.gif"]);
 events.push(["Fun event|fun event","http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/fun.gif"]);
 events.push(["quest|Quest","http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/quest.gif"]);
 events.push(["Unk|unk","http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/unknown.gif"]);

/*
*****************************
 Don't change anything below this line!
***************************** */
 // Main Calendar
 $(".CenterContentZone").find("#tblMonthlyCalendarTable").find(".NormGridRow,.AltGridRow").each(function() {
  addIcons($(this),"right",22,22);
 });
 // Events Box
 $("a").each(function() {
  if ($(this).attr("title").match("details of this event on the Calendar")) {
   addIcons($(this).parent(),"right",22,22);
  }
 });
 // Side Calendar (Mini)
 $(".LeftContentZone,.RightContentZone").find("#monthlyCalendarCalendarColumn").find("table:eq(0)").each(function() {
 try {
   $(this).find(".NormGridRow,.AltGridRow").each(function() {
    var evtTitle = "<div class='sideCalendarTooltip'>" + $(this).find("a").text().replace("'","&#39;") + "</div>";
    var divTitle = evtTitle + $(this).attr("title").replace("(","<br>(");
    $(this).attr("title","").mouseover(function(){ddrivetip(divTitle,'','240')}).mouseout(function(){hideddrivetip();});
    $(this).html(evtTitle); // replace date contents with just the event, for addIcons function
    addIcons($(this),"right",16,16);
    $(this).removeClass("NormGridRow").removeClass("AltGridRow").unbind().addClass("iconWrap").children("div").remove();
    $(this).css("border-width","0px").css("padding","0px 5px").css("margin","0px");
   });
   $(this).attr("title","");
   $(this).find(".ContentBoxTitle").css("height","10px").css("font-size","7pt");
   $(this).find("tr:gt(2)").find("td").css("min-width","22px").css("height","30px").css("font-size","8pt").css("align","center");
   $(this).find("a:contains('Prev Month')").html("&lt;");
   $(this).find("a:contains('Next Month')").html("&gt;");
   $(this).find("table.ContentBoxTitle").each(function() {
    $(this).parent().addClass("sideCalendarMonthTitleContainer").css("color","").css("background-color","");
    $(this).removeClass("ContentBoxTitle").css("color","").css("font-weight","");
    $(this).find("td").addClass("sideCalendarMonthTitle").removeClass("ContentBoxTitle").css("color","").css("background-color","");
    $(this).find("a").css("color","");
   })
 } catch(e) {}
 });
 function addIcons (box,imgAlign,imgWidth,imgHeight) {
  for (var j=0; j < events.length; j++ ) {
   if (box.html().match(events[j][0])) {
    var temp = "<img align='" + imgAlign + "' src='" + events[j][1];
    temp += "'width='" + imgWidth + "' height='" + imgHeight + "'>";
    box.html(temp + box.html());
   }
  }
  return true;
 }
});
</script>
  • This script needs the Title of your "Events" box to be included (in purple). It only matches the word, so it will find "Events" and "Upcoming Events" - it is case sensitive. This is no longer required!
  • For the rest of the instructions on how to customize this script, please refer to the top post.
  • There isn't much to modify with this new script besides changing the icon images for your particular game. You can modify the image position and size.
  • The side calender is set up to be as small as possible. It's optimally sized with a side column width of 175px, but should expand for wider columns.
  • Added a "sideCalendarTooltip" class for the tooltip header. Change the text color by replacing the value in purple

    .sideCalendarTooltip {color:#ffcc00;}
  • Added Month title classes to style that portion of the calendar. Two classes were added. One for the title container (sideCalendarMonthTitleContainer) and the second for the title and month selectors (sideCalendarMonthTitle). Change the values in purple to match your site
  • Added "iconWrap" class in the CSS that wraps around the icons to prevent overlapping. The height & width (in red) should match the icon size.
Edit (10/2/2008): Added ".ContentBoxTitleNoBackground" into the script.
Edit (10/3/2008): Modified the Events Box script to work without needing to find a "ContentBox" which removed the change above.
Edit (10/8/2008): Modified the Side Calander script to make the tooltips work with IE (and hopefully Safari) & added a tooltip header class "sideCalendarTooltip"
Edit (10/9/2008): Modified the Side Calendar script to prevent icon overlapping with IE & added more CSS classes for the month title and icons.
Edit (10/11/2008): Added code to prevent mouseover highlighting.
Edit (1/5/2009): Added WotLK icons
Edit (4/23/2009): Added Ulduar icon
Edit (8/7/2009): Added Trial of the (Grand) Crusader icons
TopBottom

Mr_Apocalypse (New Admin) 10/1/2008 3:55 PM EST : RE: Calendar Icons v1.1
Mr_Apocalypse
Posts: 190
Posts With Wolves

I used the second script that includes the events box images, but I cant get my test image to appear. It shows up in the calander just not my upcoming events box on my main page.

AmI missing something. I have the scripts loaded into my footer
TopBottom

Mottie (MVP) 10/2/2008 1:48 AM EST : RE: Calendar Icons v1.1
GuildPortal MVP
Mottie
Posts: 3884
Zomgawsh Poster

Did you set the name of your event box in the script?
var eventsBoxTitle = "Events";
That may be the problem

Edit: Ok I see now... Two things to do to get it to work:
  • The script was looking for the box title in "ContentBoxTitle"... I forgot to include "ContentBoxTitleNoBackground". It's now added into the script above.

  • Second thing is on your side. It looks like you used custom content box HTML? The script needs to find a "ContentBox" class to find the Events box. So you'll need to go back to your custom content box HTML and add this class to the top most table, or you could add a <div class="ContentBox"> around the whole thing. I wish there was another way to find the events box, but GuildPortal doesn't add an ID for it like it does with the calendar.

    <table width="100%" border="0" cellpadding="0" cellspacing="0" class="ContentBox">

TopBottom

Kaysi (Guild Admin) 10/3/2008 4:24 AM EST : RE: Calendar Icons v1.1

Kaysi
Posts: 445
Fingers of Fury!

You completely read my mind Mottie, I was going to post today and ask you if could find a way to put the little icons in the Event box too!

I just wanted to relay to people who use this, be careful if you have any of your guild member's names that resemble the identifiers for the instance. When I originally pasted the code into my footer I couldn't figure out why the Mag raid icon kept showing up when the raids were Hyjal/BT. Then I noticed raid leader's name started with "Mag", so I just changed the Mag identifier to Magth and it worked perfectly. 

Thank you Mottie!
Miria Signature
"I can heal any flashpoint, quest, or player, but I can't heal stupidity."
TopBottom

1 2 3 4 5 6 7 8Next
Admins Online
There are   members online.
So-and-so has logged on!
%title%
%message%