Adding a Customizable Agenda Layout - WordPress for Toastmasters*

Club leaders who want a different look for their meeting agenda than provided by my suggested design can now take matters into their own hands, particularly if they know (or are willing to learn) HTML and CSS coding.

Until recently, there were two agenda layout options, “plain” and “sidebar”, with sidebar as the one I have been promoting by default. The agenda layout with sidebar gives you a sidebar on the left hand side of the page to use for information like the club mission, notes on upcoming district events, and a listing of club officers.

Now, there is a 3rd option, “custom,” on the Toastmasters settings screen in WordPress. When you select “custom,” a new document named “Agenda Layout” will be added to the listing under RSVP Events. You will also see a link on the Toastmasters settings screen labeled “Edit Custom Agenda Layout.”

When you edit this document, you will have access to the basic HTML structure of the agenda, with placeholders showing for the data that gets pulled from the database. Beneath the content editing box, you will also see a place where you can alter the CSS (Cascading Style Sheets) code used to style and format the content. You will be starting with essentially the same layout as “sidebar” but can alter it however you would like.

Here is an example of a layout with a different header image:

customizable-agenda-result — Custom header image for agenda

and here is what the Agenda Layout document looks like in the WordPress editor:

customizable-agenda-editor — Customized agenda layout in the editor

If you toggle the Text tab of the editor to see the underlying code, you will find I used a simple table layout to separate the sidebar content from the main agenda content (roles and who is filling them).

The bracketed codes are placeholders known as shortcodes in WordPress jargon. These pull in the database-generated content that will be used to fill in the details for a specific meeting agenda.

[tmlayout_club_name] – pulls in the club name, using the website title. You could delete this and just type in the name, since you’re customizing this specifically for your club.

[tmlayout_meeting_date] – displays the meeting date.

[tmlayout_sidebar] – displays the sidebar content

[tmlayout_main] – displays the main agenda content of roles and assignments

You can make some basic changes to the structure and organization of the agenda by for example changing the table layout or by replacing the table cells with divs and aligning those divs with CSS. It helps to have some knowledge of CSS, but you may be able to puzzle out some details by sight.

For example, this block of code —

body, p, div, td, th { font-size: 12px; line-height: 1.3; font-family:"Times New Roman", Times, serif; }

— defines the base font size for most of the text on the agenda. By changing 12px to 14px or 18px, you could make the font larger.

Or to change just the paragraphs within the table cell for the agenda listing, which has an id of “agenda”, you could do this:

#agenda p { font-size: 16px; }

When I first experimented with changing the page banner, it didn’t come out right because I added the image into a div with an id=”banner” that had a fixed height, and the new image was larger. I solved that issue by eliminating the div tag.

At least one person who contacted me specifically wanted to change the banner at the top of the agenda, so I hope this capability will be useful.

Whatever changes you decide to make, be prepared to experiment before you get it right. Good luck. If you come up with a design you are proud of, let me know — maybe your work can be the source for a new, improved default agenda layout for others.

If you do change the HTML structure, keep in mind that some HTML coding works better in the context of the feature that allows you to download the agenda to Microsoft Word. That is one of the reasons I used table formatting to separate the sidebar from the rest of the agenda, as opposed to divs with CSS positioning.

Note: For those hosting their own websites, both RSVPMaker and RSVPMaker for Toastmasters must be upgraded for this feature to become available.