When I print from the browser the layout is missing most of the CSS.


How do I get it to print exactly like the webpage?

www.commercialdoorcompany.com/

Hi

When you say exactly like the webpage I'm assuming you don't mean including the menu, banner image etc

Cheers
Paul

The client would prefer it to print exactly what you see as if it was a screenshot. Is this not possible?

The homepage slideshow in particular is not necessary.

Most customers will be printing product article pages like this:
www.commercialdoorcompany.com/roll-up-doors/roll-up-sectional-doors.html
This is a better example of a page that should print everything as if its a screenshot.

Normally the print stylesheet would have no menu, it might have all images removed, sidebar content removed and generally leaving the text content as the vast majority if not all of printable content

Basically all interactive content is hidden

Looking at base3 as a reference I've added this locally to a custom.css file

First bit is the html5 boilerplate

/* ==========================================================================
Print styles.
Inlined to avoid the additional HTTP request:
www.phpied.com/delay-loading-your-print-css/
========================================================================== */

@media print {
*,
*:before,
*:after {
background: transparent !important;
color: #000 !important; /* Black prints faster:
www.sanbeiji.com/archives/953 */
box-shadow: none !important;
text-shadow: none !important;
}

a,
a:visited {
text-decoration: underline;
}

a[href]:after {
content: " (" attr(href) ")";
}

abbr[title]:after {
content: " (" attr(title) ")";
}

/*
* Don't show links that are fragment identifiers,
* or use the `javascript:` pseudo protocol
*/

a[href^="#"]:after,
a[href^="javascript:"]:after {
content: "";
}

pre,
blockquote {
border: 1px solid #999;
page-break-inside: avoid;
}

/*
* Printing Tables:
* css-discuss.incutio.com/wiki/Printing_Tables
*/

thead {
display: table-header-group;
}

tr,
img {
page-break-inside: avoid;
}

img {
max-width: 100% !important;
}

p,
h2,
h3 {
orphans: 3;
widows: 3;
}

h2,
h3 {
page-break-after: avoid;
}

#menu, #search, #banner, .home #grid2wrap, .home #grid3wrap, .home #grid5wrap, #socialicons, #breadcrumb, #paneltrigger, #sidebar-2, #footerwrap, #toTop {display: none !important;}
#logo h2, #logo h2 a {font-size: 2em !important;}
#main, .item-page {width:100% !important; padding:0;}
.container > div {padding:0;}
.article-title, .article-title a {font-size: 1em !important;}
}

At the moment there is a rather large snap with the logo which at 3am is defeating me

basically its too large in Chrome and too small in firefox

Cheers
Paul

I did initially think about adding a link to a print css file but given you like to use compression using the custom.css file is one request less

Wow, thank for all your efforts.

I have adjusted the css and now understand what to do because of your help!

You're welcome

Looks good

Cheers
Paul