Year: 2015
June 2015
August 2015

Posted on

Collapse-O-Matic Collapse-Pro-Matic Inline Test

Test 1

<h7>Test Header</h7>
<strong>Strong Text</strong>
This is a bit of text that goes on for awhile just to create the illusion that there is something important to say. After some time we might want to create a little teaser for [expand title="Read more" swaptitle="Read Less" trigclass="arrowright" targpos="inline" targtag="span" trigpos="below"]this text that was hidden but now is not. [/expand]

Test Header
Strong Text
This is a bit of text that goes on for awhile just to create the illusion that there is something important to say. After some time we might want to create a little teaser for this text that was hidden but now is not.

Read more

What if we placed all of this inside a LI element:

  • Test Header
    Strong Text
    This is a bit of text that goes on for awhile just to create the illusion that there is something important to say. After some time we might want to create a little teaser for this text that was hidden but now is not.
    Read more

Paragraphs

If the shortcode needs to be placed inside a paragraph, it’s best to use the roll-your-own method like so:

This is a paragraph of text that we just are going to throw in here. You might not like the text, as it really just rambles on and on, but it does fill the purpose of filler text. this is the <div id="target-paratest" class="collapseomatic_content_inline colomat-inline span_fix" style="display: inline;">last text in the first paragraph.
<p>This is the next paragraph of text</p>
<p>This is the final paragraph of text</p></div> <span class="collapseomatic span_fix noarrow" id="paratest" title="Read more..." tabindex="0">Read more...</span> <span id="swap-paratest" class="colomat-swap" style="display:none;">Read less...</span>
<p>Now let's see what happens.</p>

This is a paragraph of text that we just are going to throw in here. You might not like the text, as it really just rambles on and on, but it does fill the purpose of filler text. this is the

last text in the first paragraph.
This is the next paragraph of text

This is the final paragraph of text

Read more…

Now let’s see what happens.

Posted on

Column-Matic Responsive CSS

This is a quick demo on how to set up responsive columns with Column-Matic. In this demo will will display three columns that will then stack vertically once the screen size drops below a certain width.

The CSS

.my_column {
    width: 23%;
    margin-left: 5%;
    padding-left: 5%;
}

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

Shortcode

[[column class="my_column"]...[/column]][[column class="my_column"]...[/column]][[column class="my_column"]...[/column]][[end_columns]]

Result

[column class=”my_column”]Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.[/column][column class=”my_column”]Ex cum quas aeque, alii constituto nam in. Id vocibus mandamus suscipiantur vim, mel ad ipsum convenire maluisset. His vocent accusata torquatos an, ei dicat tation pro, et suavitate definitiones pro. Mei perfecto tincidunt ea, omnesque efficiendi interesset in mei.[/column][column class=”my_column”]Lorem ipsum dolor Cu eam probo phaedrum philosophia, sed eu iisque persius repudiandae. An ferri mollis deseruisse qui, te dicit mnesarchum est, nonumy docendi tincidunt sit cu. Mei at munere admodum.[/column] [end_columns]