Thanks. I’ll be taking my time so I printed the page out.
What can you do about the print stylesheet? It’s OK, in that it’s as good as any other website without a print stylesheet, but I reckon it could be great with some relatively minor tweakage.
OK. You only want to target printed output, so you need a media rule in the stylesheet, which is in file wp-content/themes/default/style.css, to which you add:
@media print {
/* These rules are for printouts only */
}
There is no need to print the blog header, so the first rule is #header { display: none; }.
There is also no need for the navigation, so the next rule is .navigation { display: none; }.
The default font could do with being a bit bigger. A 12pt (1/6″ high) typeface is a reasonable balance so the next rule is #content { font-size: 12pt; }.
The Outreach control panel has to go. The rule is .outreach-control { display: none; }.
The “follow any responses” fragment and the entire comment leaving section have to go. The rules are .postmetadata { display: none; }, #respond { display: none; } and #commentform { display: none; }.
The footer can also go. #footer { display: none; }
Start with those. If you’re happy with the result, we can start adding some style to make things a bit easier to read.
OK, I ftp’ed to libertini.net, logged in, changed directory to www/libertus/wp-content/themes/default and got style.css which I opened from my desktop with an editor.
I added the following lines to the end of that file by copying from your comment, resulting in
@media print {
/* These rules are for printouts only */
/* Suggested by Paul M @ http://www.libertini.net/libertus/2006/05/08/happy-sixteenth-jessica/#comment-8006 */
#header { display: none; }
.navigation { display: none; }
#content { font-size: 12pt; }
.outreach-control { display: none; }
.postmetadata { display: none; }
#respond { display: none; }
#commentform { display: none; }
#footer { display: none; }
}
I uploaded the changed file but nothing seems to have happened. It doesn’t look any different in a print preview on Firefox.
You’re right. My printout looks no different. Those rules aren’t being picked up. The reason is the stylesheet for the theme is only read for screen media. Put the print rules into a different stylesheet, for example, print.css and add the following markup to wp-content/themes/default/header.php:
<link rel=”stylesheet” href=”http://www.libertini.net/libertus/wp-content/themes/default/print.css” type=”text/css” media=”print” />
Watch out though! The stylesheet path won’t be direct, it’ll be in one of those PHP blocks, so copy carefully.
Then I realised it wouldn’t work because I can’t change the name of the stylesheet like you asked. So I put the print changes back into style.css. It’s not exactly what you asked me to do, but they’re being picked up now and they makes one hell of a difference to the print preview! What next?
Wow! Yes, that’s much better! I can read the text without squinting now, although there is quite a lot of wasted paper in the margins. The bigger text makes it all the more important to use as much width as possible so that fewer comments are split across pages.
Let’s try to find a happy medium. Separate the screen and print rules first. At the top of style.css, add @media screen { and add a brace } before your print rules. See what I’m getting at?
Yes it looks better and yes we can do better. I’m happy enough with the printout now, so may I compose my reply to Jessica without further distraction? Thanks for making the changes.
Just doing my job. Hey, you know, I can always lean on the wrong button and make the entire discussion vanish. That way you wouldn’t have to waste your time replying to Jessica.
Paul M said: May 21st, 2006 at 13:06
Libertus,
Thanks. I’ll be taking my time so I printed the page out.
What can you do about the print stylesheet? It’s OK, in that it’s as good as any other website without a print stylesheet, but I reckon it could be great with some relatively minor tweakage.
ReplyLibertus said: May 21st, 2006 at 13:56
Paul,
You’re the CSS voodoo doctor. Tell me what to type.
ReplyPaul M said: May 21st, 2006 at 17:27
Libertus,
OK. You only want to target printed output, so you need a media rule in the stylesheet, which is in file wp-content/themes/default/style.css, to which you add:
@media print {
/* These rules are for printouts only */
}
There is no need to print the blog header, so the first rule is #header { display: none; }.
There is also no need for the navigation, so the next rule is .navigation { display: none; }.
The default font could do with being a bit bigger. A 12pt (1/6″ high) typeface is a reasonable balance so the next rule is #content { font-size: 12pt; }.
The Outreach control panel has to go. The rule is .outreach-control { display: none; }.
The “follow any responses” fragment and the entire comment leaving section have to go. The rules are .postmetadata { display: none; }, #respond { display: none; } and #commentform { display: none; }.
The footer can also go. #footer { display: none; }
Start with those. If you’re happy with the result, we can start adding some style to make things a bit easier to read.
ReplyLibertus said: May 21st, 2006 at 17:40
Paul,
OK, I ftp’ed to libertini.net, logged in, changed directory to www/libertus/wp-content/themes/default and got style.css which I opened from my desktop with an editor.
I added the following lines to the end of that file by copying from your comment, resulting in
@media print {
/* These rules are for printouts only */
/* Suggested by Paul M @ http://www.libertini.net/libertus/2006/05/08/happy-sixteenth-jessica/#comment-8006 */
#header { display: none; }
.navigation { display: none; }
#content { font-size: 12pt; }
.outreach-control { display: none; }
.postmetadata { display: none; }
#respond { display: none; }
#commentform { display: none; }
#footer { display: none; }
}
I uploaded the changed file but nothing seems to have happened. It doesn’t look any different in a print preview on Firefox.
ReplyPaul M said: May 21st, 2006 at 17:48
Libertus,
You’re right. My printout looks no different. Those rules aren’t being picked up. The reason is the stylesheet for the theme is only read for screen media. Put the print rules into a different stylesheet, for example, print.css and add the following markup to wp-content/themes/default/header.php:
<link rel=”stylesheet” href=”http://www.libertini.net/libertus/wp-content/themes/default/print.css” type=”text/css” media=”print” />
Watch out though! The stylesheet path won’t be direct, it’ll be in one of those PHP blocks, so copy carefully.
ReplyLibertus said: May 21st, 2006 at 17:56
Paul,
OK, I undid the changes to style.css, put them in print.css (I removed the @media rule) and put style.css back on the server with ftp.
I then got header.php and edited it. I copied the line that reads
added the following line after it
and put the file back on the server.
Then I realised it wouldn’t work because I can’t change the name of the stylesheet like you asked. So I put the print changes back into style.css. It’s not exactly what you asked me to do, but they’re being picked up now and they makes one hell of a difference to the print preview! What next?
ReplyPaul M said: May 21st, 2006 at 18:07
Libertus,
Wow! Yes, that’s much better! I can read the text without squinting now, although there is quite a lot of wasted paper in the margins. The bigger text makes it all the more important to use as much width as possible so that fewer comments are split across pages.
Let’s try to find a happy medium. Separate the screen and print rules first. At the top of style.css, add @media screen { and add a brace } before your print rules. See what I’m getting at?
ReplyLibertus said: May 21st, 2006 at 18:32
Paul,
OK, I’ve done that and it previews much better. I experimented with the margins, both print and screen. What do you think? Can we do better?
ReplyPaul M said: May 21st, 2006 at 18:44
Libertus,
Yes it looks better and yes we can do better. I’m happy enough with the printout now, so may I compose my reply to Jessica without further distraction? Thanks for making the changes.
ReplyLibertus said: May 21st, 2006 at 18:52
Paul,
Just doing my job. Hey, you know, I can always lean on the wrong button and make the entire discussion vanish. That way you wouldn’t have to waste your time replying to Jessica.
Reply