WebsiteBaker Support (2.8.x) > Templates, Menus & Design

How to create a print.css?

(1/2) > >>

pszilard:
I am using the andreas08 template on my site, but this question really applies to all as a general question.

I would like to add a "Print" link, which would print the page contents, without the menus and banners, etc. I think the answer is to use a print.css, but I need help please;

1) How do I create (or modify) a print.css
2) Does print.css need to be template specific, or can I use a "general" one
3) Once added to the template, how do I actually use it? I.e. how to create a link that will call it?
4) I would like to use similar functionality as GMAIL's "PRINT", which opens a new tab of just the page contents without the banners, and menus or side bars.

Thanks in advance...

chio:
You are talking about different things

I usually have some small extra code at the end of the "normal" css (which has no "media" attribute.
This little code is for printing only and hides some blocks when printing (See Print preview on your browser)


--- Code: ---/*-------------------------PRINT-----------------------------*/
 
@media print {

 .nopr, #leftbox, #topmenu, #footerbox, #gecko_scrollbar {display:none;}
 #mainbox {width:80%; margin-left:15%}

}
--- End code ---

Another thing is to have a different template for printing - this hasn't to do with print.css, it is a normal (screen)css, which is specially made for printing.

The best way is to have a parameter (like index.php?style=print) to switch between the templates. Or change the css with javascript.

StefanRSA:
Its actually easy thing to do but a nightmare if you just don't know what to do....
Had the same problem and the slution found was as follow:

Create a print.css file and specify what should be displayd (To print) and what should not:
#news { display: none; }
 #content {  font: Verdana, Arial, Helvetica, sans-serif; color: black; }
 #footer {  display: none; }

Then in your template's index.php ad:
<link href="<?php echo TEMPLATE_DIR; ?>/print.css" rel="stylesheet" type="text/css" media="print" />

And also place the following where you want the print button to apear in your index.php :
<a href="javascript:window.print()" title="print page">
     <img src="<?php echo TEMPLATE_DIR; ?>/print.gif"  border="0" width="120" height="42" alt="Print This Page" />


Thats it.... Try it...

pszilard:

--- Quote from: chio on September 01, 2008, 08:42:30 AM ---

--- Code: ---/*-------------------------PRINT-----------------------------*/
 
@media print {

 .nopr, #leftbox, #topmenu, #footerbox, #gecko_scrollbar {display:none;}
 #mainbox {width:80%; margin-left:15%}

}
--- End code ---


--- End quote ---

I've added your bit of code to the end of the .css and refreshed the template, however it had no effect whatever! Not sure why.

pszilard:

--- Quote from: StefanRSA on September 01, 2008, 09:30:33 AM ---Its actually easy thing to do but a nightmare if you just don't know what to do....
Had the same problem and the slution found was as follow:

Create a print.css file and specify what should be displayd (To print) and what should not:
#news { display: none; }
 #content {  font: Verdana, Arial, Helvetica, sans-serif; color: black; }
 #footer {  display: none; }

Then in your template's index.php ad:
<link href="<?php echo TEMPLATE_DIR; ?>/print.css" rel="stylesheet" type="text/css" media="print" />

And also place the following where you want the print button to apear in your index.php :
<a href="javascript:window.print()" title="print page">
     <img src="<?php echo TEMPLATE_DIR; ?>/print.gif"  border="0" width="120" height="42" alt="Print This Page" />


Thats it.... Try it...


--- End quote ---
Thanks. I got it working! I removed the size definition of the print icon, and created a print icon to use. I also had to look in the screen.css to identify the parts on screen to not print and it all works. See my page at www.remektek.com.au

Thanks again.

Navigation

[0] Message Index

[#] Next page