The [[BMLT_SIMPLE]] Shortcode Example 1 – The Basic Meeting List Toolbox

INTRODUCTION

This shortcode will access the Greater New York Region Root Server. It will display the entire ASC meeting list for the Lower Hudson Valley ASC. This is a very small ASC that only has a few meetings. Displaying the interactive meeting search (the standard

[<i></i>[bmlt]]

shortcode) is not really optimal. Folks would much rather see a simple table.

We’ll give them that. We’ll also use evil <table> elements, as opposed to <div> elements. These examples all use the following shortcode:

[<i></i>[bmlt_simple(1339674838##-##switcher=GetSearchResults&services=1045)]]

. We simply have them wrapped in different class elements, so we can selectively add styles. Each of these is a “live” rendering from the Greater New York Region server. That means that this page will load slowly. Can’t be helped.

[[bmlt_simple(1339674838##-##switcher=GetSearchResults&services=1045)]]

Now, this is pretty basic, but it has a lot of “noise.” For example, we don’t need to display the state and zip codes. People know where the towns are (it’s for a local constituency). Let’s hide those with CSS.

We add the following CSS to the site CSS:

div#bmlt_simple_shortcode_demo_div table#lhv_demo_layout_table_2 span.c_comdef_search_results_province,
div#bmlt_simple_shortcode_demo_div table#lhv_demo_layout_table_2 span.c_comdef_search_results_nation,
div#bmlt_simple_shortcode_demo_div table#lhv_demo_layout_table_2 span.c_comdef_search_results_zip
{
    display:none;
}

[[bmlt_simple(1339674838##-##switcher=GetSearchResults&services=1045)]]

That’s nice, but the gridlines are kinda fugly. Let’s replace them with alternating backgrounds.

We add the following CSS to the site CSS:

div#bmlt_simple_shortcode_demo_div table#lhv_demo_layout_table_3 table,
div#bmlt_simple_shortcode_demo_div table#lhv_demo_layout_table_3 tr,
div#bmlt_simple_shortcode_demo_div table#lhv_demo_layout_table_3 td
{
    border:none;
}

div#bmlt_simple_shortcode_demo_div table#lhv_demo_layout_table_3 tr.bmlt_alt_0
{
    background-color:#efefef;
}

[[bmlt_simple(1339674838##-##switcher=GetSearchResults&services=1045)]]

OK, now let’s relax the font a bit. Since we’re using <table> elements, we’re already going to Hell. Let’s have some fun on the way:

We add the following CSS to the site CSS:

div#bmlt_simple_shortcode_demo_div table#lhv_demo_layout_table_4
{
    font-family:"Papyrus";
    font-size:small;
}

[[bmlt_simple(1339674838##-##switcher=GetSearchResults&services=1045)]]

This shows how we can apply some simple CSS to the most basic <table>-based layout to provide an attractive (ahem -in the eye of the beholder) and simple layout that looks exactly like it was coded directly into the page HTML.

NOTE FOR ANTI-TABLE ZEALOTS: You can certainly do this kind of thing without using <table> elements, but tables were developed to display tabular data. These meeting searches certainly qualify as “tabular data,” and provide a near-perfect example of the type of thing for which tables were developed.

Don’t be one of these people who’s only tool is a hammer. The right tool for the job.