Changed the default blog template.

One thing I don't like the blogger is the limited selection of template. I am happy with the one I selected right now, but it gave too much margin to the sidebar, and leave main content area very thin. While it's fine at most times, I did run into a couple of awkward situations when I have to insert some images into the blogger. I have to resize the image to fit into the content area.

I start to play with the html templates codes, and a couple of places I have to edit are :

 

#outer-wrapper {
  width: 947px; (change from 847 px to 947 px)
  margin: 0px auto 0;
  text-align: left;
  font: $bodyfont;
  background: url(http://jianweisun.com/tile.gif) repeat-y; I also have to edit the original tile.gif to make it wider.
  }

#content-wrapper {
  margin-left: 42px; /* to avoid the border image */
  width: 863px; (change from 763px to 863px)
  }

#main {
  float: left;
  width: 560px; (change from 460px to 560px)
  margin: 20px 0 0 0;
  padding: 0 0 0 1em;
  line-height: 1.5em;
  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 */
  }

 

#header-wrapper {
   width: 947px; (Add this line)
  margin: 0;
  padding: 0;
  font: $pagetitlefont;
  background: #e0e0e0 url(http://jianweisun.com/top_div_blue_947.gif) This image is also needed to be widened.
    no-repeat 0px 0px;
  }

#header {
  width: 863px; (Add this line)
  margin: 0;
  padding: 25px 60px 35px 60px;
  color: $pagetitlecolor;
  background: url(http://www.blogblog.com/tictac_blue/top_h1.gif) no-repeat bottom left;
  }

It looks pretty easy, but it takes me a couple of hours to figure out all those tricks.