Posted on

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 Custom Print Page Style in the plugin options page:

#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. Let’s try it out:

Of course, with Print-Pro-Matic, if you want to add the logo to EVERY print page, you can simply use the Print Page Top HTML field to place any html, including images, in the upper part of the print page.

Keep in mind: When working with images that where not available on the display page (and therefore in the users cache) a bit of pause before print time will be needed to give the image time to load before triggering the print dialogue box.

Posted on

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!