Friday, November 20, 2009

Customizing Blogger

I started with the Minima template and made a few changes. Basically I just changed some of the styles, removed the header, replaced the sidebar and body divs with a table so that the page would resize nicely without one or the other getting pushed to the bottom, and embedded my own title inside the sidebar area.

/* ---- Header ---- */

#header { 
  text-align: left;
  color:$pagetitlecolor;
  font: $pagetitlefont;
  white-space: nowrap;
}
#header h1 { }
#header a { }
#header a:hover { }
#header .description { }
#header-wrapper { }
#header-inner { }
#header img { }

/* ---- Body ---- */

#outer-wrapper {
  margin:0 auto;
  padding:10px;
  text-align:$startSide;
  font: $bodyfont;
  }

#main-wrapper {
  padding-left: 30px;
  max-width:700px;
  vertical-align: top;
  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 */
  }

#sidebar-wrapper {
  width: 220px;
  vertical-align: top;
  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 */
}
...

<table align='center'><tr><td id='sidebar-wrapper'>
<div id='header'>Michael Holtstrom</div>

   ...

</td><td id='main-wrapper'>

   ...  

</td></tr></table>

Also, I'm using syntaxhighlighter which I first heard about at developertips.blogspot.com. But the author of syntaxhighlighter links to blog.cartercole.com which gives simple instructions and the text you need to paste into your blogger template to get it running. It's probably best to host the source yourself, but for now I'm going with quick-and-easy.

{ "loggedin": false, "owner": false, "avatar": "", "render": "nothing", "trackingID": "UA-36983794-1", "description": "Minor customizations to Blogger.", "page": { "blogIds": [ 12 ] }, "domain": "holtstrom.com", "base": "\/michael", "url": "https:\/\/holtstrom.com\/michael\/", "frameworkFiles": "https:\/\/holtstrom.com\/michael\/_framework\/_files.4\/", "commonFiles": "https:\/\/holtstrom.com\/michael\/_common\/_files.3\/", "mediaFiles": "https:\/\/holtstrom.com\/michael\/media\/_files.3\/", "tmdbUrl": "http:\/\/www.themoviedb.org\/", "tmdbPoster": "http:\/\/image.tmdb.org\/t\/p\/w342" }