« Background Patterns | Main | Share the Love - through Amazon.com »

Banner Images

mtbadge-small.gif Updated November 25th, 2005. Better code.

A great way to easily customize the look of your Movable Type weblog is to insert a banner image. To do so, you will need to make adjustments to your style sheet, and potentially to your index and archive templates as well.

Before making template adjustments, you first need to prepare your banner image. You might choose to use an image that will take up the entire banner space, or you might want more of a logo-like image that would only take up a part of the banner space, with a solid color making up the difference. Computers show images at a resolution of 72 dpi (dots per inch), so if you are working with a photograph for your banner image, it will be easier if you work with it at that resolution.

If you want an image that extends like a photograph to the edges of your weblog, create an image with the width of your blog. The MT 3.2 default blog width (#container) is 720 pixels wide, including a 5 pixel inner border (#container-inner). This leaves exactly 710 pixels on the Main Index template for a banner image. On the archive templates that do not have a sidebar, there is space for a 510 pixel wide banner. If you have added a 200 px wide sidebar to the archive templates, then a banner image 710 pixels long will be displayed in full. If you have not added a sidebar to your archive templates, then a 710 pixel wide banner image will get cut off by 200 pixels on the right side.

There is by default a 2 pixel wide inner banner border that will cut into your banner image by 2 pixels on the left, top, and right. If you want, you can remove this border by finding the #banner-inner id on your stylesheet and changing border-width: 2px 2px 0 2px; to border-width: 0px 0px 0 0px;.

If you would like to add a logo image, you can do that and have a background color that extends the width of the banner, not matter how wide the banner is.

You can also choose to have the banner image act as a background image to the MT-generated blog title text, or to have the image replace the text all together.

Save your image as a .gif, .jpg, or .png file and upload to your server.

Adding a Banner Background Image

If you would like to add a banner image as a background image for the blog name and description text that are automatically generated by MT, find the following section; it's about a half of the way down if you are using the MT 3.2 default Vicksburg theme.

#banner
{
   width: 710px; /* necessary for ie win */
   background: #a3b8cc;
}

and change it like so:

#banner
{
width: 710px; 
background-image: url("http://www.yourweblog.com/path/to/your/banner/image.gif");
background-repeat: no-repeat;
height: 100px;
}

Replace "http://www.yourweblog.com/path/to/your/banner/image.gif" with the URL that will point to the banner image you uploaded to your server.

Replace the height "100" with the height of your banner image. Note that if you are using the default Vicksburg style, and your banner image has a height larger than 88 pixels, the inner banner border may not extend all the way down on the sides of the image. To fix this, one thing you can do is to increase the margin-bottom in the #banner-description from 0 to 12px, or by a number equal to the height of your banner image minus 88.

Creating a Banner with a Background Logo Image and Background Color

Find the following section:

#banner
{
   width: 710px; /* necessary for ie win */
   background: #a3b8cc;
}

and change it like so:

#banner
{
    width: 710px; 
    background-color: #a3b8cc;
    background-image: url("http://www.yourweblog.com/path/to/your/banner/image.gif");   
background-repeat: no-repeat;
    height: 100px;
}

Replace the background-color "#a3b8cc" with the background color you want as a background to your logo.

Replace "http://www.yourweblog.com/path/to/your/banner/image.gif" with the URL that will point to the logo image you uploaded to your server.

Replace the height "100" with the height of the banner you desire. You may need to add the same height element to the #banner-inner.

Note that the logo image will be aligned in the upper left corner of the banner.

Replacing the Blog Title with Your Banner Image

If your banner image includes a stylized title for your blog, you're not going to want MT to generate its blog title over your image. To fix this, in addition to the steps outlined above, make the following changes. Find the following section in the theme section of your stylesheet:

#banner-header
{
   margin: 0;
   color: #fff;
   font-size: 30px;
   font-weight: bold;
   line-height: 1;
   text-shadow: #36414d 0 2px 3px;
}

#banner-description
{
   margin-top: 5px;
   margin-bottom: 0;
   color: #fff;
   background: none;
   font-size: 12px;
   font-weight: bold;
   line-height: 1.125;
   text-shadow: #36414d 0 1px 2px;
}

and change them like so:

#banner-header
{
   display: none;
}

#banner-description
{
   display: none;
}

This change will make the MT-generated Blog Title and Description go away and show only your image banner. What you lose with this method is the linking of the title in the banner to your Main Index page.

Image Banner Linked to Main Blog Page

If you would like to have your banner image linked to your main blog page, you can do that with a few simple changes to your stylesheet, index and archive templates. Note that if you have not added a sidebar to your archive pages, you will need a separate banner image file for those templates.

Find the following section on your Main Index template:

<div id="banner">
    <div id="banner-inner" class="pkg">
       <h1 id="banner-header"><a href="<$MTBlogURL$>" accesskey="1"><$MTBlogName encode_html="1"$></a></h1>
       <h2 id="banner-description"><$MTBlogDescription$></h2>
    </div>
 </div>

Change to:

<div id="banner">
    <div id="banner-inner" class="pkg">
<h1 style="display: none;"><$MTBlogName encode_html="1"$></h1>
<h2 style="display: none;"><$MTBlogDescription$></h2>
<a href="<$MTBlogURL$>" accesskey="1"><img src="http://www.yourblog.com/path/to/your/banner/image.jpg"></a>
    </div>
 </div>

Make similar changes to your archive templates.

On your stylesheet, find the #banner id (about halfway down the default Vicksburg stylesheet) and change the padding from:

padding: 15px 13px;

to

padding: 0px 0px;

Note that for your banner to work perfectly with the default Vicksburg blog width, the main index banner image should be 706 pixels wide and the archive banner image 506 pixels wide.

Save and rebuild your templates.

Links:

Please direct ALL questions regarding your particular stylesheet and weblog troubleshooting to the MT Support Forums.

Comments (11)

I'm trying to figure out how to float a logo/name image in front of a background image. I'm sure its doable in css but I'm a little confused.

Can you shed any light on it?

#banner a { color: #fff; text-decoration: none; }
#banner a:hover { color: #fff; }

Change it to

#banner a { display: none; }
#banner a:hover { display: none; }

Didn't work as the banner wouldn't display, but it would when we did this:

#banner a { }
#banner a:hover { }

instead.


My programming partner writes:

The problem only occurred because the image is inside the tag ID'd "banner", and it's wrapped in a link to the index of the blog.

The following would hide the text headers but not the image:

#banner h1, #banner h2 { display: none; }

No idea why the instructions were for hiding the links, the headers in question aren't links

Hi David,

These instructions are for the default styles and templates. Are you working with the default?

I forget why one needed to set the banner links to not display, but when I tested it in Mac Safari, Mac Firefox and Mac IE, keeping the links displayed while not displaying the header tags didn't work. By setting the banner links to not display in the default templates, the text headers don't display either, because they are wrapped in links.

Yes edditing the default and following your instructions exactly the banner didn't show in Netcaptor (IE based).

Therefore the changes, that did work fine.

Hi Davis,
I worked on this some more with Arvind who has a PC and could help me troubleshoot it on that platform. You may want to look at the code recommended now. It has changed.

Nathan Dornbrook:

Elise, Arvind,

Thanks again for an excellent article. I had to massage both of your code examples a bit - not because of what you had written, but because I'm not using the default templates.

I'm grateful for the instructions; I'll be working on improving the appearance of all my author's blogs!

Cheers!

kgs Author Profile Page:

Elise, what if you just want to incorporate a small graphic in your banner without replacing it wholesale with an image? I want to add a small head shot, but I want the banner text to remain text. I'm using the Classy style through Stylecatcher on my test blog (http://freerangelibrarian.com/testblog )

I have successfully replaced the default banner with my own image on my main site, http://www.punditron.com/

Now, I am trying to do the same with my second blog, http://www.punditron.com/filmblab Everything looks fine on the home page, but on the Archive and Recent Posts pages (which Technorati folks always see!), the banner is missing.

I have coded my stylesheet just like I did the first time. Plus, I placed the banner image in every directory I could think of, just in case.

Thank you for your help!

Thank you for a great tutorial here! I, too, have the same problem that John is having in that the banner shows up on the main page of my blog, but does not show on the archives pages.

how do i put my own Personal Header with the Blue Crush template... thansk new at this

Post a comment

(If you haven't left a comment here before, your comment may need to be approved before will appear on the entry. Thanks for waiting.)