Feb 11, 2009

Changing Your Blog Title Font

You can easily make changes to the title of your garden blog via Layout>Fonts and Colors. There you can change the color and font of your header and sidebar(s). If you're not comfortable with doing major changes to your blog like expanding the header to add gadgets to the header or adding a third column to your garden blog this modification isn't as intimidating.

Once again, for this example I'll be using the Minima template because that is the one I use for my garden blogs and it is the easiest to modify IMO. The great thing about the Minima template is just how clean and neat it is. The downside to using it is that all garden blogs using the template start to blend together because aside from the content not much distinguishes them. If you don't use an image in your header the first thing people who visit your garden blog will see is the title of your blog. Maybe you've noticed that all of these templates have titles with all the words capitalized and you've also noticed, if you're using Minima, that there is no way to change that under Layout>Fonts and Colors.

Step #1: Save or Test

Backup and download your template in case you make a disastrous mistake- you can upload your template to go back to where you were. I recommend trying this out on a test blog first and if you feel comfortable doing it then do it on your live garden blog.

Step #2: Change the text transform line

This modification is easy and all you're doing is changing one word in the code. Look for this section of the CSS in the template:

#header h1 {
margin:5px 5px 0;
padding:15px 20px .25em;
line-height:1.2em;
text-transform:uppercase;
letter-spacing:.2em;
font: $pagetitlefont;
}


Change uppercase to none then preview and if you like what you see save your template. Before I did this modification the title of this blog looked like WWW.GARDENBLOGGERS.COM. You can continue and make the same changes in other areas of your garden blog. All of the text that is automatically turned into CAPS has that same line of code. Just look for it throughout your blog's template code and change uppercase to none. If you're using a template that has lowercase and you'd like to have the blog title in CAPS just change it to uppercase.

7 comments:

  1. Woo Hoo I did it ... :) This is a great tutorial, I will definitely be a faithful reader!

    ReplyDelete
  2. OM, Glad to see you taking the plunge.

    ReplyDelete
  3. Hmm, are you talkin' to me?

    Ha ha. I just changed my header and still want to do more...adding a 3rd column would be nice, as would a widget or 2 in the header.

    I'm going to look into this later (when I get TIME). Time? What's that?!!!

    ReplyDelete
  4. Jan, No, this example wasn't about anyone specific. I ended up doing this on my blog yesterday after I changed my header and didn't like the CAPS in it.

    When you get the time look at the Table of Contents where you'll find tutorials on doing what you mentioned.

    ReplyDelete
  5. hey how do i cahnge the actual font in the header? great tutorial btw. you helped me heaps.

    ReplyDelete
  6. Wow. I am so blown away by how easy this is for some people. Thanks. - Ray K.

    ReplyDelete
  7. ya its a good tutorial !!!!!!!!!!!!!!

    ReplyDelete

I hope you find this blog a useful garden blogging resource. Sometimes I may reply to comments with my MrBrownThumb account or I may reply with my Garden Bloggers account. Hope this isn't confusing. If you're looking for gardening information check out "Google For Gardeners"

Note: Only a member of this blog may post a comment.