Adding a Banner Image

With TypePad's template builder you can easily display custom content on your weblog. Additionally, Plus and Pro members have the ability to create custom template styles to change the columns, individual fonts and colors, and add a banner image.

Custom styles are configured on the Design > Style page for the template set. Using the Page Banner Element there, you can upload the image to use for your banner. Check the box to "Use this banner image instead of a text title" and use the image uploader to upload your banner image. Your banner should a .jpg, .gif, or .png file.

Before this, when creating your banner, you'll need to decide the size that you should use for the image.

First, take in account what type of layout you are using. A "fluid" layout (such as the "Dew" or "System" default template) stretches across the entire screen so the width of the banner doesn't matter, really. It might be a good idea to keep it under 800 pixels wide, because that is a popular screen setting for browsing and that way it will fit on the screen for most people.

A "fixed" layout (such as the default layout "Earth" when you create a new weblog, or the "Stripes" layout) is set to a certain width and the banner would be created accordingly to fit in the allotted space.

To find the width of your layout, open the General Page Settings element on the Design > Style page for the set.

Look at the width setting for your Main Content Center Column and your Right/Left Columns (your layout may have two columns or three). Add up these widths for all of your columns to get the total width for the container of your layout.

The "Earth" default template uses a 400 pixel main content column, and the right column is set at 200 pixels. This makes a container that has a fixed width of 600 pixels. See the banner border example for a visual display of this.

A banner image automatically has a 15 pixel border in a basic template, this is the green area that you see around the banner. The color of the border is set on the Design > Style page for the template, in the Page Banner element with the "Background" color.

To create a banner that fits perfect, you would subtract the 15 pixels for each side border (30 pixels total) from the width of the layout, creating a banner that is 570 pixels wide. The height will adjust automatically.

So, for example, if you are using a layout that is 700 pixels wide total instead, you would create a banner at 670 pixels wide to fit.

A banner is great way to add some extra personality to your site!