the design blog: Movable Type 2.661 or prior Archives

Minty Fresh

I'm currently using a modified version of this simple design for my vanity site. Please ensure that you retain the link back to this site (at the bottom of the index page.)

For the Main Index

<!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>

<body>

<div id="banner">
<h1><a href="<$MTBlogURL$>" accesskey="1"><$MTBlogName$></a></h1>
<span class="description"><$MTBlogDescription$></span>
</div>

<div id="blogright">
<div class="sidetitle">Recent Entries</div>
<div class="side">
<MTEntries lastn="5" offset="1">
<a href="<$MTEntryLink$>"><$MTEntryTitle$></a>
</MTEntries>
</div>
<div class="sidetitle">Links</div>
<div class="side"><a href="http://www.YOURLINK.com">ADD YOUR LINKS HERE</a></div>
</div

<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>

<ul id="menu">
<li><a href="<$MTBlogCCLicenseURL$>">License</a></li>
<li><a href="http://www.movabletype.org">Movable Type <$MTVersion$></a></li>
<li><a href="<$MTBlogURL$>index.rdf">(XML)</a></li>
<li><a href="http://design.lookingatstars.com/">Design</li>

</ul>

</div>

</body>

</html>

For the stylesheet, styles-site.css

html,body {height:100%;}

body {
		margin:0px 0px 20px 0px;
		background:#FFF;
		text-align:center;	
		}

A:link		{ color: #993; text-decoration:none;}
	A:visited		{ color: #993; text-decoration:none;}
	A:active		{ color: #993;  text-decoration:none;}
	A:hover		{ color: #993; text-decoration:underline;}

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

blockquote {
		font-size: 100%; font-family: "Courier New", Courier, monospace;
		}

#banner {
              text-align:left;
              height:75px;
              width:650px;
              margin-left: auto;
              margin-right:auto;
              font-family:georgia, times new roman, serif;
              font-size:medium;
              font-weight:bold;
              background:#FFF;
              padding-top:10px;
		}

#banner A:link		{ color: #9C9; text-decoration:none;}
	#banner A:visited		{ color: #9C9; text-decoration:none;}
	#banner A:active		{ color: #9C9;  text-decoration:none;}
	#banner A:hover		{ color: #9C9; text-decoration:underline;}
				
	#content {
		background:#FFF;
		width:650px;
		margin-right:auto;
		margin-left:auto;
		margin-bottom:20px;
		height:500px;
		}

#container {
		background:#FFF;
		width:650px;	
		margin-right:auto;
		margin-left:auto;
		}

#links
		{
		width:650px;
		margin-left:auto;
		margin-right:auto;
		margin-bottom:5px;
		}

#menu {
  		margin-top:10px;
  		margin-bottom:10px;
		text-align:center;
		padding:10px;
		font-family: verdana, arial, sans-serif;
		font-size: small;
		}

#menu li
		{
		display: inline;
		list-style-type: none;
		padding-right: 20px;
		font-family: verdana, arial, sans-serif;
		font-size: small;
		}

#blog {	
		padding:10px;
		background:#FFF;
 		width:400px;
		border:2px solid #CC9;
		height:inherit;
        	overflow:auto;
		}

#blogright {
		float:right;
		padding:10px;
		background:#9C9;
		width:200px;
        	height:inherit;
        	overflow:hidden;
		}

.blogbody {
		font-family: verdana, arial, sans-serif;
		color:#333;
		font-size:x-small;
		font-weight:normal;
  		background:#FFF;
  		line-height:200%;
  		text-align:left;
        	padding:15px;
		}

.blogbody img {
		border:4px solid #CC9;
		}

.title	{
		font-family: georgia, times new roman, serif;
		font-size: small;
		color: #666;
		text-align:right;
		}

.date	{ 
		font-family:verdana, arial, sans-serif; 
		font-size: x-small; 
		color: #CC9;
		text-align:right;
  		text-transform:lowercase;
		}			
		
	.posted	{ 
		font-family:verdana, arial, sans-serif; 
		font-size: x-small; 
		color: #000000; 
		margin-bottom:25px;
		text-align:left;
		}		
	
	.side {
		font-family:verdana, arial, sans-serif;
		color:#333;
		font-size:x-small;
  		line-height:140%;
  		padding:2px;
		text-align:right;			
		}
		
	.sidetitle {
		font-family: georgia, times new roman, serif;
		font-size: small;
		color: #666;
		text-align:right;
		text-transform:lowercase;
		}		
	
	.comments-body {
		font-family: verdana, arial, sans-serif;
		color:#333;
		font-size:x-small;
		font-weight:normal;
  		background:#FFF;
  		line-height:200%;
  		text-align:left;
        	margin-left:15px;
        	margin-right:15px;
		}

.comments-post {
		font-family: verdana, arial, sans-serif;
		color:#333;
		font-size:small;
		font-weight:normal;
  		background:#FFF;
  		line-height:200%;
  		text-align:left;
  		padding:10px;
  		margin:10px;
        	margin-left:15px;
        	margin-right:15px;
		}	
			
	.trackback-url {
		font-family:verdana, arial, sans-serif;
		color:#333;
		font-size:small;
		font-weight:normal;
  		background:#FFF;
  		line-height:140%;
 		padding:5px;
		text-align:left;					
		}

.trackback-body {
		font-family: verdana, arial, sans-serif;
		color:#333;
		font-size:small;
		font-weight:normal;
  		background:#FFF;
  		line-height:200%;
 		padding-bottom:10px;
  		padding-top:10px;		
 		border-bottom:1px dotted #999; 						text-align:left;
        	margin-left:15px;
        	margin-right:15px;
		}

.trackback-post {
		font-family: verdana, arial, sans-serif;
		color:#333;
		font-size:small;
		font-weight:normal;
  		background:#FFF;
  		line-height:200%;
 		padding-bottom:10px;
  		padding-top:10px;		
 		border-bottom:1px dotted #999; 						text-align:left;
		}

.comments-head	{ 
		font-family: georgia, times new roman, serif;
		font-size: small;
		color: #666;
		text-align:right;
		}

#banner-commentspop {
		font-family: verdana, arial, sans-serif;
		color:#333;
		font-size:small;
		font-weight:normal;
  		background:#FFF;
  		line-height:200%;
 		padding-bottom:10px;
  		padding-top:10px;		
 		border-bottom:1px dotted #999; 						text-align:left;
		}

//Design by Hilary; more style-sheets at http://design.lookingatstars.com //

Posted by hilary at 02:31 PM | Permalink | Comments (1) | TrackBacks (0)

Forest Green

A very simple green and white design that reminds me forestry, trees, simplicity.

Please remember to read the rules/requests and to link back to me.

Linking to me: (Cut and paste this into the Main Index where it says, 'Add your links here'.
<a href="http://design.lookingatstars.com/">Stylesheet By</a><br />

To get it working just replace the styles-site.css text with this:
body { margin:0px 0px 0px 0px; background:#FFF; text-align:center; background:#FFF; } A { color: #666; text-decoration: none; } A:link { color: #666; text-decoration: none; } A:visited { color: #666; text-decoration: none; } A:active { color: #666; text-decoration:none; } A:hover { color: #666; text-decoration:underline;} h1, h2, h3 { margin: 0px; padding: 0px; } #banner { text-align:center; font-family: palatino, georgia, verdana, arial, sans-serif; font-size: small; } .description { font-family:verdana, arial, sans-serif; font-size: x-small; color: #393; } #content { width:50%; margin:auto; text-align:left; padding:10px; } #container { background-color:#FFF; } #links { position:absolute; width:170px; top:70px; right:5px; padding:5px; } .blog { margin-top:30px; } .blogbody { text-align:left; font-family:verdana, arial, sans-serif; font-size: x-small; color: #393; margin-bottom:10px; padding:10px; border:1px solid #333; background:#FFF; } blogbody A { color: #9C9; text-decoration: none; } blogbody A:link { color: #9C9; text-decoration: none; } blogbody A:visited { color: #9C9; text-decoration: none; } blogbody A:active { color: #9C9; text-decoration:none; } blogbody A:hover { color: #9C9; text-decoration:underline;} .title { text-align:left; font-family:palatino, georgia, arial, serif; font-size: small; font-weight:bold; color: #333; } #menu { text-align:center; font-family:verdana, arial, serif; font-size: x-small; color: #393; } .date { text-align:center; font-family:verdana, arial, sans-serif; font-size: x-small; color: #333; margin-top:10px; } .posted { text-align:center; font-family:verdana, arial, sans-serif; font-size: x-small; color: #333; } .calendar { font-family:verdana, arial, sans-serif; font-size: x-small; padding:2px; color: #CCF; } .calendarhead { text-align:center; font-family:palatino, georgia, arial, serif; font-size: small; color: #9C9; } .side { text-align:center; font-family:verdana, arial, sans-serif; font-size: x-small; color: #393; margin-top:5px; } .sidetitle { margin-top:15px; text-align:center; font-family:palatino, georgia, arial, serif; font-size: small; font-weight:bold; color: #333; } .syndicate { margin-top:10px; text-align:center; font-family:palatino, georgia, arial, serif; font-size: small; font-weight:bold; color: #333; } .powered { margin-top:10px; text-align:center; font-family:palatino, georgia, arial, serif; font-size: small; font-weight:bold; color: #333; } .comments-body { text-align:left; font-family:verdana, arial, sans-serif; font-size: x-small; color: #333; background:#FFF; margin:10px; padding:5px; } .comments-post { margin-top:10px; text-align:left; font-family:verdana, arial, sans-serif; font-size: x-small; color: #9C9; } .trackback-url { text-align:center; font-family:verdana, arial, sans-serif; font-size: x-small; color: #333; } .trackback-body { text-align:center; font-family:verdana, arial, sans-serif; font-size: x-small; color: #9C9; } .trackback-post { text-align:left; font-family:verdana, arial, sans-serif; font-size: x-small; color: #9C9; } .comments-head { margin-top:10px; text-align:left; font-family:palatino, georgia, arial, serif; font-size: small; font-weight:bold; color: #333; } #banner-commentspop { text-align:left; background-color:9C9; font-family: palatino, georgia, verdana, arial, sans-serif; font-size: large; color:#333; } /*This was designed by Hilary. For more designs visit http://design.lookingatstars.com/ Please remember to link to me off your index page if you are using this site. */

Posted by hilary at 04:09 PM | Permalink | Comments (3) | TrackBacks (0)

Sunflower Design

Pretty sunflower designs... this screenshot was taken in 800x600 but it looks similar in 1024x768.

Please remember to read the rules/requests and to link back to me.

Linking to me: (Cut and paste this into the Main Index where it says, 'Add your links here'.
<a href="http://design.lookingatstars.com/">Stylesheet By</a><br />

Also download this image by rightclicking, choosing "save target as" and uploading it (using Movable Type) into your archives file (this is usually the default). Read the 'How to Install Movable Type Templates' or 'Troubleshooting' for more information.

To get it working just replace the styles-site.css text with this:
body { background:#FFF; background-image: url(archives/sunflower.gif); background-repeat: no-repeat; background-position:top center; margin:0px 0px 0px 0px;repeat-y; } A:link {font-weight:bold; text-decoration: none; color: #C93; } A:visited {font-weight:bold; text-decoration: none; color: #C93;} A:active {font-weight:bold; text-decoration: none; color: #C93;} A:hover {font-weight:bold; text-decoration: underline; color: #C93;} h1, h2, h3 { margin: 0px; padding: 0px; } #banner { width:80%; margin-left:10%; margin-bottom:10px; margin-top:100px; font-family:georgia, palatino, serif; color:#36F; background:#FFF: font-size:x-large; text-align:center; height:50px; } #banner A:link {font-size:x-large; text-decoration: none; color: #393; } #banner A:visited {font-size:x-large; text-decoration: none; color: #393;} #banner A:active {font-size:x-large; text-decoration: none; color: #393;} #banner A:hover {font-size:x-large; text-decoration: underline; color: #393;} .description { font-family:verdana, arial, sans-serif; color:#999; font-size:x-small; min-height:10px; } #content { float:right; width:45%; margin-right:10%; } #container { width:45%; background:#FFF; margin-left:auto; margin-right:auto; margin-bottom:5px; } #links { width:25%; float:left; margin-left:10%; } .blog { padding:10px; background:#FFF; margin: 5px; } .blogbody { font-family:verdana, arial, sans-serif; color:#393; font-size:small; font-weight:normal; padding:10px; border:3px #393 solid; margin-bottom:10px; } .title { font-family: georgia, palatino, serif; font-size: small; color: #393; text-transform:lowercase; font-weight:bold; margin-top:2px; } #menu { font-family:georgia, palatino, serif; color:#FFF; font-size:x-small; font-weight:normal; background:#393; text-align:center; padding:3px; } .date { font-family:verdana, arial, sans-serif; font-size: x-small; color: #999; font-weight:bold; } .posted { font-family:verdana, arial, sans-serif; font-size: x-small; color: #999; margin-bottom:25px; } .calendar { font-family:verdana, arial, sans-serif; font-size: x-small; color: #393; text-align:left; } .calendarhead { font-family:verdana, arial, sans-serif; color:#393; font-size:x-small; font-weight:bold; text-align:center; margin:0; } .side { font-family:verdana, arial, sans-serif; color:#393; font-size:x-small; font-weight:normal; margin-bottom:15px; } .sidetitle { font-family:georgia, palatino, serif; color:#FFF; font-size:small; margin-bottom:10px; background:#393; padding:3px; font-weight:bold; margin:0; } .syndicate { background:#FFF; font-family:georgia, palatino, serif; color:#393; font-size:small; margin-top:10px; text-align:center; padding:3px; } .powered { font-family:georgia, palatino, serif; color:#393; font-size:small; margin-top:10px; text-align:center; padding:3px; } .comments-body { font-family: verdana, arial, sans-serif; color:#393; font-size:small; font-weight:normal; background:#FFF; padding-bottom:10px; padding-top:10px; } .comments-post { font-family:verdana, arial, sans-serif; color:#393; font-size:x-small; font-weight:normal; background:#FFF; } .trackback-url { font-family:verdana, arial, sans-serif; color:#393; font-size:small; font-weight:normal; background:#FFF; padding:5px; } .trackback-body { font-family:verdana, arial, sans-serif; color:#393; font-size:small; font-weight:normal; background:#9FC; padding-bottom:10px; padding-top:10px; } .trackback-post { font-family:verdana, arial, sans-serif; color:#393; font-size:x-small; font-weight:normal; background:#FFF; } .comments-head { font-family:georgia, palatino, sans-serif; font-size:small; color: #FFF; margin-top:20px; background:#393; padding:3px; } #banner-commentspop { width:80%; margin-left:10%; margin-bottom:10px; margin-top:100px; font-family:georgia, palatino, serif; color:#393; background:#FFF: font-size:x-large; text-align:center; height:50px; } /* This design was done by Hilary. For more designs visit http://design.lookingatstars.com/ */

Posted by hilary at 01:49 PM | Permalink | Comments (3) | TrackBacks (0)

Dreams Left on the Windowsill

I designed this for a friend of mine who is going to Baghdad, but it is perfect for anyone who has thought about, worried about, dreamt about what is going on in the Middle East these days. Or about anything else for that matter. This beautiful piece of art is by Farouk Kaspaules, an Iraqi-born Canadian artist.

That screenshot is 800x600. In order to make it work, you will have to save the following file and upload it into your archives file. (Right click on the word file and choose Save Target as. Ensure the file is named iraq.gif and that is uploaded into http://YOURBLOGSDOMAIN/archives. If you save it elsewhere ensure that under the body tag you change the url(archives/iraq.gif) to url(http://whereyouputit.com/filename.gif).

Please remember to read the rules/requests and to link back to me.

Linking to me: (Cut and paste this into the Main Index where it says, 'Add your links here'.
<a href="http://design.lookingatstars.com/">Stylesheet By</a><br />

To get it working just replace the styles-site.css text with this:
body { margin:0px 0px 0px 150px; background:#FFF url(archives/iraq.gif) repeat-y; } A { color: #369; } A:link { color: #369; } A:visited { color: #369; } A:active { color: #369; text-decoration: underline; } A:hover { color: #369; text-decoration: underline; } h1, h2, h3 { margin: 0px; padding: 0px; } #banner { margin:10px; font-family:"trebuchet ms", palatino, georgia, verdana, arial, sans-serif; color:#600; font-size:x-large; font-weight:normal; text-align:left; padding:10px; } #banner a, #banner a:link, #banner a:visited, #banner a:active, #banner a:hover { color: #600; text-decoration:none; } .description { font-family:"trebuchet ms", palatino, georgia, times new roman, serif; color:#663; font-size:small; text-transform:none; } #content { float:left; background:#FFF; width:60%; } #container { float:left; background:#FFF; width:100%; } #links { float:right; width:35%; padding:15px; margin-head:15px; } .blog { padding:15px; background:#FFF; } .blogbody { font-family:verdana, arial, sans-serif; color:#663; font-size:small; font-weight:normal; padding:10px; border:1px #663 double; margin-bottom:15px; } .title { font-family: verdana, arial, sans-serif; font-size: small; color: #600; text-transform:lowercase; } #menu { font-family:verdana, arial, sans-serif; color:#663; font-size:x-small; font-weight:normal; text-transform:lowercase; background:#FFF; text-align:center; } .date { font-family:verdana, arial, sans-serif; font-size: small; color: #600; text-transform:lowercase; margin-bottom:10px; font-weight:bold; } .posted { font-family:verdana, arial, sans-serif; font-size: x-small; color: #663; margin-bottom:25px; } .calendar { font-family:verdana, arial, sans-serif; font-size: x-small; color: #663; font-weight:bold; text-align:left; text-transform:lowercase; } .calendarhead { font-family:verdana, arial, sans-serif; color:#600; font-size:small; font-weight:bold; padding:2px; text-align:left; } .side { font-family:verdana, arial, sans-serif; color:#663; font-size:x-small; font-weight:normal; margin-bottom:15px; } .sidetitle { font-family:verdana, arial, sans-serif; color:#600; font-size:small; font-weight:bold; margin-top:10px; text-transform:lowercase; } .syndicate { font-family:verdana, arial, sans-serif; color:#600; font-size:x-small; font-weight:bold; margin-top:20px; text-transform:lowercase; text-align:center; } .powered { font-family:verdana, arial, sans-serif; color:#600; font-size:x-small; font-weight:bold; margin-top:20px; text-transform:lowercase; text-align:center; } .comments-body { font-family: verdana, arial, sans-serif; color:#666; font-size:small; font-weight:normal; background:#FFF; padding-bottom:10px; padding-top:10px; } .comments-post { font-family:verdana, arial, sans-serif; color:#666; font-size:x-small; font-weight:normal; background:#FFF; } .trackback-url { font-family:verdana, arial, sans-serif; color:#666; font-size:small; font-weight:normal; background:#FFF; padding:5px; } .trackback-body { font-family:verdana, arial, sans-serif; color:#666; font-size:small; font-weight:normal; background:#FFF; padding-bottom:10px; padding-top:10px; } .trackback-post { font-family:verdana, arial, sans-serif; color:#666; font-size:x-small; font-weight:normal; background:#FFF; } .comments-head { font-family:"trebuchet ms", palatino, georgia, verdana, arial, sans-serif; font-size:small; color: #600; margin-top:20px; font-weight:bold; background:#FFF; } #banner-commentspop { font-family:"trebuchet ms", palatino, georgia, verdana, arial, sans-serif; color:#FFF; font-size:large; font-weight:bold; background:#633; padding-left:15px; padding-right:15px; padding-top:5px; padding-bottom:5px; } /* This stylesheet designed for Movable Type by Hilary. For more designs visit http://design.lookingatstars.com/ */

Posted by hilary at 06:55 PM | Permalink | Comments (4) | TrackBacks (0)

Think Pink

Tired of gender-neutral Movable Type templates? Try this on for size.

Please remember to read the rules/requests and to link back to me. Also, please sign the guestbook. In return, I will link to you.

Linking to me: (Cut and paste this into the Main Index where it says, 'Add your links here'.
<a href="http://design.lookingatstars.com/">Stylesheet By</a><br />

Just replace the styles-site.css text with this:
body { background:#FFF; } A { color: #F69; text-decoration: none;} A:link { color: #F69; text-decoration: none; } A:visited { color: #F69; text-decoration: none; } A:active { color: #F06; } A:hover { color: #F06; } h1, h2, h3 { margin: 0px; padding: 0px; } #banner { font-family:"trebuchet ms", arial, sans-serif; color:#999; font-size:x-large; background:#FFF; font-weight:bold; } .description { font-family:verdana, arial, sans-serif; color:#999; font-size:x-small; font-weight:bold;; text-transform:none; letter-spacing: none; } #content { float:left; width:60%; border:5px solid #F69; margin:15px; } #links { float:right; width:25%; background:#FCC; margin-top:20px; margin-left:15px; margin-right:15px; height:100%; text-align:center; padding:5px; } .blog { padding:15px; } .blogbody { font-family:verdana, arial, sans-serif; color:#666; font-size:x-small; } .title { font-family: verdana, arial; font-size: small; color: #000; font-weight:bold; } #menu { margin-bottom:10px; font-size:small; font-weight:bold; font-family: verdana, arial; font-size: small; } .date { font-family:verdana, arial, sans-serif; font-size: xx-small; color: #999; font-weight:bold; padding-bottom:5px; margin-top:10px; } .posted { font-family:verdana, arial, sans-serif; font-size: x-small; color: #999; } .calendar { font-family:verdana, arial, sans-serif; color:#666; font-size:xx-small; font-weight:normal; padding:2px; text-align:center; margin-top:20px; margin-left:auto; } .calendarhead { font-family:verdana, arial, sans-serif; color:#000; font-size:x-small; font-weight:bold; background:#F69; text-align:center; padding:5px; } .side { font-family:verdana, arial, sans-serif; color:#999; font-size:xx-small; margin-top:10px; margin-bottom:10px; letter-spacing: .2em; } .sidetitle { font-family:verdana, arial, sans-serif; color:#000; font-size:x-small; font-weight:bold; letter-spacing: .2em; } .syndicate { font-family:verdana, arial, sans-serif; color:#999; font-size:x-small; font-weight:bold; margin-top:10px; letter-spacing: .2em; } .powered { font-family:verdana, arial, sans-serif; color:#999; font-size:x-small; font-weight:bold; margin-top:10px; letter-spacing: .2em; } .comments-body { font-family:verdana, arial, sans-serif; color:#666; font-size:small; font-weight:normal; background:#FFF; line-height:140%; padding-bottom:10px; } .comments-post { font-family:verdana, arial, sans-serif; color:#999; font-size:x-small; font-weight:normal; background:#FFF; margin-top:0px; } .comments-head { font-family:verdana, arial, sans-serif; font-size: small; color: #999; font-weight:bold; margin-top:10px; text-transform:uppercase; border-bottom:1px dotted #666; } .trackback-body { font-family:verdana, arial, sans-serif; color:#333; font-size:small; font-weight:normal; background:#FFF; line-height:140%; padding-top:15px; } .trackback-url { font-family:verdana, arial, sans-serif; color:#666; font-size:small; font-weight:normal; background:#FFF; line-height:140%; padding:5px; border:1px dashed #666; } .trackback-post { font-family:verdana, arial, sans-serif; color:#999; font-size:x-small; font-weight:normal; background:#FFF; margin-bottom:20px; } #banner-commentspop { font-family:verdana, arial, sans-serif; color:#CC9933; font-size:large; font-weight:bold; background:#FFF; padding-left:15px; } This stylesheet was designed by Hilary. For more designs visit http://design.lookingatstars.com/

Posted by hilary at 03:11 PM | Permalink | Comments (6) | TrackBacks (1)

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.

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.

February 08, 2005

Minty Fresh

November 01, 2003

Forest Green

August 21, 2003

Sunflower Design

August 18, 2003

Dreams Left on the Windowsill

July 28, 2003

Think Pink

July 21, 2003

Pregnancy Journal