Dressing Up Your Weblog with a Banner Image
January 06, 2006
This post is the seventh and last in a series that introduced some great TypePad features and offers tips on finding help with TypePad in general.
Kristine on Dressing Up Your Weblog with a Banner Image.
Q: What can you tell us about yourself?
Hi, I'm Kristine. I've been with Six Apart since April 2004, and before that, I was a volunteer on the Movable Type support forums since not long after it was released! I've been blogging for almost 6 years now at kadyellebee using a combination of Movable Type and TypePad. I love blogging about geeky things, along with entertainment news. Posting about the happenings in my life is also great, especially now with moblogging to add pictures to those events.
Q: What tip will you be talking about today and why did you pick this?
I am a big fan of making your site show off its own unique personality. I love making sure that my weblog always has a special something at the top area to make it look like ME! So adding a banner image is a great way to accomplish this. Additionally, using the Custom CSS tool, you can add other special touches to customize your site.
Q: How can I customize the banner area of my page?
Adding a banner image to your weblog is an easy way to make your site reflect more of your personality! You can use any image editor to change a photo or drawing into a banner that will dress up your site. The option to add a banner image to your site is available to our Plus and Pro subscribers.
So you may find your site looking similar to this first image when you start out using a Custom Theme. It's great, you've customized the colors to be more "you", but what else could be tweaked?
By adding a banner, it could look more like this second image!
First you'll want to make an image. Most computers come with a graphics/image editor, or you could search the web for this type of software. Start out with by opening a new image that's close to the size of your weblog. There's more info in Choosing a Size for a Banner Image. Then you can resize the image and paste it in, or draw a pretty image as a base. Use your favorite font to put the name of your weblog -- this is a great chance to see what all of the fonts on your system look like, or go searching the web for new ones! When you are happy with your creation, save your image as a .gif, .jpg, or .png file format.
To add the banner image to your TypePad blog, go into the Weblog > Design > Change Theme section. Make sure you have picked Custom Theme at the top of the page. Look for the Page Banner section below and click on the "Edit this Element" button. There is a place towards the bottom of this popup where you can browse your computer for the Banner image you created. Save to close the popup, and then Save Changes again on the main screen. View your weblog -- you may need to refresh or hard refresh (Ctrl+F5 or Shift+F5 in most browsers) to see the change. Voila! A pretty header!
For our Pro level customers, the Custom CSS tool can be used to make the banner fit even more nicely. Notice how the banner has a red border around it in the last image? That's because the background color of the banner is red. To actually make the image fit the full size of the screen, you'll want to make it 30pixels wider, and know the height of the image. Now go to the Weblog > Design screen and click the Custom CSS link.
How tall is your image? The example was 130 pixels tall, so this was the code to paste into Custom CSS to take out the padding and make it fit exactly in the space available:
#banner {height: 130px; background-position:0px 0px; } Save your changes on this screen, and view your weblog to see the changes. In the example, the image appears to be fading in from the background, and it's a nice effect without the border.
You can do other things with Custom CSS like change out the background image on a Pre-defined Theme, or add bullet images that match the icons that you've added to your sidebar. For more inspiration on CSS techniques, you might look at w3schools.com's CSS section and Web Design Group's CSS reference.
It's always exciting to find new ways to make your site look more unique, and hopefully these ideas gave you more ways to do just that. Enjoy!
This also concludes our series of tips from the Technical Support team. We hope you've enjoyed our spotlights and that they gave you ideas for your site. Our new Knowledge Base is ready and waiting for you to search for and find the answers to all of your TypePad questions!