the design blog: Fun Archives

'Tis the Season

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

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

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

<!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">
%%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)

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)

Glamour-o-rama

This design is so sexy you may need a cold shower afterwards. But mostly, it is in honour of my impending trip to Vegas.

How your entry pages will look
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>glamour-o-rama</title> <style type="text/css"> Body { background: #000; margin: 30 30 30 30; } a:link {text-decoration: none; color: #Fc6;} a:visited {text-decoration: none; color: #Fc6;} a:active {text-decoration: none; color: #Fc6;} a:hover {text-decoration: none; color: #fC6;} #content { background:#000; padding:15px; margin-top:-300px; margin-left:300px; border: 4px solid #3C9; width:445px; } #menu { background:#000; position:absolute; top: 0; left: 480; right: auto; bottom: auto; margin-bottom:30px; } #showgirl { background-image: url("http://design.lookingatstars.com/archives/showgirl.gif"); background-repeat: no-repeat; background-attachment: scroll; height:445px; width:445px; border: 4px solid #3C9; } .sidemenu{ font-family: trebuchet, palatino, sans-serif; font-size: x-small; color: #3C9; letter-spacing:.2em; padding:30px; font-weight:bold; } .heading { font-family: trebuchet, palatino, sans-serif; font-size: x-small; color: #3C9; text-align:left; padding:5px; font-weight:bold; } .entry { font-family: trebuchet, palatino, sans-serif; font-size: x-small; color: #3C9; font-weight:normal; text-align:left; padding:5px; } </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> <div id="showgirl"></div> <div id="content"> <div class="heading">%%date%% : %%short_description%%</div> <div class="entry">%%entry%%</div> <div class="heading"><A HREF="%%prev%%">last</A> * <A HREF="%%next%%">next</A></div></div> <div id="menu"> <div class="sidemenu"> <a href="http://%%username%%.diaryland.com">new</a><br /> <a href="http://%%username%%.diaryland.com/older.html">older</a><br /> <a href="http://%%username%%.signmyguestbook.com">book</a><br /> <a href="http://members.diaryland.com/edit/profile.phtml?user=%%username%%">profile</a><br /> <a href="http://design.lookingatstars.com/">design</a><br /> <a href="http://diaryland.com">host</a> </div></div> </body> </html>

How your older.html page will look
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>glamour-o-rama</title> <style type="text/css"> Body { background: #000; margin: 30 30 30 30; } a:link {text-decoration: none; color: #Fc6;} a:visited {text-decoration: none; color: #Fc6;} a:active {text-decoration: none; color: #Fc6;} a:hover {text-decoration: none; color: #fC6;} #content { background:#000; padding:15px; margin-top:-300px; margin-left:300px; border: 4px solid #3C9; width:445px; } #menu { background:#000; position:absolute; top: 0; left: 480; right: auto; bottom: auto; margin-bottom:30px; } #showgirl { background-image: url("http://design.lookingatstars.com/archives/showgirl.gif"); background-repeat: no-repeat; background-attachment: scroll; height:445px; width:445px; border: 4px solid #3C9; } .sidemenu{ font-family: trebuchet, palatino, sans-serif; font-size: x-small; color: #3C9; letter-spacing:.2em; padding:30px; font-weight:bold; } .heading { font-family: trebuchet, palatino, sans-serif; font-size: x-small; color: #3C9; text-align:left; padding:5px; font-weight:bold; } .entry { font-family: trebuchet, palatino, sans-serif; font-size: x-small; color: #3C9; font-weight:normal; text-align:left; padding:5px; } </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> <div id="showgirl"></div> <div id="content"> <div class="entry">%%older_entries%%</div></div> <div id="menu"> <div class="sidemenu"> <a href="http://%%username%%.diaryland.com">new</a><br /> <a href="http://%%username%%.diaryland.com/older.html">older</a><br /> <a href="http://%%username%%.signmyguestbook.com">book</a><br /> <a href="http://members.diaryland.com/edit/profile.phtml?user=%%username%%">profile</a><br /> <a href="http://design.lookingatstars.com/">design</a><br /> <a href="http://diaryland.com">host</a> </div></div> </body> </html>

How each entry on your older.html page looks
%%date%% - <A HREF="%%page_name%%">%%short_description%%</A><BR />

Posted by hilary at 05:00 PM | Permalink | Comments (11) | TrackBacks (0)

Places to Go

Because you are a busy woman with places to go and people to see. Remember to read the instructions and to download the following image by rightclicking on the word image and choosing "Save Target As..."

How your entry pages will look
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <style type="text/css"> body { margin:0px 0px 0px 0px; background:#FFF url("http://design.lookingatstars.com/archives/tryingon.gif"); background-repeat: no-repeat; background-position: 0,0; } a:link { text-decoration: none; color: #A6492F; } a:visited { text-decoration: none; color: #A6492F; } a:active { text-decoration: none; color: #A6492F; } a:hover { text-decoration: underline; color: #A6492F; } #content { position:absolute; top: 30px; left: 200px; width: "50%"; margin-left:auto; margin-right:auto; color:#000; padding:15px; } #links { float: left; width: 40px; } .title {font-family: georgia, palatino, serif; font-size: x-small; padding: 10px; font-weight: bold; letter-spacing: .2em; text-align:center;} .entry {font-family: georgia, palatino, serif; font-size: x-small; text-decoration: none; padding:10px;} .menu {font-family: georgia, palatino, serif; font-size: medium; letter-spacing: .2em; padding: 10px; font-weight: bold; } } </style> <title>places to go</title> <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> <div id="content"> <div class="title">%%date%% · %%short_description%%</div> <div class="entry">%%entry%%</div> <div class="title"><a href="%%prev%%">before</a> · <a href="%%next%%">after</a></div></div> <div id="links"> <div class="menu"> <a href="/index.html">new</a><br> <a href="/older.html">old</a> <a href="http://%%username%%.signmyguestbook.com">sign</a><br> <a href="http://design.lookingatstars.com">design</a><br> <a href="http://www.diaryland.com">host </a></div></div> </body> </html>

How your older.html page will look
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <style type="text/css"> body { margin:0px 0px 0px 0px; background:#FFF url("http://design.lookingatstars.com/archives/tryingon.gif"); background-repeat: no-repeat; background-position: 0,0; } a:link { text-decoration: none; color: #A6492F; } a:visited { text-decoration: none; color: #A6492F; } a:active { text-decoration: none; color: #A6492F; } a:hover { text-decoration: underline; color: #A6492F; } #content { position:absolute; top: 30px; left: 200px; width: "50%"; margin-left:auto; margin-right:auto; color:#000; padding:15px; } #links { float: left; width: 40px; } .title {font-family: georgia, palatino, serif; font-size: x-small; padding: 10px; font-weight: bold; letter-spacing: .2em; text-align:center;} .entry {font-family: georgia, palatino, serif; font-size: x-small; text-decoration: none; padding:10px;} .menu {font-family: georgia, palatino, serif; font-size: medium; letter-spacing: .2em; padding: 10px; font-weight: bold; } } </style> <title>places to go</title> <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> <div id="content"> <div class="entry"><br /><br />%%older_entries%%</div> </div> <div id="links"> <div class="menu"> <a href="/index.html">new</a><br> <a href="/older.html">old</a> <a href="http://%%username%%.signmyguestbook.com">sign</a><br> <a href="http://design.lookingatstars.com">design</a><br> <a href="http://www.diaryland.com">host </a></div></div> </body> </html>

How each entry on your older.html page looks
%%date%% - <A HREF="%%page_name%%">%%short_description%%</A><BR />

Posted by hilary at 12:10 PM | Permalink | Comments (23) | TrackBacks (0)

Me and My Big Mouth

This big mouth design is very fun. Please leave comments if you are going to be taking this shot. I prefer if you download the image to your own server. Either way, please leave a comment to let me know you're using the design! Thanks a bunch. If you need help, read the directions at left, but essentially it's just a matter of replacing the templates.

How your entry pages will look
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <style type="text/css"> body { margin:0px 0px 0px 0px; background:#966; background: #966 url("http://design.lookingatstars.com/archives/tongueout.gif"); background-repeat: no-repeat; background-position: 0,0; } a:link { text-decoration: none; color: #C69; } a:visited { text-decoration: none; color: #C69; } a:active { text-decoration: none; color: #C69; } a:hover { text-decoration: underline; color: #C69; } #content { position:absolute; top: 200px; left: 250px; width: 337px; min-height:500px; background:#FFF; color: #966; padding:15px; } #links { float: right; width: 40px; } .title {font-family: verdana, times new roman, sans-serif; font-size: x-small; padding: 10px; font-weight: bold; letter-spacing: .2em; text-align:center;} .entry {font-family: verdana, arial, sans-serif; font-size: x-small; text-decoration: none; padding:10px;} .menu {font-family: verdana, arial, sans-serif; font-size: medium; letter-spacing: .2em; padding: 10px; font-weight: bold; } .menu a:link{ text-decoration: none; color: #FFF; } .menu a:visited { text-decoration: none; color: #FFF; } .menu a:active { text-decoration: none; color: #FFF; } .menu a:hover { text-decoration: underline; color: #FFF; } </style> <title>me and my big mouth</title> <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> <div id="content"> <div class="title">%%date%% · %%short_description%%</div> <div class="entry">%%entry%%</div> <div class="title"><a href="%%prev%%">before</a> · <a href="%%next%%">after</a></div></div> <div id="links"> <div class="menu"> <a href="/index.html">new</a><br> <a href="/older.html">old</a> <a href="http://%%username%%.signmyguestbook.com">sign</a><br> <a href="http://design.lookingatstars.com">design</a><br> <a href="http://www.diaryland.com">host </a></div></div> </body> </html>

How your older.html page will look
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <style type="text/css"> body { margin:0px 0px 0px 0px; background:#966; background: #966 url("http://design.lookingatstars.com/archives/tongueout.gif"); background-repeat: no-repeat; background-position: 0,0; } a:link { text-decoration: none; color: #C69; } a:visited { text-decoration: none; color: #C69; } a:active { text-decoration: none; color: #C69; } a:hover { text-decoration: underline; color: #C69; } #content { position:absolute; top: 200px; left: 250px; width: 337px; min-height:500px;; background:#FFF; color: #966; padding:15px; } #links { float: right; width: 40px; } .title {font-family: verdana, times new roman, sans-serif; font-size: x-small; padding: 10px; font-weight: bold; letter-spacing: .2em; text-align:center;} .entry {font-family: verdana, arial, sans-serif; font-size: x-small; text-decoration: none; padding:10px;} .menu {font-family: verdana, arial, sans-serif; font-size: medium; letter-spacing: .2em; padding: 10px; font-weight: bold; } .menu a:link{ text-decoration: none; color: #FFF; } .menu a:visited { text-decoration: none; color: #FFF; } .menu a:active { text-decoration: none; color: #FFF; } .menu a:hover { text-decoration: underline; color: #FFF; } </style> <title>me and my big mouth</title> <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> <div id="content"> <div class="entry">%%older_entries%%</div> <div id="links"> <div class="menu"> <a href="/index.html">new</a><br> <a href="/older.html">old</a> <a href="http://%%username%%.signmyguestbook.com">sign</a><br> <a href="http://design.lookingatstars.com">design</a><br> <a href="http://www.diaryland.com">host </a></div></div> </body> </html>

How each entry on your older.html page looks
%%date%% - <A HREF="%%page_name%%">%%short_description%%</A><BR />

Posted by hilary at 05:21 PM | Permalink | Comments (19) | TrackBacks (0)

Making It Up

The theme here is pale girly purpliness.

How Your Entry Pages Will Look

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>making it up</title>
<style type="text/css">
Body	{
	background:#FFF;
	margin:0;
	background-image:url(http://design.lookingatstars.com/archives/mascara.gif);
background-repeat:no-repeat;
	}

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

#menu	{
		position:absolute; 			left:0px; top:250px;
		margin-right:20px;
		margin-left:20px;
		margin-bottom:20px;
		text-align:center;
		font-family:arial sans-serif;
		font-size:small;
		}

#content {
		position:absolute;
		left:300px;
		top:0px;
		bottom:0px;
		background:#FFF;
		width:400px;
		min-height:200%;
		border-left:4px solid #999;
		border-right:4px solid #999;
		padding:15px;
		}
.title	{	
		font-family: impact, arial, sans-serif;
		font-size: small;
	 	color: #999;
		padding:15px;
		}

.entry	{	
		font-family: arial, sans-serif;
		font-size: x-small;
		color: #999;
		font-weight:normal;
		padding:15px;
		}

</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>
<div id="menu"><div class="title">
<a href="/index.html">new</a><br />
<a href="/older.html">old</a><br />
<a 
href="http://%%username%%.signmyguestbook.com">book</a><br /><a href="http://design.lookingatstars.com">design</a><br />
<a href="http://diaryland.com">host</a><br /></div></div>
<div id="content">
   <div class="title">%%short_description%% * %%date%%</div>
<div class="entry">%%entry%%</div>
<div class="title"><A HREF="%%prev%%">previous</A> * <A HREF="%%next%%">next</A></div>
</div>

</body>
</html>

How your older.html page will look

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>making it up</title>
<style type="text/css">
Body	{
	background:#FFF;
	margin:0;
	background-image:url(http://design.lookingatstars.com/archives/mascara.gif);
background-repeat:no-repeat;
	}

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

#menu	{
		position:absolute; 			left:0px; top:250px;
		margin-right:20px;
		margin-left:20px;
		margin-bottom:20px;
		text-align:center;
		font-family:arial sans-serif;
		font-size:small;
		}

#content {
		position:absolute;
		left:300px;
		top:0px;
		bottom:0px;
		background:#FFF;
		width:400px;
		height:200%;
		border-left:4px solid #999;
		border-right:4px solid #999;
		padding:15px;
		}
.title	{	
		font-family: impact, arial, sans-serif;
		font-size: small;
	 	color: #999;
		padding:15px;
		}

.entry	{	
		font-family: arial, sans-serif;
		font-size: x-small;
		color: #999;
		font-weight:normal;
		padding:15px;
		}

</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>
<div id="menu"><div class="title">
<a href="/index.html">new</a><br />
<a href="/older.html">old</a><br />
<a 
href="http://%%username%%.signmyguestbook.com">book</a><br /><a href="http://design.lookingatstars.com">design</a><br />
<a href="http://diaryland.com">host</a><br /></div></div>
<div id="content"><div class="entry">%%older_entries%%</div>
</div>

</body>
</html>

How each entry on your older.html page will look

I would prefer if you downloaded this image onto your own server. Do so by rightclicking on the words "this image" and choosing "Save Target As." Then save it somewhere on your desktop. If you do not have Diaryland Gold membership, you should upload it onto an image host. Then replace the text http://design.lookingatstars.com/archives/mascara.gif (it appears once in the entry page code, and once in the archives page code) with the URL address of the image (the address will be provided by the image host once you upload the image. Don't forget to include http://). For more info, see 'Installing Diaryland Templates.'

Posted by hilary at 04:44 PM | Permalink | Comments (12) | TrackBacks (0)

Palm Tree Musings

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

August 21, 2003

Sunflower Design

August 18, 2003

Dreams Left on the Windowsill

August 13, 2003

Glamour-o-rama

July 30, 2003

Places to Go

July 29, 2003

Me and My Big Mouth

July 24, 2003

Making It Up

July 23, 2003

Palm Tree Musings