See the full Alt Sternburg Brauerei Set on Seene
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]Collapse-Pro-Matic Accessibility & Anchor Link Test
This is a test of the changes with version 1.2.8 of Collapse-Pro-Matic.
First up: some basic improvements to Accessibility. For example, when an expand element has focus, it’s the same as if the element is being hovered over.
Tab to give focus
Now when you press enter, the content should be expanded
Collapse Commander Alt Test
[expand cid="2039"/]
Alt Test
This is a test of the alt tag in a expand element
Collapse-Pro-Matic Setall with Highlander Grouping
This is a demonstration of how to use Highlander Grouping and Setall trigclass to manage the expand/collapse all triggers:
[expand title="Expand All" swaptitle="Collapse All" trigclass="setall" rel="my_group-highlander"/]
[expand title="expand 1" rel="my_group-highlander"]this is the first expand item[/expand]
[expand title="expand 2" rel="my_group-highlander"]this is the second expand item[/expand]
[expand title="expand 3" rel="my_group-highlander"]this is the thrid expand item[/expand]
[expand title="expand 4" rel="my_group-highlander"]this is the thrid expand item[/expand]
Expand All
expand 1
this is the first expand item
expand 2
this is the second expand item
expand 3
this is the thrid expand item
expand 4
this is the thrid expand item
Collapse-O-Matic Content Filtering
Without Filter Attribute (default off)
Plain Text
[expand title="plain text"]This is just some blibber blabber text[/expand]
plain text
This is just some blibber blabber text
Text with Shortcode
[expand title="text with shortcode"]This is text with a shortcode [tminus_launch_date cid="1921" format="Y-m-d"][/expand]
text with shortcode
This is text with a shortcode [tminus_launch_date cid=”1921″ format=”Y-m-d”]
With Filter Attribute False
Plain Text
[expand title="plain text" filter="false"]This is just some blibber blabber text[/expand]
plain text
This is just some blibber blabber text
Text with Shortcode
[expand title="text with shortcode" filter="false"]This is text with a shortcode [tminus_launch_date cid="1921" format="Y-m-d"][/expand]
text with shortcode
This is text with a shortcode [tminus_launch_date cid=”1921″ format=”Y-m-d”]
With Filter Attribute True
Plain Text
[expand title="plain text" filter="true"]This is just some blibber blabber text[/expand]
plain text
This is just some blibber blabber text
Text with Shortcode
[expand title="text with shortcode" filter="true"]This is text with a shortcode [tminus_launch_date cid="1921" format="Y-m-d"][/expand]
text with shortcode
This is text with a shortcode [tminus_launch_date cid=”1921″ format=”Y-m-d”]
Blast From the Past – Archive-O
select your year…
Print-O-Matic Icon Inline-Block CSS
This is how you modify the print-icon to have it show up in a simple menu. If we start with a simple right-aligned menu:
<p style="text-align: right;"><span class="expandall">Expand All</span> | <span class="collapseall">Collapse All</span> | [print-me]</p>
See how the icon jumps to it’s own line?
| Collapse All |
Let’s fix that.
Step one, assign a some new CSS rules for an id element:
#my_print_id {
display: inline-block;
}
#my_print_id:before, #my_print_id:after{
content: none;
}
Step two, insert a roll-your-own* version of the shortcode like so:
<p style="text-align: right;"><span class="expandall">Expand All</span> | <span class="collapseall">Collapse All</span> | <span class="printomatic pom-small" id="my_print_id"><input type="hidden" id="target-my_print_id" value="article"></span></p>
BAM, it’s working*:
| Collapse All |
*Note: the roll-your-own method shown above only works for print-o-matic versions 1.5.7 and older. This will not work with print-pro-matic or versions 1.6.0 or newer.
Now lets’s try something new. We have added tag and class attributes to version 1.6.0 so we can now do something like:
The Jedi Way
.my_print_class {
display: inline-block;
}
.my_print_id:before, .my_print_id:after{
content: none;
}
And we add our shortcode with the new tag and class attributes:
<p style="text-align: right;"><span class="expandall">Expand All</span> | <span class="collapseall">Collapse All</span> | [print-me printstyle="pom-small" class="my_print_class" tag="span"]</p>
| Collapse All |
Collapse Commander Templates
Test of the new Template feature in Collapse Commander. Template 1885 should expand the target above the trigger.
[expand title="Trigger Text" template_id="1885"]This is a test using template number 1885[/expand]
Trigger Text
This is a test using template number 1885
Example using cid:
[expand cid="2039"/]Alt Test
This is a test of the alt tag in a expand element
Expand Trig:
I’m a little donkey
Expand Targ:
Stuck in a manhole cover until someone pulled me out.
Grouping Collapse-Pro-Matic Setall Subexpands
Introducing ‘togglegroup’ a new attribute that can be used instead of rel and highlander grouping for collapseall/expandall/setall toggles.
Here is a list of expand elements with nested expansub elements:
[expand title="main 1" rel="main-highlander" togglegroup="group_1"] This is the first main section and it has multiple sub sections:
[expandsub1 title="sub a" rel="sub-highlander" togglegroup="group_1"]sub section a[/expandsub1]
[expandsub1 title="sub b" rel="sub-highlander" togglegroup="group_1"]sub section b[/expandsub1]
[expandsub1 title="sub c" rel="sub-highlander" togglegroup="group_1"]sub section b[/expandsub1]
[/expand]
[expand title="main 2" rel="main-highlander" togglegroup="group_1"] This is the second main section and it has multiple sub sections:
[expandsub1 title="sub d" rel="sub-highlander" togglegroup="group_1"]sub section d[/expandsub1]
[expandsub1 title="sub e" rel="sub-highlander" togglegroup="group_1"]sub section e[/expandsub1]
[expandsub1 title="sub f" rel="sub-highlander" togglegroup="group_1"]sub section f[/expandsub1]
[/expand]
And here is a list of the different types of expandall/collapseall and toggle triggers that may be used.
Shortcode
[expand title="Expand All" swaptitle="Collapse All" trigclass="setall"/]
[expand title="Expand Main" swaptitle="Collapse Main" trigclass="setall" rel="main-highlander"/]
[expand title="Expand Sub" swaptitle="Collapse Sub" trigclass="setall" rel="sub-highlander"/]
[expand title="Expand Group 1" swaptitle="Collapse Group 1" trigclass="setall" togglegroup="group_1" /]
Roll-Your-Own
<span class="expandall">Expand All</span>
<span class="collapseall">Collapse All</span>
<span class="collapseomatic setall noarrow" id="my_toggle_id" title="Expand All">Expand All Toggle</span>
<span id="swap-my_toggle_id" class="colomat-swap" style="display:none;">Collapse All Toggle</span>
<span class="collapseomatic setall noarrow" id="my_other_toggle_id" title="Expand Group 1" data-togglegroup="group_1">Expand Group 1 Toggle</span>
<span id="swap-my_other_toggle_id" class="colomat-swap" style="display:none;">Collapse Group 1 Toggle</span>
Demo
Expand Elements
main 1
This is the first main section and it has multiple sub sections:
sub a
sub section a
sub b
sub section b
sub c
sub section b
main 2
This is the second main section and it has multiple sub sections:
sub d
sub section d
sub e
sub section e
sub f
sub section f
Shortcode Triggers
Expand All
Expand Main
Expand Sub
Expand Group 1
Roll-Your-Own Triggers
Collapse All
Expand All Toggle
Expand Group 1 Toggle
Orphan Element
This is an expand element is not grouped with anything.
Pee Wee The Loaner
I am a loaner, Dotty. There are things about you me wouldn’t understand…. you shouldn’t understand