Category: Uncategorized

March 2013

June 2013

Column-Matic Shortcode

[[column class="column_left" float=""]Yada yada, spiffy logo image with a funky monkey and a wiffle-ball bat.[/column]]
[[column class="column_right" float=""]Yippy Skippy another logo image with a ding-ding-dong touching tra-la-la.[/column]]
[[end_columns]]

CSS

For normal screens:

.column_left {
    margin-left:0;
    float:left;
    width: 40%;
}
.column_right {
    float: left;
    margin-left: 10px;
    border-left: 1px dotted red;
    padding-left: 10px;
    width: 40%; 
}

For Screens smaller than 450px wide:

@media (max-width: 450px) {
    .column_left, .column_right{
        width: 95%;
        margin: 0 auto;
                padding: 3px;
        clear: both;
        border: none;
    }
}

targtag="span" targpos="inline"
Note: if your theme uses :befor and :after pusdo classes for span we need to assign special classes to remove these.
trigclass="span_fix" targclass="span_fix"

CSS

.my_trigger:hover {
text-decoration: underline;
}
.span_fix {
padding: 0 !important;
margin: 0 !important;
}
.span_fix:before, .span_fix:after {
content:  none;
}

Inline Trigger Text

[expand title="just some text as an in-line trigger" tag="span" targtag="span" targpos="inline" trigclass="my_trigger span_fix noarrow" targclass="span_fix"]...[/expand]

Demo 01:

This is an example of some text with [expand title="just some text as an in-line trigger" tag="span" targtag="span" targpos="inline" trigclass="my_trigger span_fix noarrow" targclass="span_fix"]...[/expand] with some small text at the end.

This is an example of some text with just some text as an in-line trigger with some more text coming after. The Central African jungle? We’ve been there. The tunnels under Sao Paulo where you’ll find some of the world’s best art? Sure. Penguins? We love them – just be careful about that wave that’s about to hit our cinematographer there in the center of that photo. with some small text at the end.

Demo 2:

[expand title="the_title" tag="h4" targtag="span" targpos="inline" targclass="span_fix" excerpt="the_excerpt"]the_content[/expand]

WANT TO HAVE COFFEE?

To hide the hours in the jedi style via css:

.jedi-hours_dash{
display: none;
}

A quick example of how to link to—and autoexpand—a collapse-o-matic element on the same page. Key: Assign the link a class of expandanchor like so:

[expand title="question 1" id="q1"]answer 1[/expand]
[expand title="question 2" id="q2"]answer 2[/expand]
[expand title="question 3" id="q3"]answer 3[/expand]
<a class="expandanchor" href="#q1">question 1</a>
<a class="expandanchor" href="#q2" rel="m_PageScroll2id">question 2</a>
<a href="#q3">question 1</a>