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:

[<i></i>[bmlt_simple(1339674838##-##switcher=GetSearchResults&amp;services=1045&amp;block_mode=1<strong style="color: red;">&amp;weekday_header=1</strong>)]]

.

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

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.