The www.joomla.org site

[MrsHaffly]

How is it that no one has created a print stylesheet for the site as of yet? That way when we print out articles and such we don't get the left hand column or the headers, only the real meat of the content. I do this for my sites as it makes printing better and faster. I was just wondering if y'all knew how, and if not, I would volunteer to give you the code and the new stylesheet. It would make a nice addition.....even to the core files as an example to help others do the same.

[Cosmin]

Moderator note:

Moved to Other Forums > Joomla Sites - Feedback/Information

[rhuk]

These sorts of things are not done not because we don't want to do them, but simply because we've not had time.  If you would like to volunteer a print style sheet, please feel free.  We'll gladly use it

[MrsHaffly]

Very well, I'm on it. Shall be delivered tomorrow....I'm booked for today  .....where shall I send it when finished?

[rhuk]

you can email it to me (link under my picy on left)

[dhom]

Is this available for others to use as well? 

[MrsHaffly]

I created it specifically for the joomla.org site, so it will only work with that particular template and site. However, every site can use and implement a print style sheet tailor made for it. All you have to do is create a new style sheet for print and insert a little code into your html template, and you're finished.

If you need help, or whatever, just let me know.

[dhom]

Thanks for letting me know!  I created my own last night using the @ symbol inside of the style sheet I'm using already.

Not much there, though...  I just copied and pasted sections from the original style sheet into the new section and removed all the declarations.  Then I added display:none until I got things to look the way I wanted. 

I'm planning on eventually making the style sheet actually printer-friendly.  I'm assuming I should define font sizes in terms of points [edit: oops, I said pixels originally ] and change the widths of my table columns.  I'll also add generated content for headers.

Anything else that I should do? 

[MrsHaffly]

Not really. The important part is to remove all the extra images in the head, the left and right columns, and only provide the user with the basic content, styled well for print. Points, pixels, ems are all fine for printing a web page. You'd want to use points if you were using a real text layout program such as Quark, but it isn't near as vital for web content.

Typically I will take the head info and recreate a nice logo for printing and reformat the head area with the logo and content laid out well, and include a footer, but that is all. I restyle all the text in black, underline any links, and if I do use color of any kind, make sure it's dark enough to print on a grayscale printer, and different enough to stand out on a color printer.

Basically though, the most important thing, is getting rid of unneeded content so when a person wants to print the page, they only get the real meat, and less pages to print.

[dhom]

Thanks for the suggestions!  I'm working on the print section of my style sheet now, and it looks all right in Opera, but the right-hand side of the content is cut off in Internet Explorer's Print Preview.  Here's the URL of the test site:

http://TeachBible.com

I'll keep working on it...  it'll look good soon (I hope). 

EDIT: I've found plenty of people describing this problem, but almost all of them say to solve the problem by having the user set his own print margins to zero.  I haven't seen a CSS solution yet.

EDIT 2: Blah...  I ran into yet another problem.  Firefox keeps breaking the page before my header.  I've tried inserting page-break-inside: avoid for the body element, which didn't work, and I also tried inserting page-break-before: avoid for the header elements, which also had no effect.  I'll keep plugging away.... 

[guilliam]

was the print sheet delivered?

[MrsHaffly]

Yes. Some time back at the end of September I believe.

[rhuk]

Sorry guys, i really dropped the ball on this one.. i will take a look at getting this integrated shortly.

[dhom]

Thanks for the suggestions!  I'm working on the print section of my style sheet now, and it looks all right in Opera, but the right-hand side of the content is cut off in Internet Explorer's Print Preview.  Here's the URL of the test site:

http://TeachBible.com

I'll keep working on it...  it'll look good soon (I hope). 

EDIT: I've found plenty of people describing this problem, but almost all of them say to solve the problem by having the user set his own print margins to zero.  I haven't seen a CSS solution yet.

I ended up compromising by setting the table width to 620px, which prints nicely in IE and Opera but is too narrow in FireFox.  I'd love to hear a real solution to this problem. 

[guilliam]

Sorry guys, i really dropped the ball on this one.. i will take a look at getting this integrated shortly.

thanks @rhuk... looking forward to have the forums and read it in our mobile devices(pda's)