The Basic Meeting List Toolbox

The [[BMLT_SIMPLE]] Shortcode Example 4

In this example, we’ll do exactly the same thing as in the second example, but now we will add a weekday header. I’ll skip the interim steps, and just show you the results (and the CSS used to achieve them).

The shortcode we’re using looks like this: [[bmlt_simple(1339674838##-##switcher=GetSearchResults&services=1045&block_mode=1&weekday_header=1)]].

Monday
Wappingers, NY, 12590
Keep Hope Alive
7:30 PM
Monday
O,B
Yorktown Heights, NY, 10598, USA
Yorktown Recovery
7:30 PM
Monday
C,B,WC
Tuesday
Katonah, NY, 10536, USA
End of the Road
7:45 PM
Tuesday
C,St,TW,WC
Thursday
Yorktown Heights, NY, 10598, USA
Yorktown Recovery
7:30 PM
Thursday
C,St,WC
Hopewell Junction, NY, 12533, USA
Searching For Serenity
7:45 PM
Thursday
C,D,St
Saturday
Pawling, NY, 12594
Practicing Principles In Pawling
11:00 AM
Saturday
SD,St,BK
Katonah, NY, 10536
Just for Tonight
9:00 PM
Saturday
JT,SD

The CSS for this is a bit more involved than for the <table>-based display:

div#bmlt_simple_shortcode_demo_div_2 span.c_comdef_search_results_province,
div#bmlt_simple_shortcode_demo_div_2 span.c_comdef_search_results_nation,
div#bmlt_simple_shortcode_demo_div_2 span.c_comdef_search_results_zip
{
    display:none;
}

div#bmlt_simple_shortcode_demo_div_2 div.bmlt_simple_meeting_one_meeting_format_div
{
    text-align:right;
}

div#bmlt_simple_shortcode_demo_div_2 div.bmlt_simple_meetings_div div.bmlt_alt_0
{
    background-color:#efefef;
}

div#bmlt_simple_shortcode_demo_div_2 div.bmlt_simple_meetings_div div.bmlt_alt_1
{
    background-color:#fff;
}
div#bmlt_simple_shortcode_demo_div_2 div
{
    font-family:"Papyrus";
    font-size:small;
}

div#bmlt_simple_shortcode_demo_div_2 div.bmlt_simple_meeting_one_meeting_div
{
    display:table;
    width:100%;
}

div#bmlt_simple_shortcode_demo_div_2 div.bmlt_simple_meeting_one_meeting_div div
{
    float:left;
    padding:0.5em;
    
}

div#bmlt_simple_shortcode_demo_div_2 div.bmlt_simple_meeting_one_meeting_town_div
{
    width:10%;
}

div#bmlt_simple_shortcode_demo_div_2 div.bmlt_simple_meeting_one_meeting_town_div
{
    width:10%;
}

div#bmlt_simple_shortcode_demo_div_2 div.bmlt_simple_meeting_one_meeting_town_div
{
    width:10%;
}

div#bmlt_simple_shortcode_demo_div_2 div.bmlt_simple_meeting_one_meeting_name_div
{
    width:20%;
}

div#bmlt_simple_shortcode_demo_div_2 div.bmlt_simple_meeting_one_meeting_time_div
{
    width:5%;
}

div#bmlt_simple_shortcode_demo_div_2 .bmlt_simple_meeting_one_meeting_weekday_div
{
    display:none;
}
    
div#bmlt_simple_shortcode_demo_div_2 div.bmlt_simple_meeting_one_meeting_address_div
{
    width:30%;
}

div#bmlt_simple_shortcode_demo_div_2 div.bmlt_simple_meeting_one_meeting_format_div
{
    width:10%;
}

div#bmlt_simple_shortcode_demo_div_2 div.bmlt_simple_meeting_one_meeting_div div.bmlt_clear_div
{
    clear:both: !important;
    float:none !important;
    padding:none;
    margin:none;
}

div#bmlt_simple_shortcode_demo_div_2.demo2 table#lhv_demo_layout_table_4 td.legend_td td
{
    font-size:xx-small;
    font-family:Arial,San-serif
}

div#bmlt_simple_shortcode_demo_div_2.demo2 table#lhv_demo_layout_table_4 td.bmlt_simple_format_one_format_key_td
{
    font-weight:bold;
}

div#bmlt_simple_shortcode_demo_div_2 .weekday-header
{
    float:left;
    padding:0.5em;
    font-weight:bold;
    font-size:large;
}
div#bmlt_simple_shortcode_demo_div_2 .bmlt_separator {
	display: none;
}

The display:table; rules tell the <div> elements to react to their content; not their context. That means they won’t let the content overflow, like regular <div> (display:block;) elements behave.