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
Mottie (MVP) 10/30/2010 9:58 AM EST : Event Widget Icons
GuildPortal MVP
Mottie
Posts: 3884
Zomgawsh Poster

Event Widget Icons

The original post included calendar icons for the original calendar setup so it was really really outdated. The event icon script is actually really short so you won't need to include the external calendar script either. I did keep the original sexy screenshot though!.. wow 2008, I've been doing this too long LOL shocked



Code
<script type="text/javascript">
$(document).ready(function(){
var events = [];

events.push(["birthday|Birthday","http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/birthday.gif"]);
events.push(["Fun event|party","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"]);

var imgAlign = 'right';
var imgWidth = 24;
var imgHeight = 24;

 // Event widget icons - Don't change anything below
 $('.gpWidget-eventsml a[href*=EventToView]').each(function() {
  var t, box = $(this);
  for (var j=0; j < events.length; j++ ) {
   if (box.html().match(events[j][0])) {
    t = '<img align="' + imgAlign + '" src="' + events[j][1] +
       '" width="' + imgWidth + '" height="' + imgHeight + '">';
    box.prepend(t);
   }
  }
 });
});
</script>
Customizing
  • Ideally, add the script to a "Free Form Text/HTML" box on the event page (hide it with this script) - make sure the editor is in "Raw/Script" mode! You could also add the script to the header or footer area, but this is less desirable unless you have event widgets on several pages.
  • Change the "imgAlign" variable (in green) to position the icon on either the "right" or "left" side of the event widget.
  • Change "imgHeight" and "imgWidth" (in red) to set the image to the size you prefer.
  • Edit, add or remove events by changing the "events.push" lines.

    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 sensitive, 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 event widget!
TopBottom

Merenwench (MVP) 10/30/2010 10:41 AM EST : RE: Event Widget Icons
GuildPortal MVP
Merenwench
Posts: 2772
Zomgawsh Poster

HUZZAAAH!!

TopBottom

Admins Online
There are   members online.
So-and-so has logged on!
%title%
%message%