Geekery and Beer

So, I’m sitting here drinking some of my new homebrew. It’s a rather nice cherry wheat that came out a tad more spicy than I was actually expecting. I think I rather overdid it on the cinnamon. I figure that after another couple of weeks of bottle conditioning, it might turn out to be a rather good beer.

One thing I have noticed is that it’s a lot stronger than I was expecting. After just one, I’m catching a buzz. Very nice.

Anyway, while I’m basking in the sun and enjoying a frosty beverage, I figured I’d putz around with the website a bit. Those of you of a geekish bent might try looking at the site on your mobile phone or whatever handheld device you happen to prefer. Through the magical power of the interwebs, the blog should now look different on the handheld devices, more suited to smaller screens. It’ll eliminate the sidebars and rejigger the display a bit. Since I’ve been using the mobile web a lot more, I find this quite cool.

Also if, for some demented reason, you feel it necessary to produce hardcopy of my random meanderings, you’ll find that the excessive imagery disappears on the printout, leaving you with just the basic text and little else. This should all be automatic if you have a modern browser, no strange trickery required. Although I’m dubious as to why anybody would want to print out my worthless words, the option is now there, if you happen to come up with a reason.

Those of you interested in the technical details can read on after the jump…

On to the tech stuff:

Basically, this is a modern website, using CSS and XHTML and such (MIME-type of text/html aside… damn you IE!). So all I really had to do was to create two new stylesheets, one for handheld devices and one for print devices. The largest part of these stylesheets involved adding lots of “display:none” code to various bits, thus eliminating them from the page. This is why when, for example, you print the page, you won’t get the sidebars. They’re eliminated via the new CSS rules.

After creating these stylesheets (and I highly recommend the Web Developer extension for Firefox to accomplish this, as it lets you view your CSS changes to the page in real time), you save them on your website somewhere and then make the pages reference them. Since I use WordPress, I saved them in the theme directory as handheld.css and print.css. Then I edited the theme’s header.php file to include code that looks exactly like this:

<link rel=”stylesheet” href=”<?php echo get_stylesheet_directory_uri(); ?>/handheld.css” type=”text/css” media=”handheld” />
<link rel=”stylesheet” href=”<?php echo get_stylesheet_directory_uri(); ?>/print.css” type=”text/css” media=”print” />

Simple, no? This tells your browser where to find the new CSS files, which it loads and uses when necessary. So handheld devices look at the one that is defined by the media=”handheld” link, and the browser uses the print one for printing. Simple. Easy. Even a monkey could do it. And I’ve learned something today. And if you read this, perhaps you did too. :)

0 thoughts on “Geekery and Beer

  1. Have you had any reports of your Executable PHP Widget for WordPress not working with WP 2.2.1? Totally stopped for me after the upgrade, but wasn’t sure if it was an isolated thing. Thanks.

  2. @jedimacfan: Yes, I have. The problem is likely that a lot of people applied a patch to the widget itself. But, the widget was not the issue, WordPress 2.2 had a problem internally that broke the widget. If you install the original, unmodified widget, it should work with WordPress 2.2.1.

  3. Thank you that was fabulous, I’d been using wp-print and changed my permalink structure and it stopped printing my pages (posts fine) so was looking for a solution and implemented yours in about 2 minutes!

    Put in header.php for theme:

    <link rel=’stylesheet’ href='<?php echo get_stylesheet_directory_uri(); ?>/print.css’ type=’text/css’ media=’print’ />

    Copy and rename style.css as print.css.

    Too Easy!!

  4. It didn’t work for me. I copied stylesheet.css and named it print.css and put it in the theme folder. Now, I’ve got
    both style.css and print.css in the theme folder. I also copied <link rel=”stylesheet” href=”/print.css” type=”text/css” media=”print” /> into the header.php.
    Maybe I copied it in the wrong place. Where in the header should that code go?

    1. Just /print.css won’t work. You need to include the stylesheet_directory_uri() bit as well, like Wendy posted above you.

      Also, print.css will have to be different than the style.css, otherwise it won’t look any different when you print it. However, the print.css will be considerably simpler, as most things you’ll want to hide probably, so setting them to display:none is 90% of what you do.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>