Learning Movable Type: Adding a Footer


footer-example.gif

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;
        padding:2px;
        margin:0px;
        background-color:#CBE3F6;
        color:#fff;     
        border-bottom: 1px solid #9EC4E2;
        border-top: 1px solid #9EC4E2; 
        text-align:center;
        }

#footer a { 
        color:#fff;
         }

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

2. Create the code that will comprise your footer.

<div id="footer">

Created by YourNameHere | 
<a href="http://validator.w3.org/check?uri=referer">XHTML</a> | Powered by <a href="http://www.movabletype.org">Movable Type</a>

</div>


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.


Posted by Elise Bauer on November 7, 2004 2:42 PM to Learning Movable Type http://www.learningmovabletype.com/