Configure print.css to a 1-page thing



  • Hello, i am trying to change my print.css to get an 1 page print when customers will print or export to a pdf file.
    At the moment TB creates 2 pages with a lot of useless things on it (like the newsletter box, the cart box, the categories and footer from the lower part, and also the “items in the same category”…
    This is not usefull when a customer will print the items details to paper or export it to a pdf file (our customers sometimes do so).

    It should be compact on 1 page with only our logo, the picture of the item and the description, price and delivery time/tax and in the lower area our contact/imprint.

    How can i change the print.css in our theme folder to this? I already have tried something and i also have deleted most of the things there, but this does not affect any changes when i go to “print” on an product site.

    thank you



  • Delete from print.css?

    I think you should do the opposite. Add as many display: nones as you can to prevent the elements from being printed.



  • ahh ok, i am not that good in CSS , so i have to find the things i dont want to print?! uff…



  • Should be easy with Chrome. Do a right-click > Inspect element, then right-click on the highlighted element > Copy > Copy selector and use that, i.e.:

    #content > div.row > div.topic.col-lg-12 > ul {
      display: none;
    }
    


  • I’m close with this, just wont show the images for some reason. I use a theme based off of the default theme. This is my print.css

    edit: Seems to show images in 1.0.3, just not 1.0.4. hmmm

    edit2: The problems not showing images was a module I had installed. I got rid of it and now this works fine for me.

    @media only print {
    
      #header .nav, #header .banner, #header .row > div {
        display: none;
      }
    
      #header .row div#header_logo {
        display: block;
      }
    
      #center_column {
        width: 100% !important;
      }
    
      #left_column, #right_column {
        display: none;
      }
    
      #loyalty {
        display: none;
      }
    
      .form-group {
        display: none;
      }
    
      .menu-content {
        display: none;
      }
    
      .breadcrumb {
        display: none;
      }
    
      .product_attributes, .box-cart-bottom {
        display: none;
      }
    
      .bx-controls-direction {
        display: none;
      }
    
      #crossselling {
        display: none;
      }
    
      #footer .row > div, #footer .row > section {
        display: none;
      }
    
      #footer .row > div#block_contact_infos, #footer .row > section#block_contact_infos {
        display: block;
        width: 100%;
        border-left: none;
        border-top: 1px solid #515151;
        padding-top: 20px;
      }
    
      .footer-container #footer h4:after {
        display: none;
      }
    
    }
    


  • Hi to everybody,
    thank you for your help. It seems to work when i use some …{display: none; }

    Now i have shrunken it to 1 page, first step is done, now comes the cosmetics 🙂 How can i display the “contact” as a row, not as a block? Is this possible?

    thank you


 

Looks like your connection to thirty bees forum was lost, please wait while we try to reconnect.