the design blog: Diaryland Weblog Archives

Because the last few I've done haven't been Diaryland and because after all, 'tis the season, here's a Diaryland Christmas design!! Just to be nice I've also made a version for Diaryland weblog-style users. If that's what you are scroll down.

How your entry pages will look

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>'tis the season</title>
<style type="text/css">
Body	{ background-image: url(http://design.lookingatstars.com/archives/ornaments.jpg);
background-position: top left;
background-color:#FFF;
background-repeat:no-repeat;
margin:5px;
	}

a:link 		{text-decoration: none; color: #396;}
a:visited   	{text-decoration: none; color: #396;}
a:active	{text-decoration: none; color: #396;}
a:hover 	{text-decoration: none; color: #396;}

#menu	{	
float:left;
width:20%;
font-size:small;
margin-top:250px;
margin-left:10px;
		}

#content {	
  float:right;
		width:70%;
 margin:10px;
 padding:20px;
		}

.title	{	
		font-family: trebuchet ms, verdana, arial, sans-serif;
	font-size: small;
	color: #903;
	font-weight:bold;
	margin-top:5px;
margin-bottom:5px;
	}

.entry	{	
		font-family: verdana, arial, sans-serif;
		font-size: x-small;
		color: #333;
		font-weight:normal;
		text-align:left;
	}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body>
<div id="content">
   <div class="title">%%date%% : %%short_description%%</div>
<div class="entry">%%entry%%</div>
<div class="title"><A HREF="%%prev%%">last christmas</A> * <A HREF="%%next%%">next christmas</A>
<br />
</div></div>
<div id="menu">
<div class="title">
<a href="/index.html">christmas present</a><br /><a href="/older.html">christmas past</a><br /><a href="http://%%username%%.signmyguestbook.com">christmas cards</a><br /><a target="_blank" href="http://design.lookingatstars.com">wrapped by</a><br /><a target="_blank" href="http://diaryland.com">hosted by</a><br />

</div></div>
    </body>
</html>

How your older.html page will look

a:link 		{text-decoration: none; color: #396;}
a:visited   	{text-decoration: none; color: #396;}
a:active	{text-decoration: none; color: #396;}
a:hover 	{text-decoration: none; color: #396;}

#menu	{	
float:left;
width:20%;
font-size:small;
margin-top:250px;
margin-left:10px;
		}

#content {	
  float:right;
		width:70%;
 margin:10px;
		}

.title	{	
		font-family: trebuchet ms, verdana, arial, sans-serif;
	font-size: small;
	color: #903;
	font-weight:bold;
	margin-top:5px;
margin-bottom:5px;
	}

.entry	{	
		font-family: verdana, arial, sans-serif;
		font-size: xx-small;
		color: #333;
		font-weight:normal;
		text-align:left;
	}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body>
<div id="content">
   <div class="title">Archives</div>
 <div class="entry">%%older_entries%%</div>
<br />
</div></div>
<div id="menu">
<div class="title">
<a href="/index.html">christmas present</a><br /><a href="/older.html">christmas past</a><br /><a href="http://%%username%%.signmyguestbook.com">christmas cards</a><br /><a target="_blank" href="http://design.lookingatstars.com">wrapped by</a><br /><a target="_blank" href="http://diaryland.com">hosted by</a><br />

</div></div>
    </body>
</html>

How each entry on your older.html page looks

So for most of you, you're done here. For those of you who have weblog style diaries, you have to change these two templates.

Use this for 'How each of your entries will look' template.

a:link 		{text-decoration: none; color: #396;}
a:visited   	{text-decoration: none; color: #396;}
a:active	{text-decoration: none; color: #396;}
a:hover 	{text-decoration: none; color: #396;}

#menu	{	
float:left;
width:20%;
font-size:small;
margin-top:250px;
margin-left:10px;
		}

#content {	
  float:right;
		width:70%;
 margin:10px;
 padding:20px;
		}

.title	{	
		font-family: trebuchet ms, verdana, arial, sans-serif;
	font-size: small;
	color: #903;
	font-weight:bold;
	margin-top:5px;
margin-bottom:5px;
	}

.entry	{	
		font-family: verdana, arial, sans-serif;
		font-size: x-small;
		color: #333;
		font-weight:normal;
		text-align:left;
	}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body>
<div id="content">
%%entries%%
<br />
</div>
<div id="menu">
<div class="title">
<a href="/index.html">christmas present</a><br /><a href="/older.html">christmas past</a><br /><a href="http://%%username%%.signmyguestbook.com">christmas cards</a><br /><a target="_blank" href="http://design.lookingatstars.com">wrapped by</a><br /><a target="_blank" href="http://diaryland.com">hosted by</a><br />

</div></div>
    </body>
</html>

This part is for to change how each of your individual entries looks if you're using the weblog-style diary (huh?)

Posted by hilary at 06:38 PM | Permalink | Comments (7) | TrackBacks (0)

This is a Diaryland template that makes me feel all fresh and minty. This template is also available for web-log style diaries. The archives page will be the same as will the 'how your entries will look on the 'older' page." 'How each of your entries looks' and 'How each of your individual entries look if you're using a weblog-style diary' both are slightly different and provided below.

Unlike in this screenshot, there is also a "book" link (not a 'contact' link - though I could add one if you ask) to a guestbook because I notice that most Diaryland denizen have guestbooks at http://www.signmyguestbook.com. If not, find this line of code <a href="http://%%username%%.signmyguestbook.com">book</a> (plus the four spaces after it) and delete it from the code.

Entry Pages

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>palm tree musings</title>
<style type="text/css">
Body	{
	background:#FFF;
	margin:0;
	}

a:link 		{text-decoration: none; color: #9C6;}
a:visited   	{text-decoration: none; color: #9C6;}
a:active	{text-decoration: none; color: #9C6;}
a:hover 	{text-decoration: none; color: #9C6;}

#menu	{	margin-top:20px;
		margin-right:20px;
		margin-left:20px;
		margin-bottom:20px;
		text-align:center;
		font-family:georgia, palatino, times new roman, serif;
		font-size:small;
		}

#content {	background:#CFC;
		margin-top:20px;
		margin-bottom:20px;
		border:4px solid #999;
		padding:15px;
		width:50%;
		}

.title	{	
		font-family: georgia, palatino, times new roman, serif;
		font-size: small;
	 	color: #999;
		font-weight:bold;
		letter-spacing:.1em;
		margin-top:15px;
		margin-bottom:15px;
	}

.entry	{	
		font-family: verdana, arial, sans-serif;
		font-size: x-small;
		color: #999;
		font-weight:normal;
		text-align:left;
	}

</style>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="description" content="Designed by Hilary from http://design.lookingatstars.com/">
</head>
<body>
<center><div id="menu">
<img src="http://design.lookingatstars.com/archives/writinginjournal-thumb.gif" width="227"

height="300" border="0" /<br />
<div class="title">
<a href="/index.html">new</a>    <a

href="/older.html">old</a>    <a

href="http://%%username%%.signmyguestbook.com">book</a>    <a

href="http://design.lookingatstars.com">design</a>    <a

href="http://diaryland.com">host</a></div></div>
<div id="content">
   <div class="title">%%date%%</div>
<div class="entry">%%entry%%</div>
</div>
<div id="menu">
<div class="title"><A HREF="%%prev%%">last</A> * <A HREF="%%next%%">next</A>
<br /></div></div>
</center>

</body>
</html>

Older.html Archive Page

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>palm tree musings</title>
<style type="text/css">
Body	{
	background:#FFF;
	margin:0;
	}

a:link 		{text-decoration: none; color: #9C6;}
a:visited   	{text-decoration: none; color: #9C6;}
a:active	{text-decoration: none; color: #9C6;}
a:hover 	{text-decoration: none; color: #9C6;}

#menu	{	margin-top:20px;
		margin-right:20px;
		margin-left:20px;
		margin-bottom:20px;
		text-align:center;
		font-family:georgia, palatino, times new roman, serif;
		font-size:small;
		}

#content {	background:#CFC;
		margin-top:20px;
		margin-bottom:20px;
		border:4px solid #999;
		padding:15px;
		width:50%;
		}

.title	{	
		font-family: georgia, palatino, times new roman, serif;
		font-size: small;
	 	color: #999;
		font-weight:bold;
		letter-spacing:.1em;
		margin-top:15px;
		margin-bottom:15px;
	}

.entry	{	
		font-family: verdana, arial, sans-serif;
		font-size: x-small;
		color: #999;
		font-weight:normal;
		text-align:left;
	}

</style>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="description" content="Designed by Hilary from http://design.lookingatstars.com/">
</head> 
<body>
<center><div id="menu">
<img src="http://design.lookingatstars.com/archives/writinginjournal-thumb.gif" width="227"

height="300" border="0" /<br />
<div class="title">
<a href="/index.html">new</a>    <a

href="/older.html">old</a>    <a

href="http://%%username%%.signmyguestbook.com">book</a>    <a

href="http://design.lookingatstars.com">design</a>    <a

href="http://diaryland.com">host</a></div></div>
<div id="content">
<div class="entry">%%older_entries%%</div>
</div>
</center>

</body>
</html>

How each entry on your older HTML page looks (Optional)

If you have a weblog style diary then use this template for the 'How Each of your entries will look. If you do not have a weblog style diary, or have no idea what I'm talking about ignore this and everything below it. You're done!

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>palm tree musings</title>
<style type="text/css">
Body	{
	background:#FFF;
	margin:0;
	}

a:link 		{text-decoration: none; color: #9C6;}
a:visited   	{text-decoration: none; color: #9C6;}
a:active	{text-decoration: none; color: #9C6;}
a:hover 	{text-decoration: none; color: #9C6;}

#menu	{	margin-top:20px;
		margin-right:20px;
		margin-left:20px;
		margin-bottom:20px;
		text-align:center;
		font-family:georgia, palatino, times new roman, serif;
		font-size:small;
		}

#content {	background:#CFC;
		margin-top:20px;
		margin-bottom:20px;
		border:4px solid #999;
		padding:15px;
		width:50%;
		}

.title	{	
		font-family: georgia, palatino, times new roman, serif;
		font-size: small;
	 	color: #999;
		font-weight:bold;
		letter-spacing:.1em;
		margin-top:15px;
		margin-bottom:15px;
	}

.entry	{	
		font-family: verdana, arial, sans-serif;
		font-size: x-small;
		color: #999;
		font-weight:normal;
		text-align:left;
	}

</style>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head> 
<body>
<center><div id="menu">
<img src="http://design.lookingatstars.com/archives/writinginjournal-thumb.gif" width="227"

height="300" border="0" /<br />
<div class="title">
<a href="/index.html">new</a>    <a

href="/older.html">old</a>    <a

href="http://%%username%%.signmyguestbook.com">book</a>    <a

href="http://design.lookingatstars.com">design</a>    <a

href="http://diaryland.com">host</a></div></div>
<div id="content">
%%entries%%
</div>
<div id="menu">
<div class="title"><A HREF="%%prev%%">last</A> * <A HREF="%%next%%">next</A>
<br /></div></div>
</center>

</body>
</html>

This part is for to change how each of your individual entries looks if you're using the weblog-style diary (huh?)

Posted by hilary at 01:41 PM | Permalink | Comments (24) | TrackBacks (0)

the design blog

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

November 21, 2003

'Tis the Season

July 23, 2003

Palm Tree Musings