the design blog: Diaryland Archives

Twiggy

Proving that occasionally I do respond to the requests of my readers, I designed this Twiggy design just for y'all. (Please note this picture is 600X800. This will look slightly different at a bigger resolution and likely Twiggy's foot will not be covered.) (Please note, I notice that some people are using this for sites promoting anorexia. Anorexia is a disease that can cause serious health problems, including serious brain damage and death. If you are suffering from this devastating disease, please visit Anad.org (U.S.) or NEDIC (Canada). I wish you all the best and hope you can find help.)

How your entry pages will look
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>twiggy</title> <style type="text/css"> body { background-image: url(http://design.lookingatstars.com/archives/twiggy.gif); background-position: top right; background-color:#FFF; background-repeat:no-repeat; margin:0px; text-align:center; } a:link {text-decoration: none; color: #F9F;} a:visited {text-decoration: none; color: #F9F;} a:active {text-decoration: none; color: #F9F;} a:hover {text-decoration: underline; color: #F9F;} #content { width:400px; margin:20px; padding:10px; float:left; border:2px solid #999; background:#FFF; } #menu { float:right; width:120px; font-family: georgia, times new roman, serif; font-size: medium; padding:5px; font-weight:bold; margin-top:5px; } .title { font-family: georgia, times new roman, serif; font-size: medium; color: #999; font-weight:bold; margin-top:5px; margin-bottom:5px; } .entry { font-family: georgia, times new roman, serif; font-size: x-small; color: #999; font-weight:normal; text-align:left; line-height:140%; } </style> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> </head> <body> <div id="content"> <div class="entry"> <div class="title">%%date%% : %%short_description%%</div> %%entry%% <center><div class="title"><A HREF="%%prev%%">last</A> * <A HREF="%%next%%">next</A></center> </div></div> <div id="menu"> <a href="/index.html">mod</a><br /><a href="/older.html">retro</a><br /><a href="http://%%username%%.signmyguestbook.com">g-book</a><br /><a target="_blank" href="http://design.lookingatstars.com">designer</a><br /><a target="_blank" href="http://diaryland.com">host</a><br />  </div> </body> </html>

How your older.html page will look
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>twiggy</title> <style type="text/css"> body { background-image: url(http://design.lookingatstars.com/archives/twiggy.gif); background-position: top right; background-color:#FFF; background-repeat:no-repeat; margin:0px; text-align:center; } a:link {text-decoration: none; color: #F9F;} a:visited {text-decoration: none; color: #F9F;} a:active {text-decoration: none; color: #F9F;} a:hover {text-decoration: underline; color: #F9F;} #content { width:400px; margin:20px; padding:10px; float:left; border:2px solid #999; background:#FFF; } #menu { float:right; width:120px; font-family: georgia, times new roman, serif; font-size: medium; padding:5px; font-weight:bold; margin-top:5px; } .title { font-family: georgia, times new roman, serif; font-size: medium; color: #999; font-weight:bold; margin-top:5px; margin-bottom:5px; } .entry { font-family: georgia, times new roman, serif; font-size: x-small; color: #999; font-weight:normal; text-align:left; line-height:140%; } </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%%<br /> </div></div> <div id="menu"> <a href="/index.html">mod</a><br /><a href="/older.html">retro</a><br /><a href="http://%%username%%.signmyguestbook.com">g-book</a><br /><a target="_blank" href="http://design.lookingatstars.com">designer</a><br /><a target="_blank" href="http://diaryland.com">host</a><br />  </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 06:02 PM | Permalink | Comments (19) | TrackBacks (0)

Girl Power

Someone requested this design of me and I really liked the idea for a couple of reasons - I like that it's a strong, photo of a Latina woman. But it took me a while to find a version of this photo that could be edited the way I needed it to be.

How your entry pages will look
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>girl power</title> <style type="text/css"> body { background-image: url(http://design.lookingatstars.com/archives/rodriguez.gif); background-position: top left; background-color:#000; background-repeat:no-repeat; margin:0px; } a:link {text-decoration: none; color: #C00;} a:visited {text-decoration: none; color: #C00;} a:active {text-decoration: none; color: #C00;} a:hover {text-decoration: underline; color: #396;} #menu { float:left; width:120px; font-size:small; margin-top:250px; margin-left:180px; padding:5px; } #content { float:right; width:400px; margin:20px; padding:20px; border: 2px double #c00; background:#000; } .title { font-family: trebuchet ms, verdana, arial, sans-serif; font-size: small; color: #999; font-weight:bold; margin-top:5px; margin-bottom:5px; } .entry { font-family: verdana, arial, sans-serif; font-size: xx-small; color: #999; font-weight:normal; text-align:left; line-height:140%; } </style> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> </head> <body> <div id="menu"> <div class="title"> <a href="/index.html">today's fight</a><br /><a href="/older.html">past rounds</a><br /><a href="http://%%username%%.signmyguestbook.com">bookie</a><br /><a target="_blank" href="http://design.lookingatstars.com">promoter</a><br /><a target="_blank" href="http://diaryland.com">arena</a><br />  </div></div> <div id="content"> <div class="title">%%date%% : %%short_description%%</div> <div class="entry">%%entry%%</div> <center><div class="title"><A HREF="%%prev%%">last</A> * <A HREF="%%next%%">next</A> </center></div></div> </body> </html>

How your older.html page will look
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>girl power</title> <style type="text/css"> body { background-image: url(http://design.lookingatstars.com/archives/rodriguez.gif); background-position: top left; background-color:#000; background-repeat:no-repeat; margin:0px; } a:link {text-decoration: none; color: #C00;} a:visited {text-decoration: none; color: #C00;} a:active {text-decoration: none; color: #C00;} a:hover {text-decoration: underline; color: #396;} #menu { float:left; width:120px; font-size:small; margin-top:250px; margin-left:180px; padding:5px; } #content { float:right; width:400px; margin:20px; padding:20px; border: 2px double #c00; background:#000; } .title { font-family: trebuchet ms, verdana, arial, sans-serif; font-size: small; color: #999; font-weight:bold; margin-top:5px; margin-bottom:5px; } .entry { font-family: verdana, arial, sans-serif; font-size: xx-small; color: #999; font-weight:normal; text-align:left; line-height:140%; } </style> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> </head> <body> <div id="menu"> <div class="title"> <a href="/index.html">today's fight</a><br /><a href="/older.html">past rounds</a><br /><a href="http://%%username%%.signmyguestbook.com">bookie</a><br /><a target="_blank" href="http://design.lookingatstars.com">promoter</a><br /><a target="_blank" href="http://diaryland.com">arena</a><br />  </div></div> <div id="content"> <div class="title">Archives</div> <div class="entry">%%older_entries%%</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 10:30 PM | Permalink | Comments (6) | TrackBacks (0)

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

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)

Monroe Diaries

I am very excited about this uber-sexy, seamless, Marilyn Monroe design. For all those who are as (or perhaps even more) obsessed with Marilyn than I am. As usual the screenshot was taken in 1024x758 but this design looks great in 800x600 screen resolution too.

Also, I usually shy away from cutsie alterations on the typical links to guestbook, archives, etc. But in this case I think it works.

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:#000 url("http://design.lookingatstars.com/archives/monroe.gif"); background-repeat: no-repeat; background-attachment: scroll; background-position: 0px 0px; } a:link { text-decoration: none; color: #CCC; } a:visited { text-decoration: none; color: #CCC; } a:active { text-decoration: none; color: #CCC; } a:hover { text-decoration: none; color: #CCC; } #content { width: "65%"; float: right; padding:15px; margin-top:20px;} .title {font-family: georgia, palatino, serif, serif; font-size: small; padding: 10px; text-decoration:italic; text-align:left; color:#FFF;} .entry {font-family: georgia, palatino, serif; font-size: small; text-decoration: none; padding:20px; color:#FFF;} .menu {font-family: georgia, palatino, sans-serif; font-size: xx-small; padding: 15px; color:FFF; text-align:center;} </style> <title>monroe diary</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="menu"><font color="white"> <a href="/index.html">now filming</a> · <a href="/older.html">filmography</a><font-color="white">· <a href="http://%%username%%.signmyguestbook.com">autographs</a> · <a target="_blank" href="http://design.lookingatstars.com">art direction</a> · <a href="http://www.diaryland.com">studio </a></font></div> <div class="title">%%date%% · %%short_description%%</div> <div class="entry">%%entry%%</div> <center><div class="title"><a href="%%prev%%">-</a> · <a href="%%next%%">+</a></div></center></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:#000 url("http://design.lookingatstars.com/archives/monroe.gif"); background-repeat: no-repeat; background-attachment: scroll; background-position: 0px 0px; } a:link { text-decoration: none; color: #CCC; } a:visited { text-decoration: none; color: #CCC; } a:active { text-decoration: none; color: #CCC; } a:hover { text-decoration: none; color: #CCC; } #content { width: "65%"; float: right; padding:15px; margin-top:20px;} .title {font-family: georgia, palatino, serif, serif; font-size: small; padding: 10px; text-decoration:italic; text-align:left; color:#FFF;} .entry {font-family: georgia, palatino, serif; font-size: small; text-decoration: none; padding:20px; color:#FFF;} .menu {font-family: georgia, palatino, sans-serif; font-size: xx-small; padding: 15px; color:FFF; text-align:center;} </style> <title>monroe diary</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="menu"><font color="white"> <a href="/index.html">now filming</a> · <a href="/older.html">filmography</a><font-color="white">· <a href="http://%%username%%.signmyguestbook.com">autographs</a> · <a target="_blank" href="http://design.lookingatstars.com">art direction</a> · <a href="http://www.diaryland.com">studio </a></font></div> <div class="entry">%%older_entries%%</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 08:36 AM | Permalink | Comments (5) | TrackBacks (0)

Mama To Be

This simple B&W design is perfect for Mamas to be, those who are pregnant, or trying to be so! This is the image you should try to download on your own server if you can. Remember to read through the administrative page before so that you understand how to properly install these 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:#000 url("http://design.lookingatstars.com/archives/pregnancy.gif"); background-repeat: no-repeat; background-attachment: scroll; background-position: 0px 60px; } a:link { text-decoration: none; color: #CCC; } a:visited { text-decoration: none; color: #CCC; } a:active { text-decoration: none; color: #CCC; } a:hover { text-decoration: none; color: #CCC; } #content { width: "65%"; float: right; padding:15px; margin-top: 65px;} #links { float: left; width: "35%"; float: right; background: #000; color:#FFF; } .title {font-family: courier new, andale mono, serif; font-size: medium; padding: 10px; font-weight: bold; text-align:left; color:#FFF;} .entry {font-family: arial, sans-serif; font-size: x-small; text-decoration: none; padding:20px; background:#FFF;} .menu {font-family: courier new, andale mono, serif; font-size: medium; padding: 15px; font-weight: bold; color:000; .menu a {a:link text-decoration: none; color: #FFF; } a:visited { text-decoration: none; color: #FFF; } a:active { text-decoration: none; color: #FFF; } a:hover { text-decoration: underline; color: #FFF; } </style> <title>mama to be</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">now</a><br> <a href="/older.html">then</a><br /> <a href="http://%%username%%.signmyguestbook.com">book</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:#000 url("http://design.lookingatstars.com/archives/pregnancy.gif"); background-repeat: no-repeat; background-attachment: scroll; background-position: 0px 60px; } a:link { text-decoration: none; color: #CCC; } a:visited { text-decoration: none; color: #CCC; } a:active { text-decoration: none; color: #CCC; } a:hover { text-decoration: none; color: #CCC; } #content { width: "65%"; float: right; padding:15px; margin-top: 65px;} #links { float: left; width: "35%"; float: right; background: #000; color:#FFF; } .title {font-family: courier new, andale mono, serif; font-size: medium; padding: 10px; font-weight: bold; text-align:left; color:#FFF;} .entry {font-family: arial, sans-serif; font-size: x-small; text-decoration: none; padding:20px; background:#FFF;} .menu {font-family: courier new, andale mono, serif; font-size: medium; padding: 15px; font-weight: bold; color:000; .menu a {a:link text-decoration: none; color: #FFF; } a:visited { text-decoration: none; color: #FFF; } a:active { text-decoration: none; color: #FFF; } a:hover { text-decoration: underline; color: #FFF; } </style> <title>mama to be</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">My Archives</div> <div class="entry">%%older_entries%%</div></div> <div id="links"> <div class="menu"> <a href="/index.html">now</a><br> <a href="/older.html">then</a><br /> <a href="http://%%username%%.signmyguestbook.com">book</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 04:47 PM | Permalink | Comments (2) | 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.

February 03, 2004

Twiggy

November 24, 2003

Girl Power

November 21, 2003

'Tis the Season

August 13, 2003

Glamour-o-rama

August 11, 2003

Monroe Diaries

August 08, 2003

Mama To Be

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