- Share This Post
- 3
- submit
- 8
-
Sparkle (0)
One of the most frequent blog design questions I get asked is, How do I change the banner on my blog template? In this post, I'll talk you through changing a banner on one of the most popular free hosted services, Wordpress.com -- but never fear, Blogger and other sundry blog platform fans, I'll cover you in a future post (and you may even glean enough from this tutorial to figure it out like the rock star you are).
In my previous post, I talked about the basic structural elements of a blog design or template. If you've not had a chance to read that, it might be helpful when applying some of the "how-to" points discussed here and/or in future posts. Feel free to take a few minutes to peruse that. I'll wait. :)
OK! So now that you've brushed up, let's get started!
If you've just started your Wordpress.com account, you may still be displaying the default Kubrick Theme, as shown here, but you can apply this method using any of the themes available in the Theme Library. Let's break it down, shall we?
From your Dashboard, choose Appearance -> Header from the side navigation, as demonstrated in the screenshot below.
On this screen, you're given the opportunity to make a few basic changes to the look of your banner. You can choose to hide the text that appears in your banner area (this is good if your banner graphic already has the title of your blog in it). If you select Hide Text, be sure to also click Save Changes.
Or you can choose to simply change the color of the text in the banner. Again, remember to click Save Changes.
Not a fan of the default blue background graphic? You can upload your own by selecting the "browse" button and choosing an image from your computer's desktop. Note the yellow highlighted area -– if you design your banner with the exact dimensions of 740x192, then you don't need to worry about cropping it further, but you will have the opportunity to do so in the next screen. Once you've chosen your banner graphic, click upload.
If you've uploaded a banner that's bigger than 740x192 pixels, as I have in my example, you are now taken to a page where you’re able to crop the image to fit 740x192. Adjust the guides in your uploaded image wherever you'd like. Click Crop Header.
DESIGN TIP:
Is it better to design your banner in the exact dimensions requested: 740x192? Yes.
Why? Sometimes in order to crop and render your new image, the file is degraded, making it a little blurry, as you can see by the text in my final version below. So the built-in crop page is a handy Wordpress tool, but if utmost quality is what you're after and you don't want any of your image cropped out, then design your banner to size.
If nothing goes wrong, you should be taken to a confirmation page displaying your newly cropped banner and a yellow note encouraging you to take a peek at your accomplishment on your blog.
And that is all there is to it. Easy peasy!
In the future, I'll take you step-by-step through a similar method for Blogger, stand-alone Wordpress and more. Until then...
Happy Blogging!
Joelle Reeder is the brunette half of the blog and website design duo, The Moxie Girls™ of Moxie Design Studios™. She is the co-author of The IT Girl's Guide to Blogging with Moxie and has designed hundreds of blogs since 2003. She also blogs at tenth-muse.com and makes a tasty martini.
