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?
Expand All | 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*:
Expand All | 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>
Expand All | Collapse All |