Examples and Demos
Here you can find many examples and demos for Print-O-Matic.
Style Sheet
The printer icons are defined by the included default style sheet as follows:
.pom-default {
background-image: url('print-icon.png');
background-repeat: no-repeat;
width: 32px;
height: 32px;
}
.pom-small {
background-image: url(‘print-icon-small.png’);
background-repeat: no-repeat;
width: 17px;
height: 16px;
}
.pom-small-black {
background-image: url(‘print-icon-small-black.png’);
background-repeat: no-repeat;
width: 17px;
height: 16px;
}
.pom-small-grey {
background-image: url(‘print-icon-small-grey.png’);
background-repeat: no-repeat;
width: 17px;
height: 16px;
}
.pom-small-white {
background-image: url('print-icon-small-white.png');
background-repeat: no-repeat;
width: 17px;
height: 16px;
}
Shortcode
The basic shortcode is [print-me] and can be placed on any post or page.
Target Attribute
By default the target element to be printed is ‘article’. This can be changed by assigning any html Element, Class, or Id.
Element
[print-me target="body"]
Class
[print-me target=".element_class_to_print"]
Id
[print-me target="#element_id_to_print"]
Placeholders
As of version 1.4 the placeholder %ID%
may be used to automatically insert the post ID.
[print-me target="#post-%ID%"]
As of version 1.5.5 two new placeholders where added: %prev%
and %next%
to print elements immediately preceding or following the print button.
[print-me target="%prev%"]
[print-me target="%next%"]
Multiple Targets
Multiple targets can be assigned using a comma to separate them. So, for example, lets say we wanted to assign an element with an ID of ‘elem1’ and some other element that has been assigned a class of ‘elem2’.
[print-me target="#elem1, .elem2" /]
Pretty cool, right?
Do Not Print Attribute
The do_not_print attribute may be used to prevent content elements inside the target container from being printed. The following code would display but not print any content inside all elements assigned the class of “noprint”.
[print-me do_not_print=".noprint"]
Print Only Attribute
This feature is available in the pro version only.
The print_only attribute may be used to assign content elements by Element, ID or CLASS that are to be displayed only on the print page. Print Only content will be hidden until printed. The following code would not display but only print any content inside all elements assigned the class of “printonly”.
[print-me print_only=".printonly"]
Force Visible Attribute
This feature is available in the pro version only.
The force_visible attribute may be used to assign content elements by Element, ID or CLASS that are to be displayed on the print page even if hidden on the display page. The following code would display and print any content inside all elements assigned the class of “printme” even if the elements are hidden.
[print-me force_visible=".printme"]
Printicon Attribute
By default the print icon will be displayed. A text-only link may be used by setting the printicon attribute to false.
[print-me printicon="false"]
Printstyle Attribute
Defines which printer icon should be used. If the printicon attribute is NOT set to false, a default printer icon will be used. The following alternative printer icons may be assigned:
[print-me printstyle="pom-small"]
[print-me printstyle="pom-small-black"]
[print-me printstyle="pom-small-grey"]
[print-me printstyle="pom-small-white"]
if you are inserting the shortcode for an external trigger:
[print-me printstyle="external"]
ID Attribute
The id attribute will assign the printer-icon a specific id.
[print-me id="my_custom_id"]
If no ID attribute is defined, a random, unique ID will be automatically assigned.
Class Attribute
The optional class attribute can be used to add a specific class to the print-me element.
[print-me class="my_custom_class"]
Tag Attribute
The optional tag attribute can be used to change the html element that wraps the print-me icon.
[print-me tag="span"]
If no tag attribute is defined, a div element will be used.
Title Attribute
The title attribute will create a text link with the value. Also, if no alt attribute is assigned, this will be the roll-over text of the printer-icon (if used).
[print-me title="Print Form"]
Alt Attribute
The Alt attribute will override any fly-over text of both the printer-icon and the title link.
[print-me alt="Click me to print"]
Pause Before Print Attribute
The pause_before_print attribute will manually pause triggering the print dialogue, allowing time for the print-page to fully load. Simply set the amount of time in milliseconds.
[print-me pause_before_print="3000"]
The above code will cause the print page to wait 3 seconds (3000 milliseconds) before triggering the print dialogue box.
Print-O-Matic Options
The options page for Print-O-Matic is located under the Settings menu on the Dashboard and is used to set default attribute values. Any default attributes values set in the options page can be overwritten by assigning the attribute inside the shortcode. The following options are currently available:
- Default Target Attribute—Print target. See Target Attribute for more info
- Use Print Icon:—See Printicon Attribute above for more info
- Printer Icon:—See Printstyle Attribute above for more info
- Custom Style—Custom CSS for the display page
- Use Theme CSS For Print Page—Use theme style for print page
- Custom Print Page Style—Custom CSS for the print page
- Do Not Print Elements—Content elements to exclude from the print page
- Print Page Top HTML—Custom HTML to be added to the top of the print page
- Print Page Bottom HTML—Custom HTML to be added to the bottom of the print page
- Shortcode Loads Scripts—Only load Print-O-Matic scripts if shortcode is used
- Activate jQuery fix.clone—Addresses known bug with jQuery clone and textboxes
Custom CSS Examples
Here are some helpful CSS samples for use in the Custom Style section of the Options Page.
Display Printer Icon Right
.printomatic {
float: right;
}
Display Printer Icon Center
.printomatic {
margin: 0 auto;
}
Display Default Printer Icon and Text Inline
.printomatic{
float: left;
}
.printomatictext {
float: left;
margin-top: 2px;
margin-left: 2px;
}
Display Default Printer Icon Centered Over Text – Page Left
.printomatic{
margin-left: 10px;
}
Display Default Printer Icon Centered Over Text – Page Center
.printomatic{
margin: 0 auto;
}
.printomatictext{
text-align: center;
}