How to customize blogspot

Thanks to a very good friend of mine, Claudio Corsetti, I managed to make some changes to my blog layout

1) To make the main column wider just do this
#outer-wrapper { width: 1000px;}
#main-wrapper { width: 750px;}
#sidebar-wrapper { width: 220px;}

The main-wrapper width added to the sidebar-wrapper one should always be less than the outer-wrapper width.
I made the out-wrapper width to be 1000px taking in to account that most of the current screen are more than 1000px wide


2) To justify the text of the main wrapper
#main-wrapper {text-align:justify;}

3) If you want to add formulas using images, this setting comes useful, it controls their vertical align

.post img, table.tr-caption-container {
vertical-align: -50%;
}

Note that for this blog I will not be using images for formulas but the MathML standard.

4) To make the main column background-colour different from the main page one, we need to change the css body element

With this instruction I change page background color
body { background: #d0e4fe; }

5) the code here makes the outer-wrapper colour adjustable through the custom Layout web interface
#outer-wrapper { background:$bgcolor;}

 
CSS Excerpt
-----------------------------------------------------------------------------------------------

body {
background:$bgcolor;
background:#d0e4fe;
margin:0;
color:$textcolor;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}

#outer-wrapper {

  background:$bgcolor; 
  width: 1000px;
  margin:0 auto;
  padding:10px;
  text-align:$startSide;
  font: $bodyfont;

  }

#main-wrapper {
width: 750px;
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 */
text-align:justify;
}

#sidebar-wrapper {
width: 220px;
float: $endSide;
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 */
}


.post img, table.tr-caption-container {
padding:4px;
border:1px solid $bordercolor;
vertical-align: -50%;
}