Print-Pro-Matic Inject Logo Before Print Element

This is a quick test to inject a logo at the top of a print-pro-matic page using only css.
In this case, the print element has a class of #post-2182 and it is targeted as normal:

[print-me target="#post-2182"]

However now we add the following css to the our theme:

@media print {
   #post-2182::before {
      content: url(https://spacedonkey.de/wp-content/uploads/2012/09/ninja_turtles-300x223.jpg);
   }
}

This will place the logo in the ::before pseudo class of the targeted print element on the print page. however if the images does NOT exist on the page then it will not have enough time to load before print is triggered. Let’s try it out:

[print-me target="#post-2182" pause_before_print="500"/]

Probably now image right? Now click the print icon again. Image. How to solve this?

Guess we need to use top_html and bottom_html to define custom content and provide a bit of pause_before_print time.

Print-Pro-Matic External CSS Test

Print-Pro-Matic allows loading in an external css file for the print view, rather than have to manually entered all definitions in to the Custom CSS area.

For example, this should load in a css file that gives the target element a lovely purpley dotted border:

[print-me css_url="https://spacedonkey.de/wp-content/uploads/2015/07/purpeat.css" target=".purpeoeater"]

Flyin’ Purple People Eater

Well, bless my soul rock ‘n roll flying’ purple people eater
Pigeon-toed under-growed flyin’ purple people eater
One-eyed one-horned it was a people eater
What a sight to see!

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.

Annual Archive Select Text Test

As version 1.4.1 we added a fancy new attribute called select_text and it works like this:

[archives type="monthly" limit="7" format="option" select_text="Choose Wisely"]

weekly:

T-Countdown Cloud City Style

[tminus t="12-12-2014 08:00:00" style="cloud-city"]

Years
0
0
Months
0
0
Weeks
0
0
Days
0
0
Hours
0
0
Minutes
0
0
Seconds
0
0

Collapse-Pro-Matic Arrows

Default/Left Arrow:
[expand title="arrow to the left"]<-- see that, that's left[/expand]]
[expand title="arrow to the left"]<-- see that, that's left[/expand] Right Arrow: [[expand title="arrow to the right" trigclass="arrowright"]checkout what is to the right -->[/expand]

arrow to the right
checkout what is to the right –>

No Arrow:
[expand title="no arrow to be found" trigclass="noarrow"]the arrow is not to be found[/expand]

no arrow to be found
the arrow is not to be found

Both Left & Right Arrow:
This method requires the extra-trigger feature of Collapse-Pro-Matic and must be built using the roll-your-own method and a bit of css:

Magic CSS

Place the following css in the collapse-o-matic (or collapse-pro-matic) plugin options page, under Custom Style:

.magic_beans {
display: inline;
float: left;
margin-right: 1.2em;
}

.clear {
clear: both;
}

Roll-Your-Own Method w/ Magic CSS

<div class="collapseomatic magic_beans" id="doublearrow" title="double arrows!">double arrows!</div><div class="collapseomatic magic_beans" id="extra-doublearrow"></div>
<div id="target-doublearrow" class="collapseomatic_content clear"><--to the left, to the right--></div>

double arrows!
<--to the left, to the right-->

Archive-Pro-Matic all_is_link Attribute Test

Normally, the before and after attributes work like this:
[archives type="yearly" before="before text " after=" after text"]

  • before text 2021 after text
  • before text 2020 after text
  • before text 2019 after text
  • before text 2018 after text
  • before text 2017 after text
  • before text 2016 after text
  • before text 2015 after text
  • before text 2014 after text
  • before text 2013 after text
  • before text 2012 after text
  • before text 2010 after text

But what if we add a new attribute called ‘all_is_link’ that places the before and after text INSIDE of the html link… and set it like so:
[archives type="yearly" before="before text " after=" after text" all_is_link="true"]

Collapse-O-Matic – The Roll Your Own Method

Using the expand shortcode we can create a simple collapse-o-matic accordion element like so:

[expand title="Trigger Text"]Target Content[/expand]
Trigger Text
Target Content

Now, if we wanted to do the same thing but using the roll-your-own method we would have to create the elements manually:

<div class="collapseomatic " id="my_id"  title="Trigger Text">Trigger Text</div>
<div id="target-my_id" class="collapseomatic_content ">Target Content</div>
Trigger Text
Target Content

Now, we have the freedom to put the target element whatever we want: before, in or after the Trigger element. For example, here a link has been placed between the target and trigger:

<div class="collapseomatic" id="my_new_id"  title="Trigger Text">Trigger Text</div>
<a href="http://plugins.twinpictures.de/premium-plugins/collapse-pro-matic/">Special Link</a>
<div id="target-my_new_id" class="collapseomatic_content ">Target Content</div>
Trigger Text

Special Link

Target Content

Now if we apply a bit of CSS magic, we can have the trigger and link display inline:

Magic CSS

Place the following css in the collapse-o-matic (or collapse-pro-matic) plugin options page, under Custom Style:

.magic_beans {
   display: inline;
   float: left;
   margin-right: 1.2em;
}

.clear {
   clear: both;
}

Roll-Your-Own Method w/ Magic CSS

<div class="collapseomatic magic_beans" id="my_unique_id"  title="Trigger Text">Trigger Text</div><a href="http://plugins.twinpictures.de/premium-plugins/collapse-pro-matic/" class="magic_beans">Collapse-Pro-Matic</a>
<div id="target-my_unique_id" class="collapseomatic_content clear">Target Content</div>

The Final Result

Trigger Text

Collapse-Pro-Matic

Target Content

Roll-Your-Own Method w/ Images

<img src="https://spacedonkey.de/wp-content/uploads/2016/01/2001_Space_Odysey-300x145.gif" class="collapseomatic noarrow" id="some_id" title="Hover over Trigger Text">
<div class="collapseomatic_content" id="target-some_id" >Target Content</div>

Required components:

  • Trigger:
    • class=”collapseomatic noarrow”
    • id=”some_id”
  • Target:
    • class=”collapseomatic_content”
    • id=”target-some_id”

Demo:

Target Content

Highlander Grouping

Highlander grouping is accomplished by adding data-group=”group_name-highlander” like so:

<div class="collapseomatic" id="monkey" data-group="animal-highlander" title="Monkeys">Monkeys</div>

<div id="target-monkey" class="collapseomatic_content">The monkey says Eek! Eek!</div>

<div class="collapseomatic" id="donkey" data-group="animal-highlander" title="Donkeys">Donkeys</div>

<div id="target-donkey" class="collapseomatic_content">The Donkey says Hee Haw</div>

Demo

Monkeys
The monkey says Eek! Eek!
Donkeys
The Donkey says Hee Haw