And in this episode, we'll talk about how to change the colors and fonts on your Blogger template. (Are you Wordpress peeps ready to puke yet? No? I'll work on that.)

There are two ways to edit colors and fonts: the really easy way, and the not really, but still easy way. The Really Easy Way is to use the Fonts and Colors tab in Blogger. It's not active with all of the templates, but I know that it is there for the Minimas and Motos of the world (again, you are looking at a tweaked Mr. Moto). You just select the attribute you want to change in the list, then select the color that you want used for it. So if you want a black background with white text, you would set the Main Background Color to black and the Text Color to white. Play around for a bit, preview your results often, and you'll be off and running.

The Still Easy Way involves editing the html. I discovered that there was no way to change the sides on Mr. Moto without going in to the html. I was stuck with gray, which was fine for a while, but I eventually got bored of it. I'm only going to address Mr. Moto from here on out (because I just edited it and it's still fresh in my head), but the same principals apply to any template.

To change the gray sides to a different color, find this section in the html:

body {
margin: 0;
padding: 0;
border: 0;
text-align: center;
color: $mainTextColor;
background: #bba url(http://www.blogblog.com/moto_mr/outerwrap.gif) top center repeat-y;
font-size: small;

That line about background? That's how Blogger knows what color/image to put there. Let's say you want to have red on the sides. You would change the above to look like this:

body {
margin: 0;
padding: 0;
border: 0;
text-align: center;
color: $mainTextColor;
background: #E42217 top center repeat-y;
font-size: small;

And, of course, now you're wanting to know how I knew to type "#E42217" up there. There are tons of websites dedicated to the world of html colors. I happen to like this one. I just looked down the page until I found a red I liked, then copied and pasted the code for it.

If you decide to use Mr. Moto, the gray bar between your header and blog text may also need changed. To do that, look for this area in the html:

#header-wrapper {
background: #bba url(http://www.blogblog.com/moto_mr/headbotborder.gif) bottom $startSide repeat-x;
margin: 0 auto;
padding-top: 0;
padding-$endSide: 0;
padding-bottom: 15px;
padding-$startSide: 0;
border: 0;

Again, you want to change the background to whatever color it is that you want. So, if you want it to be yellow, you'll change it to something like this:

#header-wrapper {
background: #FFFF00 bottom $startSide repeat-x;
margin: 0 auto;
padding-top: 0;
padding-$endSide: 0;
padding-bottom: 15px;
padding-$startSide: 0;
border: 0;

I personally think that the hardest part about editing html colors is trying to figure out what color I want to use. Like the purple on the sides right now? I'm not sure that I love it. But I liked it better than the 418 other colors I tried out. Of course, that's one of the good things about editing the colors, if you don't like something, just click "Clear Edits" and pretend like you never screwed it up in the first place.

Go forth, Blogger peeps, and purdify your blogs.

(In the interest of full disclosure, I will admit that I changed one other thing about Mr. Moto. I thought the text areas were too narrow, so I widened them a little bit. If you want to do the same, email me and I'll give you instructions. I found the instructions using a Google search, but the ones I found were freakin' confusing.)