We can style Magento for print with CSS almost as effectively as we can use CSS to style for the web. In particular, we'll need to pay attention to styling images, colors, and links within our store.
There are three types of images that we'll concern ourselves with:
As the store's logo is aliased to a white background, we can use it in our print stylesheet, and product photos will be fine too. The other images in our stylesheet will need to be hidden.
div.product-img-box img, #logo {
display: block;
float: none
}
Most customers will probably want to print their page in black and white. To ensure that the background of the page is white, and that no background image will be printed, we can attribute the following CSS to the body element, and any elements likely to contain text such as headings and paragraphs:
body, ul, ol, dl, p, h1, h2, h3, h4, h5, h6 {
background: #FFF !important;
color: #000 !important;
}
a {
color: #9C0;
font-weight: bold;
text-decoration: underline }
This also gives any links that are still printed a blue color for color printers and a distinct gray color for monochrome printers. The "bolding" and underlining should reinforce the location of any links within the content. We can also provide basic styling for tables when printed:
th, td {color: #000 !important}
td {border-color: #AAA !important}
One obvious problem with printing our Magento store (or any web site) is that it will probably contain hyperlinks to other pages. When a page is printed, these links can be lost, but we can apply some CSS to print the destination of the link after the link's text, as follows:
#main a:link:after, #main a:visited:after {
Magentohyperlinks, retainingcontent: " [" attr(href) "] "
}
#main a[href^="/"]:after {
content: " [http://www.example.com" attr(href) "] "
}
This CSS simply reads the href attribute from the link and adds it after the link in a div with the ID main using the :after pseudo-element of CSS. The second block of CSS, which uses the ^= attribute selector, affects links which have a href attribute, which begins with /.
Note
Some older browsers like IE 6, do not recognize the :after pseudo-element or attribute selectors, meaning that the users of these browsers will not see the links' destinations after the link text itself. This is not ideal, but the previous solution at least provides some customers with this feature, without adding a great deal of complication to the process.
While it's a good practice to use percentages or ems for screen stylesheets, for print, pts are more useful, especially because you can predict the size of the text as it will be displayed on paper more easily. At the same time, we'll change the font-family typefaces to be serif typefaces, which are easier to read on paper.
body {
font-family: "georgia", "times", "times new roman", serif;
font-size: 12pt
}
It's also a good idea to make any headings larger than the rest of the content to help retain the visual hierarchy of the page, as shown in the following snippet:
h1 {
font-size: 24pt
}
h2 {
font-size: 20pt
}
h3 {
font-size: 18pt
}
h4, h5, h6 {
font-size: 14pt;
font-weight: bold;
text-transform: uppercase
}
It is best to avoid complex layouts or multi-columned layouts when creating a print stylesheet, as the width of the paper that the page is being printed on may not be able to accommodate multiple columns effectively. To combat this, we can use the following CSS in our print stylesheet:
.header-top,
.middle-container
{
display: block;
float: none
}
There are also areas that we can hide completely such as the navigation, search, shopping cart, and footer.
.mini-search,
.header-nav,
.footer,
.quick-access,
.mini-product-tags,
.col-right,
.add-to-box,
.breadcrumbs,
.add-or,
.add-to-cart-box {
display: none
}
This CSS also hides the popular tag box, account links, breadcrumbs, and content in the righthand column, including the product comparison box.
This provides us with a stylesheet that's suitable for printing for our Magento theme, which looks like this:
