August 18, 2011

Adding a Banner to a Pre-Defined Theme

Note: The Custom CSS option is available to the Unlimited, Premium, and Business Class plans.

While there is not an option to add a custom image banner to all pre-defined theme from within the template builder, it is possible to do so with Custom CSS. By adding a few snippets of CSS, you can override the existing banner with a banner of your choice.

The banner width for most themes is 940 pixels but this may vary for different themes. After creating and saving your banner image on your computer, upload it to the File Manager, accessible via the Library menu. Once the image is uploaded, place your mouse over the image's name to obtain the image's URL. Then, right-click and copy the link location or shortcut.

We highly recommend uploading any images used in your blog's design to your Typepad account at Library > File Manager. By uploading the images to your Typepad account, you are ensuring the images will display when your site loads. Images which are hosted by an outside site (Flickr, Photobucket, etc.) rely on the third-party site to load. If the third-party site is down, the images on your blog will not display.

The next step is to add the CSS that will display the banner to the Custom CSS page, found at Design > Custom CSS. Add code similar to this in this field:

Now that the code is in place, remove the example URL for the banner image and replace it with the URL for your own. You may need to edit the banner's height value. In our example, the banner image is 125 pixels high but you should replace this with your own value.

After saving on the Custom CSS page, your banner will now be visible on all of the pages of your blog.

Please note that this may not work as expected on all themes due to the coding of the themes. In many cases, we strongly suggest using the Theme Builder or the Mosaic Theme if you would like to use a custom banner for your blog.


Need design help?

Looking to launch a new blog? Have an itch to tweak your design or layout? Want a superior banner or design custom made specifically for your blog? We've got you covered!

Discover Typepad Services