The woof and the warp weblog about web stuff.
Printer friendly Joomla! content with a print css file
One of the most forgotten or ignored "features" of a website is the print page. Many times a print page is not even considered to be part of building a web-site and in that case it is up to the designer or front-end developers mood to create printer friendly pages or not
Not is probably the most common answer because it takes time and it's simply not part of the scope of the project while in realty it should be.
So how do you tackle a good looking print page
First of all I want to point out that I try to avoid using a print icon or something like that in the template, printing is a browser functionality and not a feature in a website.
The start of your print page design adventure is adding a print css file to your Joomla! template css directory which you can simply call "print.css".
To hook up that file with your template you'll need to open your template "index.php" file and find the following line:
<jdoc:include type="head" />
That piece of code is what renders Joomla! meta data and javascript and css files. Below that line you need to add the following html:
<link rel="stylesheet" href="<?php echo $this->baseurl; ?>/templates/<?php echo $this->template; ?>/css/print.css" type="text/css" media="Print" />
Now once that file is created and the line is added to the head section of your template you can start crafting your print page css.
Things like; read more links, last 5 forum posts, large header images, ads or other clickable items are not really useful when you are reading the content on a piece of paper. That's why we are going to hide everything that doesn't need to be printed.
You can do two things, look for what you want to hide in your template file or just do a view source in your browser. I usually start with the template file to hide the large chunks and after that I start looking in the source for things like; read more links which are rendered by the CMS itself.
In the css file you just start adding classes and id's to a list that is set to display none. Make sure you leave your content container untouched to keep it visible.
#nav-container,
#promo-container,
#middle-sidebar,
#right-sidebar,
#more-container,
p.read-more,
div.items-pagination,
div.items-links,
div.after-content-events {
display: none;
}
You can test what is happening in your browser by using the print preview function.
When you are at the point where you only have the content left that you would like to show on print you can start adding some css to the print.css file to make it look a little more beautiful, there are limits but you can add some eye candy.
Now, one of the reasons why you should create print pages is my dad. He is one of those old school guys that prints pages from the internet to read instead of reading on screen and there are probably more oldies like him that do the same :-)
There are 32 comments posted.
Re: print.css in joomla
I have made a print.css for a Joomla 1.5 site that works if you print the page using either a keyboard short cut or by "file/print" from the browser. The print.css is not taken into account however if I print using the print icon in the page. How would I be able to bridge the use of the print icon so that the css is taken into account?
Re: CSS Issue
Hi,
Can we make it reverse..?
My print content is too small.
Can i go like this:
choose those id's to print out only.
Reverse from choosing id's to leave the content.
Thanks,
Arpit
Thanks for sharing. I've been looking for this so long.
Re: tess
prev testt hehehe
Re: titulo
asdfasdfasdfasdfa
as
dfas
f
as
df
Re: Optional
I have made a print.css for a Joomla 1.5 site that works if you print the page using either a keyboard short cut or by "file/print" from the browser. The print.css is not taken into account however if I print using the print icon in the page. How would I be able to bridge the use of the print icon so that the css is taken into account?
Re: Optional
I just did this on my site after reading this little tut and it works great. I had completely forgotten that the print view in Joomla! isn't very pretty by default, so thanks a lot for the reminder!
cheap nike shox r4
fendi sandals
women shox shoes
cheap nike shox nz
cheap nike shox r4
fendi sandals
women shox shoes
cheap nike shox nz
Re: image on top
Thanks, very usefull.
Is there an option to show some header image in print only version? How can i do it?
nice very helpful tips.
thanks for sharing.
Re: Help
I'm trying to do this same thing on my website. However I want to simply create a print button on the main page having it just print the relevant data off the website and not utilize the flyer section of Joomla. Any ideas on the coding and where the best place would be to insert the coding? Any help would be appreciated! :)
Re: nike air rift
Like your website quite a lot, not simply due to the fact with the articles and other content, however the view of you on the society. Thank you for sharing.
Hhe article's content rich variety which make us move for our mood after reading this article. surprise, here you will find what you want! Recently, I found some wedsites which commodity is colorful of fashion. Such as that worth you to see. Believe me these websites won’t let you down.
Re: handbags
nice very helpful tips.
thanks for sharing.
Re: handbags
http://www.louisvuittonbagmall.com/ louis vuitton bag
Re: wholesale nike shoes
it sounds great .Join us to start sharing your reviews, news about sport shoes in kickshere.com
Re: jordan shoes for sale
it sounds great .Join us to start sharing your reviews, news about sport shoes in footworkwarehouse.com
It looks good,I have learn a recruit!Recently,I found an excellent online store, the XX are completely various, good quality and cheap price,prada accessories it’s worth buying!
Wow,good!
I love what you wrote.
I think we can make friends.
Wow,good!
I love what you wrote.
I think we can make friends.
Re: swiss replica watches
i believe you are a good writer, but have you erver thought to write some special artcals for peopel who likes shopping very much.
Re: coach handbags
Very nice post. I really enjoy the reading.Thanks
It looks good,I have learn a recruit!Recently,I found an excellent online store, the XX are completely various, good quality and cheap price,nike air max shoes it’s worth buying!
It looks good,I have learn a recruit!Recently,I found an excellent online store, the XX are completely various, good quality and cheap price,[url=http://www.nikemaxsale.com]nike
air max shoes[/url] it's worth buying!
Re: NFL Jerseys
hey,you have posted such a effectful article that it will certainly help me.
Milgauss replica watches,http://www.watcheslux.com/milgauss_rolex-watches.html
Thanks for sharing. I've been looking for this so long.
Thanks for the insight! There is a lot of helpful information within those links http://www.watcheslux.com/datejust_rolex-watches.html
welcome to gamesavor to buy wow gold!
Re: http://www.ed-hardy.cc
Forever 21, the US clothes retailer popular for selling fashion-forward clothing at low prices, has courted controversy by expanding into maternity wear. The brand, loved by youngsters and teenagers, has launched Love 21, a range of cheap and stylish maternity clothing including jeans for as little as US $8.
ed hardy
[url=http://www.ed-hardy.cc/ed-hardy-clothing.html]ed hardy clothing[/url]
http://www.ed-hardy.cc/ed-hardy-caps.html ed hardy hat
Older posts worth reading
Club templates or custom templates, what's the difference?
In Joomla! land there are a couple of ways to built your website and I'm talking about the template specifically. Now...
Printer friendly Joomla! content with a print css file
One of the most forgotten or ignored "features" of a website is the print page. Many times...
Joomla! 1.5.7 Security Release Now Available
The Joomla Project is pleased to announce the immediate availability of Joomla 1.5.7 [Wovusani]. This...
A new function in Joomla! 1.5.7 to help with splitmenu's
As you may know already there is an option in Joomla! 1.5 to create one menu tree but show different...
Re: It works after all!
# 1 - Posted by: AnotherGuy on 2008-09-11 03:04:31
I just did this on my site after reading this little tut and it works great. I had completely forgotten that the print view in Joomla! isn't very pretty by default, so thanks a lot for the reminder!
I'm still tweaking it a bit, but it works now and that matters more than anything.