Custom Formatting of Print Output

  • Hi,
    Hopefully an easy question.

    Firstly, I love the plugin and it is so easy to get started, however…

    How do I modify the print output page style? I want to increase the font size on the printer output (but not the screen)

    I’m assuming that /print-o-matic/css/styles.css is where I need to go.

    I’ve tried modifying the css as follows:

    @media print {

  // existing css
  .pe-no-print {
    display: none !important;
   }

  .pe-preserve-ancestor {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    box-shadow: none !important;
  }

  // my css
  div, form, p, input { 
    margin-left:15em; 
    color:#000066; 
    font-size:20pt; 
    float:none; 
    width:auto; 
  }    
}

    This seems to have no effect. When I select print, the print preview window is not affected by anything I seem to do.

    Do you have any code examples I can access? Am I modifying the right file?

    The css samples and references in your documentation appear to refer to the styling of the [Print Me] link on the webpage, not the printer output.

    I’m using Print-O-Matic 2.1.7, Divi 4.17.4 & WordPress 6.0
    I’m printing selected html elements by #id – this works well
    The elements are <input> elements wrapped in nested <div>’s – hence my css attempt

    ALSO – while I’m here.. I’ve tried using the tag=”span” option in the shortcode but it seems to have no effect. The print Title and Icon always use <div>

    I’m using the following shortcode
    [print-me tag="span" target="#et_pb_contact_reason_0, #et_pb_contact_single_0, #et_pb_contact_fname-1_0, #et_pb_contact_lname-1_0, #et_pb_contact_membership-number_0" title="Print Covering Note for Envelope"/]

    Thanks in advance, Jerry

    The page I need help with: [log in to see the link]

Viewing 3 replies - 1 through 3 (of 3 total)
  • Plugin Contributor twinpictures

    (@twinpictures)

    Hello. happy to help.
    You are over thinking this a bit. Do not modify the /print-o-matic/css/styles.css file, as this will be overwritten with each plugin update. Rather, under the settings > print-o-matic under Print CSS you can simply add the css for the @media print like so:

    div, form, p, input { 
    margin-left:15em; 
    color:#000066; 
    font-size:20pt;
    float:none; 
    width:auto; 
}

    if your theme already has css for @print, then you might need to add the important tag to the font-size definition:
    font-size:20pt !important;

    The css samples and references in your documentation appear to refer to the styling of the [Print Me] link on the webpage, not the printer output.

    This is because the documentation is regarding our plugin, not for @media print CSS. If you need assistance with CSS there are many resources available. Here is one you might find useful from way back in 2011:
    https://www.smashingmagazine.com/2011/11/how-to-set-up-a-print-style-sheet/

    If changes to the shortcode are not having an effect, this leads me to believe there is a caching issue. Is a cashing plugin installed? Have you tried clearing the cache?

    Thread Starter jerrystewart99

    (@jerrystewart99)

    Hi

    Thanks for your rapid response .. awesome ??

    Yes, you’re correct, I was overthinking. I’ve got the print formatting sorted now.

    Your docs imply that the print formatting css in Print-O-Matic will be deprecated, so I put my css in the ‘Theme Customizer->Additional CSS.. and thanks for the helpful link.

    I’m still having an issue with the tag shortcode option though.

    My aim is to have the printicon inline with previous text so I assumed that the Print-o-matic option tag=”span” would be exactly what I needed.

    I see from the logic in your code print-o-matic.php line 222-230 that the tag option is ignored if printicon and title are both set. I’m not sure why this is so… what if you wanted the icon and title all to appear inline?

    But the main problem is that, with Title removed and tag=”span” then the printicon enclosing container becomes span and therefore display:inline is the default. The result is that your css for the container, .pom-default for width and height are ignored.. ie. the Icon disappears entirely!

    My workaround is to add the following css so that width and height are honoured:
    .printomatic { display:inline-block; }

    So, either I have completely misunderstood the use of tag=”span”, which is entirely possible, or you have a wee buglet. In either case I think that some worked examples in your documentation of how to get inline icons would be very useful and time saving.

    Again, I really do appreciate your free plugin and I hope you treat my comments as helpful feedback.

    – Jerry

    Plugin Contributor twinpictures

    (@twinpictures)

    “wee buglet”… so good.
    OK, we’ll look into this and get back to you with our findings.
    Thank you for the feedback and wonderful word formulations.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Custom Formatting of Print Output’ is closed to new replies.

Tags