Customizing Your Banner in Typepad Pro

Before I start, let me just say that I am by no means an expert. I'm learning about CSS through trial and error—mainly error! I've figured out a few tricks for working with custom CSS in Typepad, but if you're more skilled than I am, by all means please chime in with advice/corrections/etc.

If you have a Typepad basic account, you can insert a banner image in the design feature, but your options will be limited.

If you have a pro account and want to customize your banner, the first thing you need to do is size the image correctly. You'll want to figure out how wide your blog is (this example assumes you want the banner to be as wide as the entire blog). One way to check that is through the "View Page Source" option in your browser menu. I use a Mac, and both Firefox and Safari browsers have a "View" option in the top menu bar. Go to your blog (the actual blog, not the Typepad panels), click anywhere on it (not on a link, of course), and then go to View in the menu bar and choose "Veie Page Source."

This pops up a window that shows the code for your whole blog page. If you scan through this, you should be able to see a line that tells the maximum width of your blog, probably something around 700px.

In whatever photo software you use, size the photo to the appropriate width. Now you're ready to upload it to Typepad.

In Typepad, click "Control Panel."
Click "Files."
On the right is the Upload Photo option.

After you've uploaded the photo, you'll need to know its URL. On your Files page, look in the list (at left) of file names. Click on the name of the photo you just uploaded. It'll open in a new window; highlight and copy the URL. It will be something like: http://mytypepadblog.typepad.com/myphoto.jpg

Now you can stick that photo at the top of your blog!
Click "Weblogs."
Click the name of the blog you want to customize.
Click the Design tab.
Scroll down and click on "Edit Custom CSS."

Now you need to paste some code into the CSS window. It will be a variation of:

#banner
{
height: 325px;
background-image: url("YOUR PHOTO'S URL");
background-position: 15px 15px;
background-repeat: repeat;
text-align: right;

}

Use the Preview button to check how it looks. You might need to adjust the height setting or the background position. Change the text-align setting to left or center if you like.

There are lots of other ways to tweak the CSS for your banner, depending on which Typepad template you're using, but this is a good place to start.