Customized MeetPro Live Results

One of the reasons I’ve really like Direct Athletics’ MeetPro is because of the customizable live results. You can customize Hy-Tek results a little bit, but it’s more complicated and not nearly as nice.

Willamette hosted the Northwest Conference Swimming Championships this year and I customized a site to show Hy-Tek results. It turned out ok, but it was pain with a lot of work-arounds.

With just a little css knowledge you can customize the MeetPro live results color scheme to your liking. When I started messing with this all I was doing was altering the css. I timed the GNAC Cross Country Championships this past fall and just did a little css altering to match the GNAC color scheme. It took about 20 minutes and looks pretty good for the time I put into it.

A couple weeks later I times the NCAA D3 West Region Cross Country Championships. I did a little more work on this one, but not too much. Besides editing the css I edited the index template to show a twitter widget.

This track season I’ve been digging a litter deeper in the customization. Oregon State University hosted their first  track & field meet in 20 years and I was fortunate to be able to time it.This one took a lot more customization. I heavily altered the css and created my own header and footer. I also took the background from so it looks like it belongs with the rest of the site.

This is basically what I’ve done with the Willamette University results this year. It’s the same basic layout as the OSU results but with Willamette Colors. I’ve used Disqus to add comments to the index page, but it hasn’t been very popular so I think I’m going to get rid of it.

I have been using Woopra to get stats on the live results pages. I like Woopra because the stats are real-time and the interface is great. There is a free version available with a limited of 30000 page views, but I will never get close to that.

This past week I’ve taken the live results customization to a new level. Willamette is hosting the 2013 Northwest Conference Track & Field Championships this year and I want a great live results option. I complete re-wrote all the templates and css from scratch.

On the index page you can see the available results, a twitter widget and a tumblr feed. The site is setup so the results, tumblr and twitter feed all update without refreshing the page.


With MeetPro you can’t set the order on the results to match when they occur. They always show in the same order. So I’ve added two collapsible panes to show the time schedule.


As a side note, I often use Tumblr as a live blog. It has an easy to use API and it’d easy for me, or anyone else to update. Willamette is hosting the Northwest Conference Golf Championships next weekend and I have their site setup with a Tumblr feed. Anyone working at the event can use their phone and the Tumblr app to post quick updates and photos right to the website.

I did a lot of heavy lifting to make the results look as good on mobile as they do on a desktop browser.


In another post I will show exactly what I did, but basically, I’m testing for a mobile device and serving up a different css page. To accomplish this I had to use php and htaccess and a third party mobile device detection script. It’s not a real elegant solution, but it seems to work.

Customized MeetPro Live Results
Tagged on:                 
Highslide for Wordpress Plugin