Loading...

01
Mar 10

Print Stylesheets

Author: Admin | Filed under: css, Tutorials | Tags: , , , | No Comments »

So, you want to be able for users to print out your webpage, but it keeps coming out funky? Luckily, the solution is easy, it’s time to step up to a print stylesheet. Hopefully, you are familiar with CSS, and the concept of seperating content and style in HTML pages (if not, you should start there). For this quick tutorial, we will assume that you have a website that is already set up using CSS, and you just want a cleaner look (no background colors, different font sizes, etc.) for users who choose to print out your page.

Lets Get Started, Shall We…

  1. The first thing to do is to copy your current CSS stylesheet, and rename it print.css
  2. Next, lets link this sheet to your HTML page within the Head section using the following code.

    3. <link rel="stylesheet" href="YourPathHere/print.css" type="text/css" media="print" />

  3. Now that your print.css stylesheet is all linked up, lets change up the things we need to in order for things to display correctly. For instance, if you wanted the navigation to disapear, you could add the following code to the div containing it. This will effectively tell the printer to not render this at all.

    4. display:none;

  4. Now take some time to play around with other settings, such as font sizes, widths, link colors and decorations, etc..

Example

If you would like to see examples of this method in actual code, check out what we used on a recent client site, Building a blueprint for change. This is just for the layout mind you, but it should give you an idea of how things can be done..

Original Stylesheet

body {
background-image: url(../images/background-slice.jpg);
background-repeat: repeat-x;
}
#header {
width: 1076px;
margin-right: auto;
margin-left: auto;
background-image: url(../images/header.png);
background-repeat: no-repeat;
background-position: top;
height: 165px;
}
#topnav {
float: right;
width: 210px;
margin-top: 45px;
color: #336496;
}
#main {
background-image: url(../images/body.png);
width: 1076px;
margin-right: auto;
margin-left: auto;
background-position: 1px top;
}
#columns {
background-image: url(../images/columns.png);
width: 1076px;
}
#col1 {
float: left;
width: 242px;
margin-left: 60px;
}
#col2 {
float: left;
width: 670px;
margin-left: 13px;
}
#section {
background-image: url(../images/section.png);
height: 65px;
width: 650px;
background-repeat: no-repeat;
padding-top:15px;
padding-left:20px;
}
.third {
float: left;
width: 200px;
}
#cse {
float: right;
width: 200px;
margin-right: 20px;
}
#content {
padding-right: 20px;
padding-bottom: 20px;
padding-left: 20px;
}
#footer {
width: 1076px;
margin-right: auto;
margin-left: auto;
background-image: url(../images/footer.png);
background-repeat: no-repeat;
background-position: top;
padding-top: 70px;
padding-bottom: 20px;
}
#cncs {
margin-right: auto;
margin-left: auto;
width: 200px;
}

Print Stylesheet

#section, body, #main {
background-image:none;
}
#header {
background-image: url(../images/blueprint.jpg);
height: 83px;
width: 800px;
}
#topnav {
display:none;
}
#main {
width: 800px;
}
#columns {
background-image: none;
width: 800px;
}
#col1 {
display:none;
}
#col2 {
width: 800px;
margin-left: 0px;
}
#section {
padding-top:15px;
}
.third {
float: left;
width: 200px;
}
#cse {
display:none;
}
#content {
}
#footer {
display:none;
}
#cncs {
display:none;
}

Good luck, and happy printing!

Leave a Reply