No announcement yet.

Printer friendly page?

  • Filter
  • Time
  • Show
Clear All
new posts

  • Printer friendly page?


    Is there code available for "Printer friendly" page? We have seen this on many sites and would like to incorporate it into ours.
    Thanks in advance. :)

  • #2
    I could also use help with this.


    • #3
      After having a custom design done, I tried to print a product page for a customer at my brick and mortar and found that it was a complete mess. Basically this comes down to css. I added a group of rules to the beginning of my default_modified.css file under "custom styles" with these rules. The first rule hides whatever you don't want to display on the printed version (display:none). The rest are tweaks to display position, font size, etc. The bottom two are self explanatory. Every template is going to require different rules and my site has an entirely different menu than most. You'll need to make sure that any tabs/extra fields you don't want to display, are included in the first rule. I had almost no expertise when I went into it but considering how few lines of code were necessary, this probably should be included in the templates.

      @media print {
          #mobileMenu,.homepage_silder .flex-control-nav, #tab-13, .addl-images, #mail-area_section, .relatedBlock, .qaLinkFirst, .test, .header-middle, .social-mediaBlock, .addToCartBlock, .xtra-links, .product_availability, .totalrating, .browsing_historyBlock, #footer-links, .footer-heading, .r-tabs-nav {display:none;}
          img {max-width: 500px;}
          .lines2 {line-height: 20px !important}
          #listing0 .product_primary .primary {float:left;}
          #listing0 .product_primary .secondary {float:right; width:40%;}
          #listing0 h2 {font-family:'Quantico',sans-serif; font-size:18px;}
          @page :left {margin: 0.5cm;}
          @page :right {margin: 0.8cm;}