Customise your Blogger template's CSS

My blog's design is based on Awesome Inc's template (the grey one), which is customised with my own CSS.

To inject your own CSS and customise your blog's design, just navigate to Template; click the Customise button; Click the Advanced link; click the Add CSS link.

Here is my CSS. Note: These CSS styles won't work when viewed on mobile devices, but you can still apply some styles (like text colour and background colour) via the regular advanced editor. Oh, and one more thing...if you don't want example code leaking out of your pre tags you'll have to hard code style="white-space:pre-wrap;" into your tag in the html editor.

body { 
  background-color: #4e89a4; 
}

h1.title, widget.header, .header h1, .Header h1 a,  { 
  color: lightblue; 
}

/* Code area */
pre {
  background: #e6e6e6;
  padding: 15px;
  color: black;
  /* Wrap text inside pre */
  white-space: pre-wrap;       /* CSS 3 */
  white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
  white-space: -pre-wrap;      /* Opera 4-6 */
  white-space: -o-pre-wrap;    /* Opera 7 */
  word-wrap: break-word;       /* Internet Explorer 5.5+ */
}

/* Widget right-side area */
.main-inner .widget { 
  padding-top: 5px;
  border: 0px solid white; 
  box-shadow: none;
  -webkit-box-shadow: none;
  border-bottom: 3px solid lightgrey
}

/* Widget main area */
.date-outer { 
  padding-top: 15px;
  border: 0px solid white; 
  box-shadow: none;
  -webkit-box-shadow: none;
  border-bottom: 3px solid lightgrey
}

/* 
Bottom panel where it has the "Home" link. 
Note, this needs to be an id 
*/
#blog-pager { 
  padding-top: 15px;
  border: 0px solid white; 
  box-shadow: none;
  -webkit-box-shadow: none;
  border-bottom: 3px solid lightgrey
}

.blog-feeds, a.feed-link:link, a.feed-link:visited, a.feed-link:hover, a.feed-link:active { 
  color: white;
}

/* Footer */
.footer-fauxborder-left { 
  border: 0px solid white; 
  box-shadow: none;
  -webkit-box-shadow: none;
  background: lightgrey none repeat scroll 0 0
}