WordPress for Toastmasters*The latest release of the WordPress for Toastmasters software includes an option to show green / yellow / red “stoplight” timing guidelines on the agenda. This was a request I received some time ago from a club that had been doing something like this with a Microsoft Word template. It took me a while to figure out how to pull it off.
The stoplight option is available to anyone who wants to turn it on. When logged in as administrator, go to Settings -> Toastmasters and you will see a place to turn stoplight display on or off. See also Manually Adding Stoplight Display with a Shortcode.
The other improvements are more targeted to club webmasters with knowledge of CSS stylesheet language, making it easier to change the fonts and alignment of elements within the agenda design.
Here is an example of stoplight colors on the agenda:
For speeches, this works as long as the range of allowable times for a speech is specified, for example (“5-7 minutes” or “5 to 7 minutes”). The software parses that text and tries to come back with the appropriate green/yellow/red times. In slightly more complicated cases, like a presentation followed by a Q&A, the software tries to show the timing for each phase.
In most cases, it works pretty well. However, if the software gets it wrong, be prepared to download the agenda to Word and make some final tweaks as a backup plan. Unfortunately, the colors do not translate into Word format, but the information does.
Things to consider when deciding whether to turn on this option:
- Do you typically print your agenda in color?
- How long is your agenda. Showing these color indicators does take up a little more room.
- Do you have members, particularly new members, who would benefit from having the green/yellow/red break points clearly explained on the agenda?
Update Oct. 2017: In the latest release, the text for timing such as “5 to 7 minutes” is omitted from the agenda in favor of the green/yellow/red display in the simple case where only a start and end time is specified. In more complicated cases, like a speech followed by a Q&A, the text appears on the agenda to make the intent clearer. The coding has also been tweaked so the colors are preserved if you download your agenda to Microsoft Word rather than printing it from the website.
Tweaking the Agenda CSS
The information below is for the more technical club webmasters who may want to change my default agenda formatting. However, there are a few hints on the settings page for how to meet common needs like adjusting the size of the font used on the agenda.
If you copy and paste one of the suggested code snippets for altering the font size into the Agenda CSS Customization box, adjust the font-size number up or down, and save your settings, the font size on your agenda will change.
Any CSS code you add on this screen will override the default formatting commands.
If you set the agenda to “custom” rather than “sidebar” or “plain” you get additional options to customize your CSS, as well as the HTML structure of the page. By default, I use a table layout to divide the sidebar from the main text of the agenda because it works better with the Download to Word function.
If you created a custom agenda layout previously, you may be prompted to update it for consistency.
Here are some of the things you might want to target with your CSS customizations.
- div.manual – manual project text, which is smaller by default
- div.indent – amount of indenting for indented items
- .role-agenda-item – wraps around all the details about a role, assignment, and speech project
- .role – name of the role, bold by default
- .member-role – name of the member, no special styling by default
- .role_agenda_note – the explanatory note at the bottom of a role, italic by default
- .role_number – for roles with multiple assignments, such as Speaker and Evaluator, are now shown as Speaker 1, Speaker 2, etc. by default. If you do not want that displayed you could set it to {display: none;}
Also note the code below tagging for the lists inside of the .role-agenda-item div. Although the list of role assignments is is tagged as a list, by default we do not show bullets next to each item. But you can change that.
.role-agenda-item ul {
list-style-type: none;
padding-left: 0;
margin-left: 0;
}
Your Suggestions Are Welcome
If you come up with a different agenda styling that you think ought to be the new default, let me know: david@wp4toastmasters.com
