Movable Type Community Forum

Full Version: Footer?

Movable Type Community Forum > Additional Resources > Tips and Tricks

JessicaM123

Mar 1 2004, 07:54 PM

How does one adjust the footer of a blog? For instance I want to add both 1) the powered by Moveable Type plus 2) a personal copyright on the bottom of each page.

Where is this info edited?

Thanks in advance for your help.

-Jessica

kadyellebee

Mar 1 2004, 08:27 PM

The Powered by section is in each template. You could create a new Module (see the bottom of the Templates page in the MT interface) that is called footer and put your info in the module body:

CODE

<div class="powered">
Powered by<br /><a href="http://www.movabletype.org">Movable Type <$MTVersion$></a><br />
Design by<br /><a href="http://designers-site.com/">Designer</a><br />
</div>

Where you want the module to appear, you'd use

CODE

<$MTInclude module="footer"$>

Then you can update the module and rebuild your site, and it will change it on all pages.

Hope that helps,
Kristine

JessicaM123

Mar 1 2004, 08:53 PM

sorry to ask a (possibly silly) question, but how does a person create a new module?

~

kadyellebee

Mar 1 2004, 09:06 PM

In the Movable Type Interface, on the Templates section, there is a section at the very bottom for creating modules.

JessicaM123

Mar 1 2004, 10:45 PM

I am close...o so close...

I successfully created a new 'footer' module. I put it where I thought it would appear on the bottom of the page, yet if you look at my page you can see I got it all wrong:

http://www.jessicamartin.org:16080/blog/

here's where I placed the code:

CODE

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=<$MTPublishCharset$>" />

<title><$MTBlogName$></title>

<link rel="stylesheet" href="<$MTBlogURL$>styles-site.css" type="text/css" />
<link rel="alternate" type="application/rss+xml" title="RSS" href="<$MTBlogURL$>index.rdf" />
<link rel="alternate" type="application/atom+xml" title="Atom" href="<$MTBlogURL$>atom.xml" />
<link rel="EditURI" type="application/rsd+xml" title="RSD" href="<$MTBlogURL$>rsd.xml" />

<script language="javascript" type="text/javascript">
function OpenComments (c) {
window.open(c,
'comments',
'width=480,height=480,scrollbars=yes,status=yes');
}

function OpenTrackback (c) {
window.open(c,
'trackback',
'width=480,height=480,scrollbars=yes,status=yes');
}
</script>

<MTBlogIfCCLicense>
<$MTCCLicenseRDF$>
</MTBlogIfCCLicense>

</head>

<body>

<table width="100%" height="31" border="0" cellpadding="0" cellspacing="0" bgcolor="#FFFFff">
<tr>
<td valign="middle" height="5" bgcolor="#999966" colspan="5">
    <table width="100%" cellpadding="2" border="0">
<tr>
<td>
    <p class="link1">
<a href="http://www.jessicamartin.org/radio.html">radio</a> <font color="#663300">|</font>
<a href="http://www.jessicamartin.org/essays.html">essays</a> <font color="#663300">|</font>
<a href="http://www.jessicamartin.org/reviews.html">reviews</a> <font color="#663300">|</font>
<a href="http://www.jessicamartin.org:16080/blog">journal</a> <font color="#663300">|</font>
<a href="http://www.jessicamartin.org/about.html">about</a> <font color="#663300">|</font>
<a href="http://www.jessicamartin.org/booklist.html">booklist</a> <font color="#663300">|</font>
<a href="http://www.jessicamartin.org/links.html">community</a> <font color="#663300">|</font>
<a href="mailto:jessica@jessicamartin.org">contact</a> <font color="#663300">|</font>
<a href="http://www.jessicamartin.org">home</a>
</p>
</td></tr>
</table>
</td></tr>
</table>

<div id="banner">
<h1><a href="<$MTBlogURL$>" accesskey="1">
<img src="<$MTBlogURL$>images/journal.gif" width="125" height="49" border="0" alt="<$MTBlogName$>">
</a></h1>
<span class="description"><$MTBlogDescription$></span>
</div>

<div id="content">

<div class="blog">

<MTEntries>
<$MTEntryTrackbackData$>

    <MTDateHeader>
    <h2 class="date">
    <$MTEntryDate format="%x"$>
    </h2>
    </MTDateHeader>

    <div class="blogbody">

    <a name="<$MTEntryID pad="1"$>"></a>
    <h3 class="title"><$MTEntryTitle$></h3>

    <$MTEntryBody$>

    <MTEntryIfExtended>
    <span class="extended"><a href="<$MTEntryPermalink$>#more">Continue reading "<$MTEntryTitle$>"</a></span><br />
    </MTEntryIfExtended>

    <div class="posted">Posted by <$MTEntryAuthor$> at <a href="<$MTEntryPermalink$>"><$MTEntryDate format="%X"$></a>
    <MTEntryIfAllowComments>
    | <a href="<$MTCGIPath$><$MTCommentScript$>?entry_id=<$MTEntryID$>" onclick="OpenComments(this.href); return false">Comments (<$MTEntryCommentCount$>)</a>
    </MTEntryIfAllowComments>
    <MTEntryIfAllowPings>
    | <a href="<$MTCGIPath$><$MTTrackbackScript$>?__mode=view&entry_id=<$MTEntryID$>" onclick="OpenTrackback(this.href); return false">TrackBack (<$MTEntryTrackbackCount$>)</a>
    </MTEntryIfAllowPings>
    </div>

    </div>


</MTEntries>

</div>

</div>

<div id="links">

<div align="center" class="calendar">

<table border="0" cellspacing="4" cellpadding="0" summary="Monthly calendar with links to each day's posts">
<caption class="calendarhead"><$MTDate format="%B %Y"$></caption>
<tr>
<th abbr="Sunday" align="center"><span class="calendar">Sun</span></th>
<th abbr="Monday" align="center"><span class="calendar">Mon</span></th>
<th abbr="Tuesday" align="center"><span class="calendar">Tue</span></th>
<th abbr="Wednesday" align="center"><span class="calendar">Wed</span></th>
<th abbr="Thursday" align="center"><span class="calendar">Thu</span></th>
<th abbr="Friday" align="center"><span class="calendar">Fri</span></th>
<th abbr="Saturday" align="center"><span class="calendar">Sat</span></th>
</tr>

<MTCalendar>
<MTCalendarWeekHeader><tr></MTCalendarWeekHeader>

<td align="center"><span class="calendar">
<MTCalendarIfEntries><MTEntries lastn="1"><a href="<$MTEntryPermalink$>"><$MTCalendarDay$></a></MTEntries></MTCalendarIfEntries>
<MTCalendarIfNoEntries><$MTCalendarDay$></MTCalendarIfNoEntries>
<MTCalendarIfBlank> </MTCalendarIfBlank></span></td><MTCalendarWeekFooter></tr></MTCalendarWeekFooter>
</MTCalendar>
</table>

</div>

<div class="sidetitle">
Search
</div>

<div class="side">
<form method="get" action="<$MTCGIPath$><$MTSearchScript$>">
<input type="hidden" name="IncludeBlogs" value="<$MTBlogID$>" />
<label for="search" accesskey="4">Search this site:</label><br />
<input id="search" name="search" size="20" /><br />
<input type="submit" value="Search" />
</form>
</div>

<div class="sidetitle">
Archives
</div>

<div class="side">
<MTArchiveList archive_type="Monthly">
<a href="<$MTArchiveLink$>"><$MTArchiveTitle$></a><br />
</MTArchiveList>
</div>

<div class="sidetitle">
Recent Entries
</div>

<div class="side">
<MTEntries lastn="10">
<a href="<$MTEntryPermalink$>"><$MTEntryTitle$></a><br />
</MTEntries>
</div>

<div class="sidetitle">
Links
</div>

<div class="side">
<a href="">Add Your Links Here</a><br />
</div>

<div class="syndicate">
<a href="<$MTBlogURL$>index.rdf">Syndicate this site (XML)</a>
</div>

<MTBlogIfCCLicense>
<div class="syndicate">
<a href="<$MTBlogCCLicenseURL$>"><img alt="Creative Commons License" border="0" src="<$MTBlogCCLicenseImage$>" /></a><br />
This weblog is licensed under a <a href="<$MTBlogCCLicenseURL$>">Creative Commons License</a>.
</div>
</MTBlogIfCCLicense>

<div class="powered">
Powered by<br /><a href="http://www.movabletype.org">Movable Type <$MTVersion$></a><br />
</div>

</div>

<$MTInclude module="footer"$>

<br clear="all" />

</body>
</html>

[COLOR=red][B][COLOR=red]

ingmar

Mar 1 2004, 11:18 PM

You're almost there. You placed your include outside of all other div's, though, so now your browser doesn't have any information on where to put it on your page.

Put your include inside the "powered by" div for a change, or inside the sidebar div, or make it a div of it's own.

HTH,
Ingmar

JessicaM123

Mar 1 2004, 11:26 PM

Ok, that helps. So I put it inside its own 'div' as i want it to be a footer at the very bottom of the page:

CODE

<div class="powered">
Powered by<br /><a href="http://www.movabletype.org">Movable Type <$MTVersion$></a><br />
</div>

</div>

<div><$MTInclude module="footer"$></div>

<br clear="all" />

</body>
</html>

yet i am missing something here. how do i tell the 'div' where to appear on the page (meaning at the very bottom, below the entries)?

~

ingmar

Mar 2 2004, 12:00 AM

QUOTE (JessicaM123 @ Mar 2 2004, 08:26 AM)

how do i tell the 'div' where to appear on the page (meaning at the very bottom, below the entries)?

Why, via the stylsheet of course. You have, eg < div class ="copyright" > and a corresponding entry in your CSS.

If you'd put it inside some of the other divs (the "powered by" being the most suitable one, IMO) your div inherits their properties, especially positioning.

If you don't, try absolute positioning, like:

CODE

JessicaM123

Mar 8 2004, 05:16 PM

i am still trying to sort out this issue. i feel retarded that i cant figure this footer deal out already...

i made a footer module that looks like this:

CODE

<div class="powered">
Powered by<br /><a href="http://www.movabletype.org">Movable Type <$MTVersion$></a><br />
All written content on this site © Jessica Martin 2004. No reproduction without permission.
<br />
</div>

my style for the footer looks like this:

CODE

#footer {
position:absolute; bottom: 35px; left: 350px;
background:#cccc99;
text-align:center;
}

the on my main template page the code referencing the footer looks like this:

CODE

<div class="sidetitle">
Recent Entries
</div>

<div class="side">
<MTEntries lastn="10">
<a href="<$MTEntryPermalink$>"><$MTEntryTitle$></a><br />
</MTEntries>
</div>

</div>

<div class="footer"><$MTInclude module="footer"$></div>

<br clear="all" />

</body>
</html>

presently, it's all sorts of screwy on my blog, appearing quite randomly:

http://www.jessicamartin.org:16080/blog/

thanks for any help you can offer!!!

JessicaM123

Mar 8 2004, 05:34 PM

I just fixed the code to:

CODE

and that placed it on TOP of my other to columns, yet it is certainly not a footer.

LisaJill

Mar 8 2004, 06:11 PM

that'd be because footers are some of the biggest pita's in css.

if noone here can figure this out, try out the CSS Forums. They won't care about the module part, just the css and html.

charle97

Mar 8 2004, 06:17 PM

the ol' layout-o-matic should give you a clue on how to code your footer.

adamrice

Mar 8 2004, 06:27 PM

The problem here is that you are using absolutely positioned elements. These are outside the normal "flow" of the document. As far as the browser is concerned, your main content has no height, so the footer is correctly positioned at the bottom...of the window.

Try this: In the stylesheet, make #content "position: relative;" and remove the "position: absolute" line. Remove the positioning from the footer entirely (you may want to assign a width and a margin to it, though). Finally, back in the main-index, move the footer module so that it is the last thing before the closing BODY tag--that is, it is not contained inside any previous divs.

What this does is it forcibly creates a "flow" that pushes the footer down where it belongs. I've created a messy test document that works--if you have trouble, e-mail me directly and I'll send it to you.

JessicaM123

Mar 9 2004, 01:01 AM

adamrice, thank you so much for the tips...it totally worked!!!

http://www.jessicamartin.org:16080/blog/

yeah!!! i am stoked. thankyou! thankyou! thankyou!

also, thanks to charlie97 and LisaJill, i bookmarked those links for future CSS reference.

~

This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.