WebsiteBaker Community Forum

WebsiteBaker Support (2.8.x) => Templates, Menus & Design => Topic started by: pszilard on September 01, 2008, 03:27:49 AM

Title: How to create a print.css?
Post by: pszilard on September 01, 2008, 03:27:49 AM
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...
Title: Re: How to create a print.css?
Post by: chio on September 01, 2008, 08:42:30 AM
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: [Select]
/*-------------------------PRINT-----------------------------*/
 
@media print {

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

}
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.
Title: Re: How to create a print.css?
Post by: 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...
Title: Re: How to create a print.css?
Post by: pszilard on September 01, 2008, 11:44:37 AM
Quote from: chio on September 01, 2008, 08:42:30 AM

Code: [Select]
/*-------------------------PRINT-----------------------------*/
 
@media print {

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

}

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.
Title: Re: How to create a print.css?
Post by: pszilard on September 01, 2008, 12:56:10 PM
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...

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.
Title: Re: How to create a print.css?
Post by: StefanRSA on September 01, 2008, 01:56:38 PM
Realy nice site Pszilard.

Its always a good thing to also not display your "Read More" links on the print page.... Unless you need it to display...

Glad I could Help!

Tell me, why dont you use the bakery or GoCart modules for your shop?
Title: Re: How to create a print.css?
Post by: pszilard on September 02, 2008, 12:33:21 AM
Thanks for the positive feedback! I appreciate it, especially from an experienced Bakers :D. I'll need to find how to not print the Read More, as I don't think that they are a page "element" which I could then switch off. Any hints here would be welcome.

Re the Shop - it is still on the To Do list, however the shop module looked too time consuming to set up and offered little over the "news" format, especially as it doesn't allow some key features, which I can do using ShopFactory Pro (my example here (http://www.remektek.com.au/shop/index.html?lmd=39285.976065)), which is my intention for the future. For instance:
I have a commercial license for ShopFactory, which is a few years old and down level, but it will do what I need. I intend to either run in a Wrapper module in WB or just have it on another link. Just haven't got enough time to develop it at the moment.

Having said that, if I could use a good WB based option, I would be very interested in that too.

Thanks again for the print solution! Cheers guys.