June 16, 2011

Use Custom CSS to center banner and other banner tips

Note: Custom CSS is a feature available to Unlimited, Premium, and Business Class accounts.

Centering a Banner

By default, the banner is positioned at 15 pixels from both the top and right banner area. If you would like edit the position of the banner image to the center of banner area, at Design > Custom CSS, you can enter the following CSS:

#banner { background-position: center; }

Removing Banner Padding

Typepad automatically applies a 15 pixel banner to border to each side of the banner. If you want to use full banner area, you can remove the padding. Go to Design > Custom CSS and paste in the following code:

#banner { height: XXXpx; background-position:0px 0px; } 
#banner-header a { height: XXXpx; }

Please note that you need to replace XXX with your banner's actual height.

Displaying Title and Description Text over a banner image

If you would like to use a banner as a background image but would like to retain your blog Name and Description text, you can use the following code. Note that you will need to upload the banner image file via Library > File Manager and edit the URL and height to match your specific banner.

Replace XXX with the correct banner height and "http://example.typepad.com/folder/banner.jpg" with the URL for your banner image.

Adding banner image to an Advanced Template design

If you're using an Advanced Template, you'll need edit the Theme Stylesheet Template using CSS to display an image banner on your blog.

First, go to Library > File Manager and upload the image you want to use for your banner there. Click through the file and copy the URL from your browser's address bar.

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.

After uploading the banner image to your File Manager, you can add the CSS code for your image banner to your Stylesheet template. At Design > Templates > Theme Stylesheet, look for the heading:

/* banner styling */

The code within this section will need to be replaced with the code:

Replace the background image URL "http://example.typepad.com/folder/banner.gif" with your own and set the XXXpx height to the exact height of your image banner.

Please note you can also integrate the other CSS tips above into the Theme Stylesheet by adding the attributes to the classes above. To center the banner, for example, you can add background-position: center; to the #banner class in the Theme Stylesheet

Not quite what you are looking for? Check out these other articles:


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