Want to be able to print our website and have it look good.

[SpeakerRepair.com]

Right now, when someone tries to print a page from our website it looks terrible. I have attached a file showing how it looks when you try to print, of this page:

http://www.speakerrepair.com/page/LOC.html

I did a little research and it looks like we might need a "print.css" file, but I'm not exactly sure how to do it so it works right. So I'm looking for help and the method, or for someone to do it for us.

Thanks,
Eric

[netblazon]

Eric,
The main thing you can do with the print.css file is to set navigation elements to display: none in the print.css stylesheet, so those lists of links don't print out, taking up so much of the page. You can change the font size (or face, color, etc) of text to allow more or less per page, things like that. If you know CSS, it's not too difficult. We'd also be happy to quote you on doing it for you, but it would help if you have an idea what you want the output to look like (or just requirements, such as "remove the links at the top and bottom, increase the font to 18px, etc).
Susan

[SpeakerRepair.com]

Thanks for your reply, Susan.

I think we would just want the left navigation hidden for the most part. Since it is completely expanding all tiers it makes the page look weird and it also prints out 6 pages instead of 1 or 2.

We would also want the product page to look decent as well, and with the expanded left-hand navigation it really looks bad (see attachment).

http://www.speakerrepair.com/page/product/37-205x3.html

We want it to look as close to the actual page as possible, but without the left navigation stuff.

If you could give me a price quote that would be great.

Thanks,
Eric

[Brandon MUS]

First thing is change your existing stylesheet to media="all" so that your styling is copied over:

<link type="text/css" rel="stylesheet" href="css/00000001/cssui.css" media="screen">

becomes

<link type="text/css" rel="stylesheet" href="css/00000001/cssui.css" media="all">

Then you can create another stylesheet for print

<link type="text/css" rel="stylesheet" href="css/00000001/cssui_print.css" media="print">

And hide the left navigation, expand the main content area.

#wrapper-page { float: none; width: auto; }
#wrapper-index .sub-nav { display: none; }

That should solve 90% of the printing problems.

[SpeakerRepair.com]

Brandon,

WOW! Just adding the media="all" fixed it so the printed page looks just like the screen. It's amazing that it was such a simple fix.

Thanks so much for your help! :)

Eric