Announcement

Collapse
No announcement yet.

Making pages "printable"

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

    Making pages "printable"

    I am using the Base/Bootstrap Ready Theme and I would like some of my site's pages, including the customer INVC page to be printable. But when I go to print from the browser, the page is not formatted for printing. So I looked into creating a @media print style, but I'm not having a lot of luck because something is overriding parts of it. Namely when I click print from my browser, the page is showing the mobile screen version not the desktop screen version, and I can't figure out what is controlling this. Also several linked graphics display the link address instead of the graphic. Any suggestions on having a bit more control over the print version of site pages?

    Thanks,
    Shannon

    #2
    Re: Making pages "printable"

    Shannon,

    I am not sure about the print displaying the mobile layout, but below is style I used to get rid of the links (href) on a printed page:

    HTML Code:
    @media print {
      a[href]:after {
        content: none !important;
      }
    }
    Hope this helps.

    Eldon

    Comment


      #3
      Re: Making pages "printable"

      Okay, I took a break from trying to figure this out, and have just now come back to it. I have made progress in creating a print.css file to make some adjustments to the printable version of a page/screen and hide the "a href" links that were displaying. But for one of my original questions I still can't seem to figure out the solution.

      In the Base ReadyTheme (and I think in the other themes as well) when I am viewing the screen on a desktop monitor, when I go to print in Chrome (not Safari, which displays correctly), the printable version is showing the small mobile/responsive screen view. For example, instead of the full header, it just shows the icon bar with phone icon etc. across the top. How can I make sure that when printing, no matter the browser, the full size (not mobile) view is the one that prints?

      Thanks,
      Shannon

      Comment


        #4
        Same problem here. No answers to this?

        Comment


          #5
          Sadly, the print stylesheet is tricky a monster at best. Add the following code to your theme stylesheet should help with basic page rendering for printing purposes. Unfortunately, even the team maintaining Bootstrap have not completely tackled this issue.

          Code:
          @media print {
              body {
                  -webkit-print-color-adjust: exact !important;
              }
          
              .col-sm-1,
              .col-sm-2,
              .col-sm-3,
              .col-sm-4,
              .col-sm-5,
              .col-sm-6,
              .col-sm-7,
              .col-sm-8,
              .col-sm-9,
              .col-sm-10,
              .col-sm-11,
              .col-sm-12 {
                  float: left;
              }
          
              .col-sm-12 {
                  width: 100%;
              }
          
              .col-sm-11 {
                  width: 91.66666667%;
              }
          
              .col-sm-10 {
                  width: 83.33333333%;
              }
          
              .col-sm-9 {
                  width: 75%;
              }
          
              .col-sm-8 {
                  width: 66.66666667%;
              }
          
              .col-sm-7 {
                  width: 58.33333333%;
              }
          
              .col-sm-6 {
                  width: 50%;
              }
          
              .col-sm-5 {
                  width: 41.66666667%;
              }
          
              .col-sm-4 {
                  width: 33.33333333%;
              }
          
              .col-sm-3 {
                  width: 25%;
              }
          
              .col-sm-2 {
                  width: 16.66666667%;
              }
          
              .col-sm-1 {
                  width: 8.33333333%;
              }
          
              .col-sm-pull-12 {
                  right: 100%;
              }
          
              .col-sm-pull-11 {
                  right: 91.66666667%;
              }
          
              .col-sm-pull-10 {
                  right: 83.33333333%;
              }
          
              .col-sm-pull-9 {
                  right: 75%;
              }
          
              .col-sm-pull-8 {
                  right: 66.66666667%;
              }
          
              .col-sm-pull-7 {
                  right: 58.33333333%;
              }
          
              .col-sm-pull-6 {
                  right: 50%;
              }
          
              .col-sm-pull-5 {
                  right: 41.66666667%;
              }
          
              .col-sm-pull-4 {
                  right: 33.33333333%;
              }
          
              .col-sm-pull-3 {
                  right: 25%;
              }
          
              .col-sm-pull-2 {
                  right: 16.66666667%;
              }
          
              .col-sm-pull-1 {
                  right: 8.33333333%;
              }
          
              .col-sm-pull-0 {
                  right: auto;
              }
          
              .col-sm-push-12 {
                  left: 100%;
              }
          
              .col-sm-push-11 {
                  left: 91.66666667%;
              }
          
              .col-sm-push-10 {
                  left: 83.33333333%;
              }
          
              .col-sm-push-9 {
                  left: 75%;
              }
          
              .col-sm-push-8 {
                  left: 66.66666667%;
              }
          
              .col-sm-push-7 {
                  left: 58.33333333%;
              }
          
              .col-sm-push-6 {
                  left: 50%;
              }
          
              .col-sm-push-5 {
                  left: 41.66666667%;
              }
          
              .col-sm-push-4 {
                  left: 33.33333333%;
              }
          
              .col-sm-push-3 {
                  left: 25%;
              }
          
              .col-sm-push-2 {
                  left: 16.66666667%;
              }
          
              .col-sm-push-1 {
                  left: 8.33333333%;
              }
          
              .col-sm-push-0 {
                  left: auto;
              }
          
              .col-sm-offset-12 {
                  margin-left: 100%;
              }
          
              .col-sm-offset-11 {
                  margin-left: 91.66666667%;
              }
          
              .col-sm-offset-10 {
                  margin-left: 83.33333333%;
              }
          
              .col-sm-offset-9 {
                  margin-left: 75%;
              }
          
              .col-sm-offset-8 {
                  margin-left: 66.66666667%;
              }
          
              .col-sm-offset-7 {
                  margin-left: 58.33333333%;
              }
          
              .col-sm-offset-6 {
                  margin-left: 50%;
              }
          
              .col-sm-offset-5 {
                  margin-left: 41.66666667%;
              }
          
              .col-sm-offset-4 {
                  margin-left: 33.33333333%;
              }
          
              .col-sm-offset-3 {
                  margin-left: 25%;
              }
          
              .col-sm-offset-2 {
                  margin-left: 16.66666667%;
              }
          
              .col-sm-offset-1 {
                  margin-left: 8.33333333%;
              }
          
              .col-sm-offset-0 {
                  margin-left: 0;
              }
          
              .visible-xs {
                  display: none !important;
              }
          
              .hidden-xs {
                  display: block !important;
              }
          
              table.hidden-xs {
                  display: table;
              }
          
              tr.hidden-xs {
                  display: table-row !important;
              }
          
              th.hidden-xs,
              td.hidden-xs {
                  display: table-cell !important;
              }
          
              .hidden-xs.hidden-print {
                  display: none !important;
              }
          
              .hidden-sm {
                  display: none !important;
              }
          
              .visible-sm {
                  display: block !important;
              }
          
              table.visible-sm {
                  display: table;
              }
          
              tr.visible-sm {
                  display: table-row !important;
              }
          
              th.visible-sm,
              td.visible-sm {
                  display: table-cell !important;
              }
          
              a[href]:after {
                  content: none !important;
              }
          }
          Matt Zimmermann

          Miva Web Developer
          Alchemy Web Development
          https://www.alchemywebdev.com
          Site Development - Maintenance - Consultation

          Miva Certified Developer
          Miva Professional Developer

          https://www.dev4web.net | Twitter

          Comment


            #6
            First, I'd discourage printing...that day entered the antiquities about 5/7 years ago :)

            But what about just using a VERY simplified and separate print template? It doesn't need to be responsive?
            Bruce Golub
            Phosphor Media - "Your Success is our Business"

            Improve Your Customer Service | Get MORE Customers | Edit CSS/Javascript/HTML Easily | Make Your Site Faster | Get Indexed by Google | Free Modules | Follow Us on Facebook
            phosphormedia.com

            Comment


              #7
              yeah... we've created a "print friendly" popup that opens on print request and we're populating it with pre-selected print-friendly data

              Comment

              Working...
              X