Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Page 1 of 2 1 2 LastLast
Results 1 to 10 of 11
  1. #1
    Junior Member
    Join Date
    May 2011
    Posts
    1
    Member #
    27847
    I have an online store and have spent the last few days customizing the invoice and packing slip invoice pages to display how I want and on the screen, they look perfect however when I go to print them, they don't look the same at all. I've tried using a secondary css file with the media="print" tag but I'm not sure why I need that if i want the page to print exactly as displayed. That being said, I would guess that I'd want to remove the background as there is a background color.
    There is obviously something I'm missing and I'm hoping someone can point me in the right direction.
    I'm not sure what I should include here for further info but I am using a css for the invoice page.
    Any suggestions are greatly appreciated.
    Thx

  2.  

  3. #2
    Unpaid WDF Intern TheGAME1264's Avatar
    Join Date
    Dec 2002
    Location
    Not from USA
    Posts
    14,485
    Member #
    425
    Liked
    2783 times
    You've got the right idea. A print-specific stylesheet will allow you to customize your print output.

    The problem is that some things (such as backgrounds/background colors) will be removed by default by the user's print settings regardless of what you set up. If you want the page to print on a black background, well...you're out of luck. The only way around this is to create a div or some other "print-only" element. Your screen css would look like this.
    Code:
    .print-only {display:  none;]
    And you wouldn't need any styling for the print css at all. I've often done this to print out header images when a client wants them as part of the print display but not the screen.

    The other option you might want to consider, since this is an invoice/packing slip combination, is to generate an on-the-fly RTF or DOC file that contains your invoice/packing slip information. It would probably requite a complete recoding of what you've done, and it's harder than creating just a web page, but it is doable. The advantage is that, because it's an RTF/DOC file, you can style it so that it looks the same on screen and in print, since the user will now open it up in say Word. I've done this for invoices a few times for people, and it's never failed me.
    If I've helped you out in any way, please pay it forward. My wife and I are walking for Autism Speaks. Please donate, and thanks.

    If someone helped you out, be sure to "Like" their post and/or help them in kind. The "Like" link is on the bottom right of each post, beside the "Share" link.

    My stuff (well, some of it): My bowling alley site | Canadian Postal Code Info (beta)

  4. #3
    Senior Member Webzarus's Avatar
    Join Date
    May 2011
    Location
    South Carolina Coast
    Posts
    3,322
    Member #
    27709
    Liked
    770 times
    I've also done that before, the only drawback to using the "DOC / RTF " option is that not everyone has WORD or WORDPAD... specifically Mac users or Linux users... or tweakers that remove every possible program that they feel they don't need.

    I think the CSS options is your best bet.... it may take a while to get the format you want to show the same in all browsers... but once it's done, you'll never get an email from a customer complaining that they couldn't print their invoice... which is one thing you really don't want when you're trying to run a business on the web.

  5. #4
    Member
    Join Date
    May 2011
    Location
    Baltimore, MD
    Posts
    60
    Member #
    27796
    Liked
    11 times
    A pain, the browser always tries to be smarter than the user.

    In Internet Explorer, you can change the advanced settings to print background colors.
    Tools > Internet Options > Advanced Tab, Under "Printing" there should be an option.

    TheGAME1264 and Webzarus both have it right. Web content is much different than print media.

    Look at the differences:
    72 vs 300 DPI
    Animated Media
    Interactive Elements
    Flash, Applets

    That even raises the question with will happen when you want to print a WebGL HTML5 element? Yikes, the head-aches... The goal is to have a "Printer Friendly" CSS mock-up.

    You could always do an [Alt] + [PrntScr], then copy it over to Photoshop, crop out your browser and print from there. not the best, but it's something.
    /phillihp/
    Check out my blog @ http://www.phillihp.com
    ~Web~Mobile~Hacking~Tech~Gadgets~More~

  6. #5
    Unpaid WDF Intern TheGAME1264's Avatar
    Join Date
    Dec 2002
    Location
    Not from USA
    Posts
    14,485
    Member #
    425
    Liked
    2783 times
    I'm just wondering if the guy ever solved this. It's been four days.
    If I've helped you out in any way, please pay it forward. My wife and I are walking for Autism Speaks. Please donate, and thanks.

    If someone helped you out, be sure to "Like" their post and/or help them in kind. The "Like" link is on the bottom right of each post, beside the "Share" link.

    My stuff (well, some of it): My bowling alley site | Canadian Postal Code Info (beta)

  7. #6
    Member
    Join Date
    May 2011
    Location
    Baltimore, MD
    Posts
    60
    Member #
    27796
    Liked
    11 times
    Check out this Firefox plugin, this allows you to take a screen shot of the entire page, without the browser piece and without the need to scroll.

    http://www.screengrab.org/
    /phillihp/
    Check out my blog @ http://www.phillihp.com
    ~Web~Mobile~Hacking~Tech~Gadgets~More~

  8. #7
    WDF Staff AlphaMare's Avatar
    Join Date
    Oct 2009
    Location
    Montreal, Canada
    Posts
    4,570
    Member #
    20277
    Liked
    878 times
    Quote Originally Posted by phillihp, post: 206253
    Check out this Firefox plugin, this allows you to take a screen shot of the entire page, without the browser piece and without the need to scroll.

    http://www.screengrab.org/
    If you read the original post, it appears that this guy is trying to set it up so his customers can print their invoices. For that I believe he'll need a separate print stylesheet, and a "print" button or link (probaly javascript) that will either activate it and send the info to the printer, or lead to a page where that stylesheet is in force.
    Good design should never say "Look at me!"
    It should say "Look at this." ~ David Craib


    http://digitalinsite.ca ~ my current site . . info@digitalinsite.ca ~ my email

    If you feel that someone's post helped you fix your problem, answered your question, or just made you feel better, feel free to "Like" their post. The "Like" link is at the bottom right of each post, along side the "reply" link. And if you are being helped here, try to help someone else - pass it on!

  9. #8
    Member
    Join Date
    May 2011
    Location
    Baltimore, MD
    Posts
    60
    Member #
    27796
    Liked
    11 times
    @AlphaMare Thank you for being quick to make accusations on my understanding of what is trying to be accomplished with this post. We've beat'n the horse dead with the CSS Print pages and Media CSS, if you have read my posts prior. ? ... I'm simply extending the discussion into the realm of a multitude of possibilities.

    Best,
    New Member
    /phillihp/
    Check out my blog @ http://www.phillihp.com
    ~Web~Mobile~Hacking~Tech~Gadgets~More~

  10. #9
    WDF Staff Wired's Avatar
    Join Date
    Apr 2003
    Posts
    7,656
    Member #
    1234
    Liked
    137 times
    Given that it's an online store it's safe to assume he wants a clean printout for the customers and not himself. Therefore an extension is something you wouldn't ask your customers to install .
    The Rules
    Was another WDF member's post helpful? Click the like button below the post.

    Admin at houseofhelp.com

  11. #10
    WDF Staff AlphaMare's Avatar
    Join Date
    Oct 2009
    Location
    Montreal, Canada
    Posts
    4,570
    Member #
    20277
    Liked
    878 times
    Quote Originally Posted by phillihp, post: 206325
    @AlphaMare Thank you for being quick to make accusations on my understanding of what is trying to be accomplished with this post. We've beat'n the horse dead with the CSS Print pages and Media CSS, if you have read my posts prior. ? ... I'm simply extending the discussion into the realm of a multitude of possibilities.

    Best,
    New Member
    I try very hard to offer useful suggestions on these forums - I apologize if my post seemed directed negatively at you. It was meant only to clarify and was an attempt to bring the thread back on topic and offer the OP a solution that had not yet been made. I did not mean to insult or accuse.

    That said, I cannot see it being useful to the OP to suggest measures that would entail him asking his customers to modify their browser, or even dictate which browser they use - he is after all not in control of which browser his customers will be using and so therefore I had assumed he was looking for a solution that would be easy and work across all browsers.

    I had in fact read all the posts and had not seen a suggestion for a link to a print page command linked to a specifically formatted page before. I had seen suggestions about changing browser settings, printing from Photoshop, creating dynamic DOC files, etc, but that is not something all users will know how or even want to take the time to do.

    -
    Good design should never say "Look at me!"
    It should say "Look at this." ~ David Craib


    http://digitalinsite.ca ~ my current site . . info@digitalinsite.ca ~ my email

    If you feel that someone's post helped you fix your problem, answered your question, or just made you feel better, feel free to "Like" their post. The "Like" link is at the bottom right of each post, along side the "reply" link. And if you are being helped here, try to help someone else - pass it on!


Page 1 of 2 1 2 LastLast

Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  

Search tags for this page

how to print a website exactly how it looks

,
how to print web page as seen
,
how to print web page as shown
,

how to print webpage as seen

,
how to print whole page as seen
,

print web page as shown

,
print web page exactly as it appears
,

print webpage as shown

,
print webpage ignore print css
,

print website exactly as shown

Click on a term to search for related topics.
All times are GMT -6. The time now is 12:01 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com