November 07, 2004

Adding a Footer


Many weblogs have a footer bar running across the bottom of the page with information that pertains to all of the pages of the weblog, such as copyright, XHTML validation, software used to create the weblog, etc.

Adding a footer to your Movable Type weblog is pretty straightforward.

1. Create a Footer Id in your stylesheet.

Include elements for how you want the links in your footer to appear. For example:

#footer {
font-family: Trebuchet MS;
font-size: x-small;
border-bottom: 1px solid #9EC4E2;
border-top: 1px solid #9EC4E2;

#footer a {

#footer a:hover {
text-decoration: none;

2. Create the code that will comprise your footer.

<div id="footer">

Created by YourNameHere |
<a href="">XHTML</a> | Powered by <a href="">Movable Type</a>


3. Add a Footer div section to your index and archive templates.

At this point, you can either add the footer code directly to each template, right after the <br clear="all" /> or <div style="clear: both;">&#160;</div> and
right before the closing container div tag
, or you can create a template module and use a PHP or MT Include to include the footer into each of your templates. I suggest going the include route. That way if you make any changes to your footer, you only have to make them once. See Using PHP and MT Includes for directions.

Save your templates and rebuild your site.

Has this tutorial been helpful? Please consider linking to Learning Movable Type at . Thanks!


If you would like to send a trackback
please use the following URL:


I use a list of little images (Button builder at ) which looks great but even though I used a list I found that the links next to each other did not pass accessability testing so I introduced text as well and hid it in a span (a basic image replacement scheme. If you have a broiwser where you can turn off the css you will get a nice list of links.

My footer code example:
<div id="footer"><!-- div start id="footer" -->
<li><a href="">
<img src="/assets/button_feedburner.png" alt="RSS 2.0 feed" title="Feedburner" width="80" height="15" />
<span class="hidden">Feedburner RSS feed</span></a><span class="hidden">|</span></li>
</div><!-- div end id="footer" -->

and the css:
#footer ul{
#footer li{
padding:0 1px 0 0;
#footer img{
border-top:1px solid #cecea5;
border-right:1px solid #ffffff;
border-bottom:1px solid #ffffff;
border-left:1px solid #cecea5;

I am sure thats not perfect but its a good start!

This saved me hours of profanity laced hair pulling CSS learnin'.


And, by the way, if you are using 3.2, just drop that code for the templates just above the last /div at the bottom of all the pages.

This was very helpful! And after you rebuild it may take a refresh or two before you will see the footer :)

Post a comment

(Before posting a comment please see the Comments and Trackbacks Policy. Do you need help troubleshooting your weblog? Please post questions and requests for support at the MT Support Forums. Thanks!)

Remember Me?

(you may use HTML tags for style)

Email to a friend

Email this article to:

Your email address:

Message (optional):