Demo MeetBrooklyn, NY
4/15/2015

MeetPro Web Reports Guide

Follow this guide to learn how to customize your MeetPro web reports. The tour includes:

  • Where to find the necessary files
  • How to add your own custom logo
  • Extensive examples of the HTML produced by MeetPro
  • Detailed illustration of the CSS classes applied to the HTML produced

MeetPro uses the Bootstrap framework as a base to create stylish, modern, and responsive HTML designed to be viewed on any internet capable device. In addition, we have done our best to implement our own comprehensive framework of CSS classes to provide you, the user, with the ability to completely customize your reports. Let's get started!

The first thing you'll probably want to know is...

where to find the files to customize! MeetPro creates a folder in your computer's documents directory called MeetPro Report Templates. Here you will find a number of .html files. Each file is a template responsible for a different report:

  • index.html, index_with_updating.html, session_order_index.html, session_order_index_with_updating.html, and compiledResultsIndex.html are responsible for producing the ''Home'' page for your web results. This will look something like the table you see below.
  • event_entries.html, event_performance_lists.html, event_results.html, and event_start_lists.html are responsible for producing a page display an entries, performance list, results, or start list table for one event.
  • rosters.html produces a table of each team's athletes.
  • team_entries.html produces a table of each team's athletes, as well as their entries and any relay entries the team may have.
  • events.html produces a list of events, with their respective entries, heats, status, and any event notes.
  • style.css is where the default styles applied to every template can be found.

Every template has the same header structure and references the style.css file. The css and js folders hold additional stylesheets and scripts that pertain to Bootstrap and others. It is not recommended that you edit these files. The easiest way to customize your templates is to add/edit the styles applied to selectors in the style.css file. Small changes can also be made to the .html templates. Next, we'll see how to add your own logo.

Open one of the HTML template files with the word processor of your choice.

At around line 20, you should see something like this:

<!--DO NOT ERASE! VERSION:&MeetProTemplate_v1.0-->
<body>
  <div class="container">
  <!--Bootstrap wrapper for the body of the webpage. Documentation @ http://getbootstrap.com/css-->
    <div class="header">
      <!-- your logo here-->
      <a id="logo" href="http://www.tfmeetpro.com" target="_new"><img src="meetProLogoBlack.png" border=0></a>
      <h3 class="text-muted">[$name]<span style="font-size: 12px;">[$town]</span><span style="font-size: 12px;">[$date]</span></h3>
    </div>

To add your own logo, ensure that the image file you need is copied to the MeetPro Report Templates Directory. Then change the src attribute of the <img> tag to the appropriate filename. Make sure it remains in quotation marks. If you have a website you would like to link to, change href attribute of the <a> tag to the desired URL. Save your changes, and voila! All your reports will display your logo at the top of the page. The <!--DO NOT ERASE! VERSION:&MeetProTemplate_v1.0--> comment is very important and should not be edited. If the templates are updated, you will be prompted to update your templates to the latest version. Your customized files will be kept, but have the string ''_mmddyyyy'' appended to the end of it. MeetPro will always reference the default template files, so you will have to reapply your custom changes to the updated templates. Template updates are very rare and can always be declined. Finally, changing any of the placeholders that look like [$placeholder] will prevent MeetPro from writing data to your template files. You are welcome to alter the arrangement and HTML wrapping of these placeholders, but they should remain unchanged.

That was easy! What else?

Now that you now how to add your logo, the rest is up to you. You will need a basic knowledge of HTML and CSS, but the possibilities are endless. Click around to the various sample reports to get an idea of the structure and selectors applied, and read up on the Bootstrap Docs as well! You can start right below with the index page tables. All report tables use the Bootstrap column system to stay responsive. The most common class you will see is .col-md-12 which spans the whole screen on all devices. The default styles applied are meant as a barebones framework to provide easily usable factory results, and 100% meant to be played with! Happy customizing!

Men

Event Entries Start List Performance List Results
1 Sample Results with Splits Results
3 Sample Relay Results Results
5 Sample Start List Start List
21 Sample Multi-Event Results Results

Women

Event Entries Start List Performance List Results
2 Sample Sprint Results Results
4 Sample Vertical Results Results
6 Sample Horizontal Results Results
8 Sample Performance List Performance List
10 Sample Entries Entries

All the events in MeetPro will be printed in two event <table>s for each gender. Mixed gender events will appear in a table below, spanning the entire page width. You can include entries, start lists, performance lists, and results for ell events. Links will only be displayed when there is a corresponding page to go to. The <table> has classes .events-table, .table, .table-striped, .tabled-bordered, .table-condensed Bootstrap Docs. The structure of an events table is detailed below:

<table class="events-table table table-striped table-bordered table-condensed">
  <thead>
    <tr>
	  <th class="event-num"></th>
      <th class="event">Event</th>
      <th class="entries">Entries</th>
      <th class="start-list">Start List</th>
      <th class="performance-list">Performance List</th>
      <th class="results">Results</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="event-num">...</td>
	  <td class="event">...</td>
	  <td class="entries"><a href='entries_1.html'>Entries</a></td>
	  <td class="start-list"><a href='start_list_1.html'>Start List</a></td>
	  <td class="performance-list"><a href='performance_list_1.html'>Performance List</a></td>
	  <td class="results"><a href='results_1.html'>Results</a></td>
    </tr>
    ...
  </tbody>
</table>

The following default styles are applied:

th.entries, th.start-list, th.performance-list, th.results {
    text-align: center;
}

td.entries, td.start-list, td.performance-list, td.results {
    text-align:center;
}
            
th.entries, td.entries, th.results, td.results {
    width:65px;
}
            
th.start-list, td.start-list {
    width:80px;
}

th.performance-list, td.performance-list {
    width:135px;
}

More Reports

Events

Team Entries

Rosters

Male Teams

PL Team Code Pts
1 Cleveland CLEV 154
2 Roosevelt ROOS 95
3 Fillmore FILL 65.5
4 Lincoln LINC 63.5
5 Hayes HAYE 30
6 Buchanan BUCH 26
7 Johnson JOHN 22
8 Harding HARD 21
9 Garfield GARF 18
10 Taft TAFT 1

Female Teams

PL Team Code Pts
1 Roosevelt ROOS 152
2 Fillmore FILL 129
3 Hayes HAYE 81
4 Harding HARD 39
5 Taylor TAYL 24
6 McKinley MCKI 16
6 Wilson WILS 16
8 Taft TAFT 12
9 Pierce PIER 8
10 Grant GRAN 7
11 Garfield GARF 2
11 Arthur ARTH 2

When the option for Team Scores is selected, scores tables are printed per gender as above. When division scoring is used, a table will be drawn for each division-gender pair. The <table> has classes .scores-table, .table, .table-striped, .tabled-bordered, .table-condensed Bootstrap Docs. In addition, you can target the entire <div> element that scores are kept in with the #scores selector. The structure of a scores table is detailed below:

<div class="team-scores col-md-6">
  <h3 class="team-scores-hdr">Male Teams</h3>
    <table class="scores-table table table-striped table-bordered table-condensed">
      <thead>
		<tr>
		  <th class="place">PL</th>
		  <th class="team">Team</th>
		  <th class="code">Code</th>
		  <th class="points">Pts</th>
		</tr>
	  </thead>
	  <tbody>
	    <tr>
		  <td class="place">...</td>
		  <td class="team">...</td>
		  <td class="code">...</td>
		  <td class="points">...</td>
		</tr>
        ...
    </tbody>
  </table>
</div>

The following default styles are applied:

th.place, th.code, th.points {
    text-align:center;
}

td.place, td.code, td.points {
    text-align:center;
}

th.place, td.place, th.points, td.points {
    width:35px;
}

th.code, td.code, th.heat-lane, td.heat-lane {
    width:60px;
}