Cascading Style Sheets (CSS)

Key References





Featured article:

The big keys to this approach working are highlighted. I just did this for an engage site and tested it in IE,FF,O,Ch, and Safari all with equal success.  You should be able to do the same thing by setting up this structure and then in the print.css display:none on the parts you don't need and display:block on the parts that you do (see below).  That may be a bit extreme and you'll need to check how other pages print if we do this site-wide through the theme.  Worst case we may need to include the print.css directly in the user control it applies to so that other pages on the site still print properly. 

@media print {
  body { display : none; }
  content { display : block }

Consider the following html/aspx page: index.html

  <link rel="stylesheet" href="/css/screen.css" media="screen" />
  <link rel="stylesheet" href="/css/print.css" media="print" />
<div id="head">
  <div id="head-logo">
    <img src="logo.gif" />

  <div id="nav">
      <li><a href="/>home</a></li>
      <li><a href="/Contact+Us.aspx">Contact Us</a></li>
<div id="content">

  Lorem Ipsum blah blah blah

Consider styles.css (think of this as all the styles you probably already have on your site)
/* Elements */
body { font: 12px/1.5 Arial, sans-serif; text-align: center; background: #FFF; color: #555; }
a { color: #069; font-weight: bold; text-decoration: underline; overflow: hidden; }
a:hover,a:focus,a:active { color: #000; text-decoration: underline; }
a:focus,a:active { overflow: hidden; }

h1,h2,h3,h4,h5,h6 { margin: 0 0 15px; font-size: 26px; line-height: 1em; color: #000; }
h1 { font-weight: normal; letter-spacing: -1px; }
h2 { font-size: 20px; letter-spacing: -1px; }
h3 { font-size: 16px; letter-spacing: -1px; }
h4 { font-size: 14px; }
h5 { font-size: 12px; }
h6 { font-size: 10px; }

Consider screen.css

Author: Craig Erskine
Description: Load Style Sheets, Filter Out Old Browsers
@import "styles.css";

Consider print.css
Author: Craig Erskine
Description: Load Style Sheets, Filter Out Old Browsers
@import "styles.css"; 

@media print {
  #head-name {  display: none;  }
  #head-logo {  display: block;  }
  #head-desc {  display: none;  }
  #head-search {  display: none;  } 

  #nav {  display: none;  }
  #nav ul {  display: none;  }
  #nav-sub {  display: none;  }
  #foot-nav {  display: none;  }
  .breadcrumbs {display: none; }