Today's installment of MuNuby Help will cover your Main Index Template and your Stylesheet.
As before, Jr Rocket Scientist feedback is welcome.
First, a short primer. For this primer, I will assume everyone has a basic understanding of HTML tags and structures.
The Main Index template controls your blog content: banner, blog description, post titles, post content, by-line information, sidebar links & images, site counters and credits, etc. Some of the elements are contained in the MT database and are pulled into the page via MT specific tags (begininng with the letters MT and $MT). Some elements are hand coded: URL links, boilerplate text, banner images, sidebar images, site counters, etc. The Main Index template controls the placement of each of these element inside the main page.
The Stylesheet controls the presentation of your content: column widths and placement; background colors and images; border & line sizes, styles and color; margins and paddings; font families, colors, sizes, weights, transformations, etc.
In your Stylehseet, there are two classifications of elements:
Elements that you can use only one time in an HTML page, div ID, which are indentified by a # sign followed by the class label - #body
and
Elements that you can use several times in an HTML page, div Class, which are indentified by a . sign followed by the class label - .blogbody
Both elements are followed by an open brace {, list of attributes each followed by a semicolon separator ; and closed by a close brace }. The attributes enclosed between the open and close braces are what controls the presentation of your content.
Please note that capitalization of div ID and div Class names IS important!
Next, I'll show you which classes of the Stylesheet control which element(s) in the Main Template.
The div ID name or div Class name from the Stylesheet will be labeled in bold text followed by the HTML tags (and I insetred italicized div close tags) from the Main Index Template.
<head>
Document Declarations...
Script Instructions...
</head>
#body
</body>
#banner
<div id="banner">
<h1><a href="<$MTBlogURL$>" accesskey="1"><$MTBlogName$></a></h1>
.description
<span class="description"><$MTBlogDescription$></span>
</div> <!-- Close banner -->
#content
<div id="content">
.blog
<div class="blog">
<MTEntries>
<$MTEntryTrackbackData$>
<MTDateHeader>
.date
<h2 class="date">
<$MTEntryDate format="%x"$>
</h2><!-- Close date -->
</MTDateHeader>
.blogbody
<div class="blogbody">
<a name="<$MTEntryID pad="1"$>"></a>
.title
<h3 class="title">
<$MTEntryTitle$>
</h3><!-- Close title -->
<$MTEntryBody$>
<MTEntryIfExtended>
<span class="extended"><a href="<$MTEntryPermalink$>#more">Continue reading "<$MTEntryTitle$>"</a></span><br />
</MTEntryIfExtended>
.posted
<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<amp;entry_id=<$MTEntryID$>" onclick="OpenTrackback(this.href); return false">TrackBack (<$MTEntryTrackbackCount$>)</a>
</MTEntryIfAllowPings>
</div> <!-- Close posted -->
</div> <!-- Close blogbody -->
</MTEntries>
</div> <!-- Close blog -->
</div> <!-- Close content -->
#links
<div id="links">
.calendar
<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>
.calendar
<td align="center"><span class="calendar">
<MTCalendarIfEntries><MTEntries lastn="1"><a href="<$MTEntryPermalink$>"><$MTCalendarDay$></a></MTEntries></MTCalendarIfEntries><MTCalendarIfNoEntries><$MTCalendarDay$></MTCalendarIfNoEntries><MTCalendarIfBlank><nbsp;</MTCalendarIfBlank></span></td><MTCalendarWeekFooter></tr></MTCalendarWeekFooter></MTCalendar>
</table>
.sidetitle
<div class="sidetitle">
Search
</div> <!-- Close sidetitle -->
.side
<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><!-- Close side -->
.sidetitle
<div class="sidetitle">
Archives
</div> <!-- Close sidetitle -->
.side
<div class="side">
<MTArchiveList archive_type="Monthly">
<a href="<$MTArchiveLink$>"><$MTArchiveTitle$></a><br />
</MTArchiveList>
</div><!-- Close side -->
.sidetitle
<div class="sidetitle">
Recent Entries
</div>
</div> <!-- Close sidetitle -->
.side
<div class="side">
<MTEntries lastn="10">
<a href="<$MTEntryPermalink$>"><$MTEntryTitle$></a><br />
</MTEntries>
</div><!-- Close side -->
.sidetitle
<div class="sidetitle">
Links
</div> <!-- Close sidetitle -->
.side
<div class="side">
<a href="">Add Your Links Here</a><br />
</div><!-- Close side -->
.syndicate
<div class="syndicate">
<a href="<$MTBlogURL$>index.rdf">Syndicate this site (XML)</a>
</div><!-- Close syndicate -->
<MTBlogIfCCLicense>
.syndicate
<div class="syndicate">
<a href="<$MTBlogCCLicenseURL$>"></a><br />
This weblog is licensed under a <a href="<$MTBlogCCLicenseURL$>">Creative Commons License</a>.
</div> <!-- Close syndicate -->
</MTBlogIfCCLicense>
.powered
<div class="powered">
Powered by<br /><a href="http://www.movabletype.org">Movable Type <$MTVersion$></a><br />
</div> <!-- Close powered -->
</div> <!-- Close links -->
<br clear="all" />
</body>
</html>
Posted by Madfish Willie at March 31, 2004 04:18 PMI am working on a screen capture with CSS div labels pointing to the HTML elements as presented on the screen. That should really help bring this presentation together and make sense.
Posted by Madfish Willie at March 31, 2004 07:37 PMJust a note regarding comments in your templates...
To make comments in a HTML documents and templates:
<!--[space]Comment Text[space]-->
To make comments in a CSS or Stylesheet:
/*[space]Comment Text[space]*/
You can use these formats to keep it clear what your coding is about. You can also "comment out" portions of your code so they will not be parsed or executed. This is a good technique to use while editing your templates - if you mess up, you can just un-comment the original code.
Posted by Madfish Willie at March 31, 2004 11:02 PMBacchus hath drowned more men than Neptune. Dr. Thomas Fuller (1654 - 1734), Gnomologia, 1732
Posted by together dating service at November 21, 2004 05:04 AMStrength to Love, 1963 Never attribute to malice what can be adequately explained by stupidity. Nick Diamos
Posted by consolidation debt free qoutes at November 22, 2004 09:17 AM