The Changing of the Banner: How to Customize the Banner on Your Wordpress.com Blog

The Changing of the Banner: How to Customize the Banner on Your Wordpress.com Blog

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.

Oooo! Ahhh...

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.

Related Posts

(Video Tutorial) How to Create a Simple Banner for Your Blog Using Photoshop

Now that we know how to change our banners in both Wordpress.com and Blogger.com, it would be nice to have something to change it with! This week, I'm going to show you how to create a custom banner for your blog. This technique applies regardless of the blog platform, so feel free to create banners for Movable Type, Wordpress, Typepad... whatever blows your dress up.   Read more >

The Changing of the Banner: How to Change a Banner on your Blogger.com Blog

Continuing last week’s discussion, How do I change the banner on my blog template?, in this post we’ll talk about how to swap out the banner on your Blogger blog with minimal effort. If you’ve recently signed up for Blogger.com, the free Google-owned blog service, you may be using one of their default templates. Those are nice, but it’s likely you’ll want to jazz it up a little with your own style. In a few simple steps, you’ll have your new banner in place.   Read more >

Playing Dress-up: The Non-Designer's Guide to a Blog Design Theme

Are you thinking about a new look for your blog? Or maybe you've not started a blog yet and want to make a fabulous debut when you do. Both are good reasons to know the foundation of a blog design. Whether you decide you want to DIY or hire a pro, it's savvy to know the lingo and have a solid understanding of a blog's "parts" so you can easily follow how-to instructions and/or communicate better with your designer.   Read more >

Comments

In order to comment on BlogHer.com, you'll need to be logged in. You'll be given the option to log in or create an account when you publish your comment. If you do not log in or create an account, your comment will not be displayed.