Image

Beating Rocks Together: Print Styles for Blogger

Long story short (ish)…

Walt liked a blog post but reminded me that I’ve never been able to figure out how to make blogger cough up a good style for printing posts.

I whined that I don’t know how to fix it.

Dorothea and Steve worked HARD to help me fix it.

Steve was the first to come up with an absolutely fantasta-brilliant solution, to which I added a little bit of nothingness to just so I could pretend to have participated in this effort, and which I now offer up to the blogger world. (Hint, if what I write makes no sense, check out my source code. It’s all there … Oh, and what I’m writing is not in “real” tech-speak, because I don’t speak that language very well. Also, Blogger “cleans up” tags in the body of posts and makes them invisible, so I sometimes have to describe tags rather than type them. Sorry. Blame Blogger.)

First, wrap all of your current style like this:

@media screen {[all styles go here]}

The opening curly bracket goes just above /* Defaults and the closing curly bracket goes just above ]]> and the closing b:skin tag, which I can’t type here because blogger WILL NOT leave it in the text.

Then, between your new closing curly bracket and the mysterious closing b:skin tag, put your print style, which looks like this (except that you bracket the style lines with “<" and ">” like regular HTML, which if I do here blogger “cleans up,” so I’ve left off the <> brackets):

[opening bracket here]style media="'print'" type="'text/css'"[closing bracket here]

body {
background: white;
font-size: 12pt;
font-family:Palatino,'Times New Roman',times,serif;
}
#sidebar {display:none;}
#bottom {display: none}
#footer {display: none}
#blog-pager-newer-link {display: none}
#blog-pager-older-link {display: none}
#blog-pager {display: none}
.feed-links {display: none}
.profile-datablock {display: none}
.profile-textblock {display: none}
.profile-data {display: none; }
.profile-img {display: none; }
.comment-footer {display: none; }
.description {display: none; }
.post-footer {display: none; }

[opening bracket here]/style[closing bracket here]

After this comes that mysterious b:skin tag, and then the closing header tag. And now things should print beautifully. Happy printing.

p.s. Wondering why I talk about beating rocks? Wonder no longer.

4 thoughts on “Beating Rocks Together: Print Styles for Blogger

  1. Wowzer. I just tried that out on your long and interesting and worthwhile post…it print-previews (and thus will print) in Firefox as cleanly as the very best WP templates. Quite an accomplishment for a Blogger blog!

    Thanks. Of course, this means that if you say something interesting I’m more likely to save it for later use. Hope you don’t mind.

  2. All hail the wonderful Steve and Dorothea! Once they figured out how to get a separate print style, all I had to do was exclude all the elements I didn’t want to print. They are magical.

    So print away, Walt, print away. :)

  3. Walt, I had suggested that Iris put a <div> in the template that was only visible with the print stylesheet that said “HI WALT!” in 48pt type. Looks like she didn’t follow that suggestion.

    And no magic, Iris. Just bull-bullheadedness and the desire not to let Blogger defeat us.

Comments are closed.