Recent Topics

Printer Friendly Layout

Started by on Jan 03, 2015 – Contents updated: Jan 10, 2015

Jan 03, 2015 03:01    

Whereas the simple addition of an alternate stylesheet and extra line in the header, as described below, works in many/most instances, on my site the Print Preview option didn't display as styled by [print.css]

On reading I discovered this was a common problem where the float attribute was used and I had made a styling plugin that used such.

So the purpose of this is to enable a Print Preview option which isn't available using an alternate stylesheet
<link rel="stylesheet" href="print.css" type="text/css" media="print" />

With further thought, following responses from #fredsy I am investigating if it is only a poor implementation of my_plugin that is the problem.
However a side benefit is that I now have the choice of a full=page Print/Print Preview option and Post Only version.

The Modification
There are two steps.
1. Use a copy of [/skins/custom] directory to make a new skin folder [/skins/print].
The new folder should now contain these files:


Edit the file [_skin.class.php] in the new [print] directory
Change the class name from “custom_Skin” to “print_Skin” (around line 20).
Then, locate the function get_default_name (around line 28) and change the return value from “Custom” to “print".
Now that line should looks like this return 'print';.

Now you have a working skin. You can check it out by installing and changing the default skin for your blog in the backoffice to Print".
Your blog, it should look like the custom skin now.

You will no doubt modify the [index.main.php] to removed headers, footers and sidebar code etc. that you do not want etc.
I copied ,edited and inserted code from [] and [] into the index.main.php rather than calling them.

[style.css] should be edited to format the page so that the printer friendly page represents as close as possible the Print Preview of 'the' browser.

2. The second part was to edit [/skins/ my_usual_skin/single.main.php] by adding this code just before the edit lnk:
echo'<a href="http://'.$_SERVER['HTTP_HOST'].$_SERVER['REQUEST_URI'].'?tempskin=print&amp;disp='.$disp.'" target="_blank"> Print </a>

It seems Firefox Print Preview will only read from a stylesheet if it's tagged as media="print"
So have two stylesheets, [style.css] for the 'Printer Friendly Page' and [print.css] for the Print Preview.

[/skins/print/style.css] has @import url (../my usual skin/style.css) and body width around 1000px and large margins so that the 'printer friendly page' is similar to the wide margined typical browser print preview. you can see it working at by using the Print link.

[/skins/print/print.css ] has @import url (../my usual skin/style.css) and body width around 1000px, and small margins. I added styling from a plugin I had made to invoke css float: For some reason although the [/skins/print/index.main.php] had php include_headlines() it only worked with Printer Friendly page not the Print preview option in the browser.

3. [/skins/print/index.main.php] just before </body> tag Added javascript alert
<script type="text/javascript">
alert("The layout, especially margins, may be adjusted by your browser.\r\n\r\nYou can check the Print Preview before printing and modify the layout via\r\n\your browser\'s [Print] > [Page Setup] and > [Options]");

05 Jan 2015 01:47

Page Bug

I had defined skin_init($disp='single') in my [/skins/print/index.main.php] which of course didn't work when I put the print link code in a 'page'

1. In [index.main.php] I have changed skin_init($disp='single') to skin_init($disp) and
2. passed the $disp via the link url i.e.
echo'<a href="http://'.$_SERVER['HTTP_HOST'].$_SERVER['REQUEST_URI'].'?tempskin=print&amp;disp='.$disp.'" target="_blank">Print</a>';

Code now also working in [/skins/my_usual_skin/page.main.php]

05 Jan 2015 05:26

Isn't this a lot of work that can be easier done by just creating the css file specifically for print and adding one line to the header, such as:
<link rel="stylesheet" href="print.css" type="text/css" media="print" />

It's one extra file and one line of code in the skin, instead of a whole new skin. No need to append the tempskin to the print button, and in fact, no need for a print button at all.

Maybe I'm missing something here...

05 Jan 2015 18:17

Hi fredsy.

Thanks for your input and concern.

Your idea does work, and I did do that originally but there is no Print Preview of what the page will look like when the alternate stylesheet is invoked, or to put it another way, the Print Preview option only shows the viewed page not what it will look like using an alternate stylesheet

This way the page is styled before the Print Preview is invoked.

To make this clear I'll put a note to that effect on the original post

Thanks again

06 Jan 2015 10:06

Hmmm... not sure I quite understand. If you use a browser there will be a print preview option in the toolbars. Not sure how it works on tablet/mobile, but I know for desktop at least if you use print preview it will show you the page using the print.css styles and not the default. I wonder how many people use print buttons vs using the toolbar options on their browser?

06 Jan 2015 11:54

Hi again.

I have been using Ubuntu 14.04 and Fx 34

I think you are right in what you say in many cases the problem seems to arise with some css attributes in some instances. The main one I had, which I noted others had, was a failure to implement the css.float attribute, It is important for me as I have made a styling plugin that uses the float attribute and of course on posts where that was used the layout is not as I want.

So even though html_header file has the include_headlines() function it didn't bring in all the styling from my_plugin and when I added the styling directly to the print.css in the usual_skin it still didn't work.

As I noticed other's had this problem I thought of having a skin to avoid the plugin issue.

But as it works otherwise, and with your responses, I'll go over the details again and see if I can get it to work without the extra skin and code. It may be a poor implementation of my_plugin

However there is the issue that with the addition I have, a user can either do a Print/(Print Preview) of either the whole website or use the Print button and the option which is styled by the [print.css]; whereas in the simplified version there is no choice, there is only the view styled by the [print.css]

Update 9th Jan
There's also the benefit, where someone wants to save the page to html, that by restyling the page in the browser, the saved file can just exhibit the post, otherwise any save will take in the full site page as the [print.css] will not have been invoked.

Have added an updated intro to the main post

Thanks again :)

Form is loading...

multiblog engine – This forum is powered by b2evolution CMS, a complete engine for your website.