HOW TO SET-UP YOUR CLUB TO USE StatusMe
Below are 5 tips for your club to maximize the benefits of using the StatusMe system:
- Creating your club in StatusMe.
- Add the Field Status display.
- Customize the Field Status display.
- Customizing Colors used in the Field Status display.
- Adding the Multiple Club Field Status display to a web page.
- More Field Status display customizing commands.
1) Creating your club in StatusMe:
Have your Club Administrator contact StatusMe at AddClub@StatusMe.com to have your Club set-up and start your *FREE* trial. It only takes a few minutes … StatusMe’s team will:
- Create your club;
- Assign your club a unique club ID number for the field status display (see #2 below);
- Give the appropriate individuals administrator rights to manage your club (i.e. create fields, email groups, and update field status).
2) Add the field status display to a web page:
Simply copy&paste the entire script below into your club’s webpage HTML source code (not in the text display). Then, replace the "999" in the script with your StatusMe Club ID Number. This number is posted on the Participating Clubs page. The script will then dynamically display the current status of the fields directly on your web page(s). (Note – the string must be inserted into the HTML source code directly.)
<script language="javascript" type="text/javascript" src="https://statusme.com/statme/QuickReport.do?assocId=999"></script>
Below is an example of how the script displays field status using StatusMe’s fictional club "Springfield Sports Club".
Springfield Sports Club:
(StatusMe demo club)
3) Customize the Field Status display:
The field status display can be customized by placing style information inside the HTML source code. This code can be placed either in the existing HEAD section (i.e. between the <HEAD> and </HEAD> tags) on the page where the field status information is displayed. Alternatively, the style commands may be placed directly into the HTML source code above the Java Script.
For example, the fictional Springfield Sports Club display above was customized by placing the following commands directly into the HTML code:
<style>
.statusme-report td { border: 1px solid black; }
.statusme-report { border: 1px solid black; }
.statusme-closed-status{background-color:red}
.statusme-limited-status{background-color:yellow}
.statusme-open-status{background-color:#00CD00}
.statusme-name-column {font-size:11px; font-weight: bold; background-color:#DDDDDD}
.statusme-status-column {font-size:12px; font-weight: bold;}
.statusme-date-column {font-size:10px; background-color:#DDDDDD}
.statusme-comment-column {font-size:10px; background-color:#DDDDDD}
.statusme-inactive { font-style: italic; color: #888888}
</style>
See #4 below for more custom commands.
4) Customizing Colors in the Field Status display:
Where colors are specified in the style commands, common basic color names (i.e. Red, Yellow, etc.) can be used. In addition, hundreds of additional colors can be specified using a more specific name or the 6-character Hex code for the color. Various websites have information outlining the various names and hexidecimal codes for a variety of colors.
Color Chart: Hexidecimal Color Chart
Website Reference: RGB to Color Name Mapping
5) Displaying multiple clubs field status on a web page:
If your club has schedule events at another club in the StatusMe Network (i.e. away sports games), you can temporarily (or permanently) add the opposing club’s field status display anywhere on your club’s web page. Our Participating Clubs page shows club’s that use the StatusMe Network and their Club ID. See the current Field Status for the State of Georgia to view an example.
Simply:
a) Find the Club’s ID Number on StatusMe.com’s "Partner
Club" page.
b) Insert the "combined club" Java Script below on your web page.
<script language="javascript" type="text/javascript" src="https://statusme.com/statme/QuickReport.do?assocList=999,888,777"></script>
c) Change the numbers in the list to your Club ID number, then the other club numbers to display. Note – the clubs display in the order listed in the java script.
d) Add the following command to the Styles in order to display the club names in large,
bold text.
.statusme-association-name { font-style: bold; font-size:
20px; }
More Field Status Customizing Commands:
The field status display has additional commands to allow you the flexibility of controlling the look of the field status display on your website. Below are a number of commands that can be used. Remember, these commands must be placed inside the Style controls as noted in #3 above.
a) Add a border around the entire table.
.statusme-report { border: 1px dashed black; }
.statusme-report { border: 1px solid black; }
b) Add a border around each cell in the table.
.statusme-report td { border: 1px solid black; }
c) Suppresses display of the
field status header or certain columns. The default is to display the header..statusme-header { display: none; }
.statusme-comment-column { display: none }
.statusme-date-column { display: none }
d) Customize the
field status header..statusme-header {
font-size: 16px; }
e) Control the color of the entire row based on field status.
.statusme-closed { background-color: red; }
.statusme-open { background-color: #00BB00; }
.statusme-limited { background-color: yellow; }
f) Customize a column font ( font-size: 16px; ), weight ( font-weight: bold; ),
or color ( color: green; )EXAMPLE: .statusme-name-column { font-size: 16px; }
.statusme-name-column {}
.statusme-status-column {}
.statusme-date-column {}
.statusme-note-column {}
g) Customize a column when the field is CLOSED
EXAMPLE: .statusme-closed-status { background-color: yellow }
.statusme-closed-name {}
.statusme-closed-status {}
.statusme-closed-date {}
.statusme-closed-note {}
h) Customize a column when the field is OPEN.
EXAMPLE:
.statusme-open-status
{ background-color: gray}.statusme-open-name {}
.statusme-open-status {}
.statusme-open-date {}
.statusme-open-note {}
i) Customize a column when the field is LIMITED.
EXAMPLE: .statusme-limited-status {background-color:yellow; font-weight:bold}
.statusme-limited-name {}
.statusme-limited-status {}
.statusme-limited-date {}
j) Suppress or italicize/grey-out Inactive fields in the website display.
EXAMPLE:
.statusme-inactive
{ display: color: #888888}.statusme-inactive { display: none; }
.statusme-inactive { font-style: italic; color:
#888888}
k) Add a field description to the website Field Status Display.
Add "&desc=1" to the end of the web display script inserted into your website
EXAMPLE: https://www.statusme.com/statme/QuickReport.do?assocId=999&desc=1