Saturday, February 02, 2008

A Couple of Minor Tweaks

[Note: since making these changes and composing this post, I've finally taken a look at the site in Explorer, and found that my font changes don't seem to have any effect in that browser. So at least 2/3 of my readers--that's right, both of you--would have had no clue regarding what I was talking about. Sorry about that. Plus, in my first paragraph, I morphed from talking about what I had changed and why into talking about how to accomplish this wonderful feat in your own Blogger pages, without telling you that that's what I was describing. So there might have been hapless readers desperately trying to figure out how to do what I was describing in order to see the wonderful changes I said I had made. Well, probably not, but if you were by any chance, you have my deepest regret and sympathy. I've now carved that first paragraph into two, and added an explanatory line, to make things clearer.

On the brighter side, the printing trick seemed to have worked in both browsers. Not that anyone is going to want to print out this stuff. But still.]

I've made a couple of minor alterations to this site that I hope improve readability and usefulness. First, I've chosen 'Lucida Grande' and 'Lucida Sans Unicode' as the preferred fonts (Mac and PC, respectively) for most of the text. They're the closest thing to Optima that I can find that would be in common usage. The varying thickness of the lines gives it the readability of a typical serif font, but without all the actual serifs that sometimes don't come out well when viewing on-screen.

[If you want to achieve this stunning effect on your own Blogspot blog, here's how to do it.] Unfortunately, Blogger doesn't actually offer these two Lucida fonts as options in the "Fonts and Colors" screen of its Template tab, so you have to alter the HTML template itself. In the "Edit HTML" area, scroll down a bit to get to the "Variable definitions" section; then, in the description of fonts, change whatever sections you want from the current settings to "'Lucida Grande', 'Lucida Sans Unicode', Verdana, Sans-Serif". Make sure you back up your template before doing this; if you run into problems, check punctuation.

The other alteration is less apparent, unless you choose to print out a page. If you click on "Print Preview" from the File menu, you'll see that the blog header, sidebar, and other extraneous material will not print; instead, the main body will expand to fill the page. If you would like to do something similar on your Blogger blog, here's the code I used:

<style type='text/css' media='print'&rt;
#outer-wrapper { width: 100% }
#main-wrapper { width: 95% }
#sidebar { display:none }
#header { display:none }
#h2 { display:none }
.post-footer { display:none }
.comment-footer { display:none }
#blog-pager { display:none }
.post-feeds { display:none }
#footer { font-size:x-small }
#navbar-iframe { display:none !important }
</style>

What this is doing is adding a new CSS style sheet that only applies to printing. You can choose whatever aspects of your page you want to hide from printed output. Add this code in at the very end of the <head> section, just before the </head> code.

1 comment:

  1. love the navy blue. so much nicer than black on the eyes. selahV

    ReplyDelete