Public Service Announcement 1.03
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.)
Saturday, February 9, 2008
Reader Comments (7)
Hey thanks so much for the little lesson. I have done a little html tweaking to make my blog 3 column, but I really have no idea what I am doing. I love any tips and education I can get! I may try tweaking again this weekend. I get bored with my blog so quickly!
Wordpress Peep here. Everytime you said "Mr. Moto" I kept singing "Mr. Roboto" in my head. And out loud at least once.
And since I'm being honest (I've been drinking a little), the rest of the info made the little circus in my head start up *cue circus music*. Mostly because it doesn't apply to me. And partly because I'm a twit and get excited if I can get my alarm clock to go off at the correct time each day.
oh, and cool changes... :)
You go with your bad HTML self. I change and adjust my blog like you do- search, play, oops I messed up so clear edits, search, play. I easily get bored with the look of my blog so I like to change it up from time to time.
OK ms BB mom--between the photo shops, html changes, and two million different colors out there, and the google analytics--I may never get any actual posting done! Who cares though right? As long as it looks good.
I love this new hobby and can't wait to get back to my new favorite pasttime--decoding my html.
Thanks for the tips--keep em coming.
I'm not sure how I missed these posts. Thanks to my handy-dandy Google Reader I've now caught them. But sadly you lost me with your HTML speak. It sounds rather trucker-ish to me.
HTML, good buddy!
Thank you, thank you! You're my new hero for offering such clear answers to this. I've been using the Son of Moto template but I understand it has some in-born issues and has been preventing Google from indexing my site. So you've allowed me to tweak Mr. Moto to look more like the Son. Thanks a bunch. PS- I'm a Pittsburgher, too-- Who knew such great answers were so close to home? :) -Jenn