the design blog: Pregnancy Archives

This, my first design, is for a pregnancy journal. The code itself isn't too messy; it's actually a simplified version of the Movable Type templates. But it's a bit complicated as I was quite ambitious in giving options depending on whether or not you have a guestbook etc. Therefore it's probably a bit easier if you do have some knowledge of HTML or some experience with Movable Type. But I have provided step-by-step instructions and don't worry, none of these options are enabled so you don't have to go in and change them. You can leave as is.

Index template

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

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

</head>

<div class="blogbody">
	
	<a name="<$MTEntryID pad="1"$>"></a>
	<h3 class="title"><$MTEntryDate format="%x"$> : <$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>
<div id="links">
<center>
<a href="<$MTBlogURL$>"><img src="archives/pregcurrent.gif" border="0"></a><br />
<a href="<$MTBlogURL$>/archives.html"><img src="archives/pregarchives.gif" border="0"></a><br />







<a href="http://design.lookingatstars.com/"><img src="archives/pregdesign.gif" border="0"></a><br />

<img src="archives/pregnantbelly.jpg">
<div class="side">
<form method="get" action="<$MTCGIPath$><$MTSearchScript$>">
<input type="hidden" name="IncludeBlogs" value="<$MTBlogID$>" />
<label for="search" accesskey="4">Search</label><br />
<input id="search" name="search" size="20" /><br />
<input type="submit" value="Search" /></form><br />
<a href="<$MTBlogURL$>index.rdf">Syndicate this site (XML)</a><br />
<br /><br />
Powered by<br /><a href="http://www.movabletype.org">Movable Type <$MTVersion$></a><br />    
</div>

</div>

</body>
</html>

Styles-site.css file

body {
		margin:0px 0px 0px 0px;
		background:#FFF;		
		}
	A 	{ color: #003366; text-decoration: none; }
	A:link	{ color: #003366; text-decoration: none; }
	A:visited	{ color: #003366; text-decoration: none; }
	A:active	{ color: #FFCC00;  }
	A:hover	{ color: #FFCC00;  }

h1, h2, h3 {
		margin: 0px;
		padding: 0px;
	}

.description {
		font-family:courier new, times new roman, serif;
		color:#333;
		font-size:xx-small;
  		text-transform:none;	
		}
	
	#banner {
		font-family: courier new, times new roman, serif;
		color:#333
		font-size:large
		font-weight:bold;
		background:#FFF;
		text-align:center;
		}

#content {
		position:absolute;
		background:#FFF;
		margin-top:40px;
		margin-right:20px;
		margin-left:280px;
		margin-bottom:40px;
		border:4px solid #000;
		width:65%;
		}

#links {	
		padding:10px;				pic
		width:200px;			
		text-align:center;	
		}
		
	.blog {
  		padding:10px;
			}

.blogbody {
		font-family:verdana, arial, sans-serif;
		color:#333;
		font-size:x-small;
		font-weight:normal;
  		line-height:140%;
		}

.blogbody a,
	.blogbody a:link,
	.blogbody a:visited,
	.blogbody a:active,
	.blogbody a:hover {
		font-weight: normal;
		text-decoration: none;
	}

.title	{
		font-family:courier new, times new roman, serif;
		color:#000;
		font-size: medium;
		font-weight:bold;
  		padding:2px;
  		margin-top:10px;
		letter-spacing: .2em;
		text-transform:lowercase;
		}

.date {   
		font-family:courier new, times new roman, serif;
		color:#000;
		font-size: medium;
		font-weight:bold;
  		padding:2px;
  		margin-top:10px;
		letter-spacing: .2em;
		text-transform:lowercase;
		text-decoration:underline;
		}

#menu {   font-family:courier new, times new roman, sans-serif; 
		font-size: x-small; 
  		margin-bottom:15px;
		background:#FFF;
		text-align:center;
		}

.posted	{ 
		font-family:verdana, arial, sans-serif; 
		font-size: x-small; 
		color: #000000; 
		margin-bottom:25px;
		}
		
		
	.side {
		font-family:courier new, times new roman, serif;
		color:#000;
		font-size: x-small;
		font-weight:bold;
  		padding:2px;
  		margin-top:10px;
		letter-spacing: .1em;
		text-align:center;
		}		
		
		
	
	.comments-body {
		font-family:verdana, arial, sans-serif;
		font-size:small;
		font-weight:normal;
  		background:#FFF;
  		line-height:140%;
 		padding-bottom:10px;
  		padding-top:10px;		
 		border-bottom:1px dotted #999; 					
		}

.comments-post {
		font-family:verdana, arial, sans-serif;
		font-size:x-small;
		font-weight:normal;
  		background:#FFF;		
		}	
			
	
	.trackback-url {
		font-family:verdana, arial, sans-serif;
		font-size:small;
		font-weight:normal;
  		line-height:140%;
 		padding:5px;		
 		border:1px dotted #999; 
		}

.trackback-body {
		font-family:verdana, arial, sans-serif;
		font-size:small;
		font-weight:normal;
  		padding-bottom:10px;
  		padding-top:10px;				
		}

.trackback-post {
		font-family:verdana, arial, sans-serif;
		font-size:x-small;
		font-weight:normal;
  		background:#FFF;		
		}

.comments-head	{ 
		font-family:courier new, times new roman, serif;
		color:#000;
		font-size: medium;
		font-weight:bold;
  		padding:2px;
  		margin-top:10px;
		letter-spacing: .2em;
		text-transform:lowercase;
		
		}

#banner-commentspop {
		font-family:courier new, times new roman, serif;
		font-size:large;
		font-weight:bold;
		padding-left:15px;
  		padding-right:15px;
  		padding-top:5px;
  		padding-bottom:5px;  		  		  			 
		}

And this is the Master Archives Index file:
<!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="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> <div id="content"> <div class="blog"> <div class="blogbody"> <MTArchiveList> <a href="<$MTArchiveLink$>"><$MTArchiveTitle$></a><br /> </MTArchiveList> </div> </div> </div> <div id="links"> <center> <a href="<$MTBlogURL$>"><img src="archives/pregcurrent.gif" border="0"></a><br /> <a href="<$MTBlogURL$>/archives.html"><img src="archives/pregarchives.gif" border="0"></a><br />        <a href="http://design.lookingatstars.com/"><img src="archives/pregdesign.gif" border="0"></a><br />  </center> <img src="archives/pregnantbelly.jpg"> <div class="side"> <form method="get" action="<$MTCGIPath$><$MTSearchScript$>"> <input type="hidden" name="IncludeBlogs" value="<$MTBlogID$>" /> <label for="search" accesskey="4">Search</label><br /> <input id="search" name="search" size="20" /><br /> <input type="submit" value="Search" /></form><br /> <a href="<$MTBlogURL$>index.rdf">Syndicate this site (XML)</a><br /> <br /><br /> Powered by<br /><a href="http://www.movabletype.org">Movable Type <$MTVersion$></a><br /> </div> </div> <br clear="all" /> </body> </html> .

After replacing those three files, you also need to upload the following images onto your server. Do this by rightclicking (if you're using a Mac, hold the button down) and save the target on your hard drive. Then using you're Movable Type menu, upload the files. For more details, see the How-To Instructions on this website.

Belly Picture
Current
Archives
Guestbook
Design
Birth
Links
Photos
Write

Finally, there are some optional things on the menu, such as a photo page, a link to your e-mail address, a link to a links page, a link to your birth story. Right now these things are blanked out, because I assume you don't have those things ready yet.

To reveal the word "write" (as shown in the screenshot) find where it says: in the Main Index code. Then remove the  from the end. Save and rebuild. You will also have to do this on the Main Archives Index.

If you decide you want to link to a guestbook find where it says:  in the Main Index code, remove the  from the end and replace the words GUESTBOOK URL with http://www.guestbookurl.com or whatever your guestbook URL is.

Don't worry, there are instructions in the text, and they will also tell you how to reveal the text Birth Story (you could provide the URL directly to the entry with your story) and the Photos (in case you decided to create a page or entry with Photos.)

Remember, you MUST leave the link back (design) to this site and please sign below if you are taking one of these designs.

Posted by hilary at 03:53 PM | Permalink | Comments (9) | TrackBacks (0)

the design blog

Freeware templates and styles for Movable Type and Diaryland blogs, diaries, journals et cetera.

August 08, 2003

Mama To Be

July 21, 2003

Pregnancy Journal