Customizing the blog a bit

This layout has always been rather insistent that I have a very thin middle column in which to place my posts. It's bugged me for a long time, but I decided that messing with the CSS template was outside of my competence level and just asking for trouble.

At the same time, I've always wanted to be able to place code into the blog without it looking like some awful monster crapped out unformatted text.

Well this morning I've fixed these issues.

The latter was as easy as googling "showing code in blogspot" and then following the instructions at the top link.

Essentially, you go to the Layout section of your dashboard, click "edit HTML", find a tag "]]></b:skin>", and insert some CSS in the section above it. It adds the necessary stuff to make pre and code tags to work wonderfully.

Then it recommends running code through a converter to quickly change it to escaped-text before posting it.

I feel like (and am, really) a script kiddie but hey, I've got code showing up in my blog like so:

#include<stdio.h>
#include<stdlib.h>

int main(int argc, char *argv[])
{
   int a, b, c;
   int *d = NULL;

   a = 5;
   b = 6;
   c = 7;
   d = malloc(sizeof(int));
   d[1] = 8;

   if(argc == 2)
   {
       printf("What a lame example!\n");
   }

   free(d);
   return 0;
}

which is wonderful.

Then I got to thinking "Hey, I'm a cocky CSS editing fiend, why not solve the problem of the blog's lacking width?" And I looked over the code in the layout section.

I found in there (this is likely specific to this template)

#header-wrapper {
 width:660px;
 margin:0 auto 10px;
 border:1px solid $bordercolor;
 }

#main-wrapper {
 width: 410px;
 float: $startSide;
 word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
 overflow: hidden;     /* fix for long non-text content breaking IE sidebar float */
 }

and

#footer {
 width:660px;
 clear:both;
 margin:0 auto;
 padding-top:15px;
 line-height: 1.6em;
 text-transform:uppercase;
 letter-spacing:.1em;
 text-align: center;
}

These all have 'width' attributes that look like they're big enough to be most of the screen, and they're the only similar ones in the file. 660 pixels isn't very wide - I imagine it was set at that to work on an 800x600 screen, should one need to see my page.

Well you know what? I'm officially leaving those people in the dust.

Following some common design advice of 960 pixelwidth pages (see 960.gs), I decided to directly increase 660 to 960, and 410 (correspondingly) to 710. This widened the main post section of my blog considerably, and seems to have had no negative consequences.

Hooray for a productive blogging morning.