ez.no: Printing CSS

Monday 26 January 2004 8:25:32 am

It would be helpful to have a style sheet set up for printing that removes some of the elements that are not needed on paper such as the top navigation and the sidebar in documentation. I have created a basic print style sheet that formats the pages of documentation so they are a bit more printer-friendly. I have done some basic tests on pages in the documentation sections in IE 6, Firebird .7 and Mozilla 1.6 on XP -- the styles appear to print out properly. I am pasting the code below in case the folks at eZ systems would like to build off of it, or if anyone else wants to see how to do it. Should I have more time to expand it, I will post the results.

If you are using Mozilla you can use the Edit CSS bookmarklet, or should you be running Firebird, you can use the Edit CSS sidebar, either of which allows you to edit the CSS of a page you are viewing. Paste the CSS at the bottom of the displayed styles to see what it looks like, and print out the page.

Edit CSS Bookmarklet (Moz): http://www.squarefree.com/bookmarklets/webdevel.html#edit_styles
Edit CSS Sidebar (Firebird only): http://editcss.mozdev.org/

[Print CSS]

body {
  background-image: none !important;
  }

#toparea ul, #topmenu, #submenu, #searchbox, #path, #sidebar, #maincontent .block {
  display: none;
  }
  
#maincontent {
  border: 0px;
  margin: 0em;
  margin-left: -45px;
  padding: 0px;
  width: 99%;
  }
 
#contentarea {
  background-image: none !important;
  border: 1px solid red;
  margin: 0em;
  padding: 0px;
  width: auto;
  }

#contentareaspacing {
  margin: 0px;
  }

#documentationblock pre {
  font-size: 26px;
  }

pre {
  font-size: 1em !important;
  }

#footer ADDRESS {
  width: 88%;
  }

Again, please note, I did this in a short period of time, so it really should be tested.

Alex

Alex
[ bald_technologist on the IRC channel (irc.freenode.net): #eZpublish ]

<i>When in doubt, clear the cache.</i>