0
Welcome Guest! Login
0 items Join Now

Creating print friendly sites - call for best solutions?

Last Post
Search Topic

  • Creating print friendly sites - call for best solutions?

    Posted 17 years 7 months ago
    • Hi,

      Have just spent some time looking into this and thought I'd share my conclusions and a couple of problems still remaining. Perhaps someone else here has some even better, more elegant solutions?

      (1) Configuring the in-built print/pdf page

      It appears that the easiest way to do this is to edit your template's template_css.css file to add something like:
      body.contentpane { background: #FFF; color: #000; font-size: 10pt; }
      - this controls the popup print/pdf content.

      This works just fine. Only ran into one problem: I can change the color or style of text with this in IE but the font-size simply wouldn't adjust! No problems at all in Firefox. Any ideas on why?


      (2) Creating a print media stylesheet for the browser print

      Add something like this to your template's index.php file:
      <link href="<?php echo $mosConfig_live_site;?>/templates/<?php echo $mainframe->getTemplate(); ?>/css/print.css" rel="stylesheet" type="text/css" media="print" />

      Then create and upload a print.css file with something like:
      body, p, td, th {
     background: white;
     color: black;
     font-family: Verdana, Arial, Helvetica, sans-serif;
     font-size: 10pt;
     width: 100%;
     margin: 0px;
     padding: 0;
     border: 0;
     float: none !important;
     }
     
#pathway, #nav, #pagenav, td.left, td.right, #mainlevel, #sublevel, #active_menu, #footer, #header, #the-footer, #headlines #buttonheading, #toolbar, #showcase {
display: none;
}
 
a:link, a:visited {
     color: #6B0000;
     background: transparent;
     text-decoration: underline;
     }

      Ok, all good, we now have just the main content printing as desired. Again, it works perfectly in Firefox. However, in IE the content does not display properly, it seems to be pushing it to the right. In various widths (fixed or fluid) the right side gets chopped off, graphics disappear, etc.

      This isn't related to the print.css file I'm using, indeed you can see that IE does this with most of the Rocket Theme templates. (Go to the demo templates and check the IE print view in various widths - fluid, wide, narrow).

      So the question is, how can we edit print.css and/or template_css.css to fix these IE printing problems?

      It would be great to see a solution to this that all users could apply to their Rocket Theme templates.

      If you want to see these differences on my site (running a modified Versatility II) see: www.etilive.vitalideas.com/

      Over to you,
      adrian
    #20115

Time to create page: 0.032 seconds