Don't like having to click a link to reload the page without the left-hand menu to be able to print? Follow the simple steps below to end the need to do that. This uses CSS media types to set the width of the menu (div.leftsidebar) to 0px when printing! Let me know if there are any bugs or omissions here so I can fix it. I set my site up to do this a long time ago, so I may have forgotten something...
-Create a new Stylesheet in admin and give it a media type of "print" without the quotes
-Then copy your default CSS from your template into the new StyleSheet
-Edit the new Stylesheet in the following ways
-set width = 0px; in div.leftsidebar
-set padding = 0px; in div.leftsidebar
-attach the new Stylesheet to your template
-Reload your page and from now on you can print your pages directly!
(Note: Unfortunately, in my tests, IE does not support media types and this does not work for those printing from that rather broken browser.)
HOWTO: Stop using the print link! CSS fix to print a page without the menu!
-
speedfly
HOWTO: Stop using the print link! CSS fix to print a page without the menu!
Last edited by speedfly on Mon Dec 12, 2005 2:31 pm, edited 1 time in total.
-
alex7575
Re: Stop using the print link! CSS fix to print a page without the menu!
thx for this tips but how can we make any "print link" without using {printlink} ??
-
speedfly
Re: Stop using the print link! CSS fix to print a page without the menu!
The point of the tip above is to get rid of the need for a print link. The reason the print link existed was to reformat the page before printing. Instead of needing to click a link to reformat the page first, the above tip tells the browser to reformat the page if the user prints it using the print media type for CSS. When you create the new stylesheet with the print media type and you edit the div.leftsidebar to be 0px wide, you have told the browser to not display the left-hand portion of the page when printing. So, follow the steps above and then use the print buton or menu item in your browser to see the effects.
-
iNSiPiD
Re: HOWTO: Stop using the print link! CSS fix to print a page without the menu!
This does work in IE and all version 6+ browsers.
The correct way to do it is to create a new stylesheet which is a duplicate of your media="screen" stylesheet and give it a value of media="print". If you don't define media for all your stylesheets you can't expect the browser to know what the hell's going on.
Next, open your print stylesheet. Rename it (i.e. print.css) and go through it, systematically removing all colour elements and backgrouds. Set body to have black text and white background. Remove unnecessary style parameters like hover, border etc.
Then simply delete all the style parameters for items you don't want printed and replace them with the value display:none.
If you want to be really clever you can put a print link in your page that uses javascript to set the stylesheet to your print-friendly version.
The correct way to do it is to create a new stylesheet which is a duplicate of your media="screen" stylesheet and give it a value of media="print". If you don't define media for all your stylesheets you can't expect the browser to know what the hell's going on.
Next, open your print stylesheet. Rename it (i.e. print.css) and go through it, systematically removing all colour elements and backgrouds. Set body to have black text and white background. Remove unnecessary style parameters like hover, border etc.
Then simply delete all the style parameters for items you don't want printed and replace them with the value display:none.
If you want to be really clever you can put a print link in your page that uses javascript to set the stylesheet to your print-friendly version.
