Learning Movable Type: 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.



Adding a Banner Image, MT Versions 3.1 and Earlier

The following instructions are for adding a banner image to default templates of Movable Type versions 3.1 and earlier.

Stylesheet Adjustment

One solution for adding a banner image is to make a few slight changes to your stylesheet template. By making these changes to your CSS, you do not need to make changes on your other templates. On your stylesheet, find the section near the top that controls the banner settings. Here is the banner section of the MT 3.1 and earlier versions default Gettysburg style:

#banner {
    font-family: Verdana, Arial, sans-serif;
    color: #FFFFFF;
    background-color: #999999;
    text-align: left;
    padding: 15px;
    border-bottom: 1px solid #FFFFFF;
    height: 39px;
    }
a#banner-img {
    display: none;
    }
#banner a {
    color: #FFFFFF;
    text-decoration: none;
    }
#banner h1 {
    font-size: xx-large;    
    }
#banner h2 {
    font-size: small;
    }


First replace the "background-color" line with a background image line in the banner ID CSS. Note there is no space between url and ( and note that there is a space between ) and no-repeat;:

background: #999999 url("http://www.yourweblog.com/path/to/image.gif") no-repeat;

Next adjust the height in your CSS to the appropriate height for your image. If your image is bigger than the height in your CSS, it will get cut-off.

Do you want your image to replace the banner title and subtitle, or just be a background to the existing default text? If you would like it it replace the banner title and subtitle, change the #banner h1 and #banner h2 lines in your CSS to the following:

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

If not, leave these lines as they are. Note that if you do replace the title with your banner image, the banner will no longer be a clickable navigation element to return the visitor to the home page.

Save and rebuild your stylesheet. To view the new banner in your browser you may need to empty the browser cache first.

Index and Archive Template Adjustment

The other method for adding a banner image is to replace the banner h1 and h2 titles with your image file in the Main Index and Archive templates. This method works if you have a fixed-width style, but is not recommended for a fluid-width style. Replace the following sections in your templates:

<div id="banner">
<h1><a href="<$MTBlogURL$>" accesskey="1"><$MTBlogName encode_html="1"$></a></h1>
<h2><$MTBlogDescription$></h2>
</div>

with the following:

<div id="banner">
<a href="<$MTBlogURL$>" accesskey="1"><img src="http://www.yourweblog/path/to/image.gif"></a></div>

Alternatively, you can keep the h1 and h2 tags as long as you give them a style="display: none;" attribute either in the template code or in the stylesheet. This way the information is still visible to non-graphical browsers and search engines. In this case, your code might look like the following:

<div id="banner">
<h1 style="display: none;"><$MTBlogName encode_html="1"$></h1>
<h2 style="display: none;"><$MTBlogDescription$></h2>
<a href="<$MTBlogURL$>" accesskey="1"><img src="http://www.yourweblog/path/to/image.gif"></a>
</div>

You may need to adjust some elements in the the stylesheet such as banner padding and height. I found removing those attributes worked.

Links: MT Forums thread on how to add category specific images to your category pages Random Banners - Arvind of Movalog on how to use PHP to display a random banner

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


Posted by Elise Bauer on November 12, 2005 2:14 AM to Learning Movable Type http://www.learningmovabletype.com/