I began with an existing theme for Blogger, Tekka, that pushes the right sidebar down beneath the main content when the window is narrow. I then made some CSS changes to tweak the look to fit my tastes.
First things first, the default fonts must go! I drew much of my inspiration from Nick Johnson's blog, specifically the way that serif fonts are used in some places for accent while sans-serif is used for most of the content. This is a technique that I experimented with a bit in a graphic design class in college.
For titles I added:
h1, h2 {To change the font used for the main text in the page, I set a template variable as follows:
...
font-family: Georgia, 'Times New Roman', Times, serif;
}
h3 {
...
font-family: Trebuchet MS, Verdana, Sans-serif;
}
<Variable name="bodyFont" description="Text Font"Next I set about changing the style of the title link. You see, when someone is viewing a single post, the blog title becomes a link to the main blog page. So, the blog's title is styled like a link and I found the default link styles a bit jarring. This might seem like a minor change but so often it's the little things that matter. I set this style using
type="font"
default="normal normal 100% 'Lucida Grande',
Verdana, Helvetica, sans-serif"
value="normal normal 100% 'Lucida Grande',
Verdana, Helvetica, sans-serif">
h1 a:visited {Now that the text styling is done, the layout could use a bit of adjustment. I changed the margins on the main content to the following:
...
color: #505050;
}
#content-wrapper {I removed the padding from the
margin-top: 20px;
margin-$endSide: 30px;
margin-bottom: 30;
margin-$startSide: 35px;
}
h1
title style and the date header. I also removed the style rule entirely for the description.We're nearing the end! The sidebar wasn't quite to my liking so I changed the border style. Lastly, in order to get the sidebar to flow down beneath the main content I set a minimum width. Here is the final style for the sidebar:
#sidebar {I debated about posting the whole template here, but I'm not sure that it would be very readable. If you would like the whole thing, leave a comment and I can email it to you.
text-transform:none;
background-color: $sidebarBgColor;
color: $sidebarTextColor;
padding-$startSide: 20px;
width: 30%;
min-width: 215px;
float: $endSide;
font: $bodyFont;
border-$startSide:1px solid $mainTextColor;
word-wrap: break-word;
overflow: hidden;
}