the design blog: Pregnancy Journal

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.

Comments

thinking of doing a similiar project myself. i've seen some other interesting ideas at what to expect.

Posted by: Dan G | August 2, 2005 05:15 PM

A very nice design and well thought out will recommend to our members.

Posted by: Pregnancy Questions | January 30, 2005 07:58 AM

really an excellent site - keep it going... greetz from vienna/austria and - stay creative !!

Posted by: georg | July 15, 2004 04:07 AM

p.s. I'd like to give credit where credit is due - can I use the template without linking to my private pregnancy blog in your comment section, though? I can email you my pregnancy blog url...

Posted by: N. | May 31, 2004 08:31 PM

I'm having trouble trying to get this design to show up in my weblog - all of the sidebar graphics are hidden behind the blog body - help!

Posted by: N. | May 31, 2004 08:26 PM

Trying to learn some html and making up my blog! Thank you for the design

Posted by: Maria | March 8, 2004 01:45 PM

Originals, congratulations people! Bye, and happy new year :D

Posted by: diseño web | January 1, 2004 10:51 PM

I plan on using this, but two of the graphics linked above would not download (archives and birth). Feel free to email them to me so that I can upload them. Nice design!

Posted by: Jaynee | December 25, 2003 07:29 PM

Congrats, good design! Carlos Aiello Diseño web en Uruguay

Posted by: carlos | August 22, 2003 08:20 PM

the design blog

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

Pregnancy Journal

TrackBack

Comments

Post a comment