Dear Diary, ~ 25 July 2004 at 2:12 pm

Hello! This is what this design will look like. It's quite simple to look at, but required a lot of coding! I really like it though. The beautiful font is Aquiline. You will need to change the USERNAME bits to your username, and the %%PREV%% and %%NEXT%% to lowercase.

To get the code for this entry, simply copy and paste the code below into your change my template area.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="en">
 <head><meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
  <title>%%short_description%% ~ %%date%% at %%time%%</title>
  <style type="text/css">
   body{
    background-color:#82A73E;}
   .container1{
    position:relative;
    width:680px;}
   .container2{
    position:relative;
    float:left;
    width:450px;}
   .container3{
    position:relative;
    float:right;
    width:200px;
    text-align:center;}
   .entry{
    width:440px;
    font:11px 'Trebuchet MS';
    line-height:17px;
    text-align:left;
    color:#597524;}
   .nav{
    width:200px;
    font:11px 'Trebuchet MS';
    line-height:17px;
    text-align:center;
    color:#597524;}
   .top1{
    position:relative;
    width:450px;
    height:221px;
    background-image:url(http://www.sitefights.com/community/graphics/pinkfreak2//ga-top1.gif);
    background-repeat:no-repeat;}
   .bottom1{
    position:relative;
    width:450px;
    height:197px;
    background-image:url(http://www.sitefights.com/community/graphics/pinkfreak2//ga-bottom1.gif);
    background-repeat:no-repeat;}
   .top2{
    position:relative;
    width:200px;
    height:172px;
    background-image:url(http://www.sitefights.com/community/graphics/pinkfreak2//ga-top2.gif);
    background-repeat:no-repeat;}
   .bottom2{
    position:relative;
    width:200px;
    height:130px;
    background-image:url(http://www.sitefights.com/community/graphics/pinkfreak2//ga-bottom2.gif);
    background-repeat:no-repeat;}
   a:link{
    color:#6D8B33;
    text-decoration:none;}
   a:visited{
    color:#6D8B33;
    text-decoration:none;}
   a:hover{
    color:#BFD74B;
    text-decoration:none;}
   a:active{
    color:#BFD74B;
    text-decoration:none;}
   b,i,u,strong,em{
    color:#BFD74B;}
   hr{
    height:1px;
    color:#6D8B33;}
   blockquote{
    margin:20px;
    padding:10px;
    color:#BFD74B;
    background-color:#6D8B33;
    border:1px solid #597524;}
   input,textarea{
    font:11px 'Trebuchet MS';
    color:#BFD74B;
    background-color:#6D8B33;
    border:1px solid #597524;}
   h1{
    margin:0px;
    font-size:20px;
    font-weight:bold;
    line-height:26px;
    text-align:left;
    color:#597524;}
   h2{
    margin:0px;
    font-size:16px;
    font-weight:bold;
    line-height:22px;
    text-align:left;
    color:#597524;}
   h3{
    margin:0px;
    font-size:13px;
    font-weight:bold;
    line-height:19px;
    text-align:left;
    color:#597524;}
   h4{
    margin:0px;
    font-size:20px;
    font-weight:bold;
    line-height:26px;
    text-align:right;
    color:#597524;}
   h5{
    margin:0px;
    font-size:16px;
    font-weight:bold;
    line-height:22px;
    text-align:right;
    color:#597524;}
   h6{
    margin:0px;
    font-size:13px;
    font-weight:bold;
    line-height:19px;
    text-align:right;
    color:#597524;}
  </style>
 </head>
 <body>
  <center>
  <div class="container1">
  <div class="container2">
  <div class="top1"></div>
  <div class="entry">
   %%entry%%
  </div>
  <div class="bottom1"></div>
  </div>
  <div class="container3">
  <div class="top2"></div>
  <div class="nav">
    <a href="%%PREV%%">last</a>
     <br />
    <a href="%%NEXT%%">next</a>
     <br />
    <a href="index.html">newest</a>
     <br />
    <a href="older.html">archives</a>
     <br />
    <a href="http://members.diaryland.com/edit/profile.phtml?user=USERNAME">profile</a>
     <br />
    <a href="cast.html">cast</a>
     <br />
    <a href="pictures.html">pictures</a>
     <br />
    <a href="links.html">links</a>
     <br /><br />
   <img src="http://www.sitefights.com/community/graphics/pinkfreak2//ga-nav-contact.gif" alt="contact" />
    <a href="http://members.diaryland.com/edit/notes.phtml?user=USERNAME">notes</a>
     <br />
    <a href="http://USERNAME.signmyguestbook.com">g-book</a>
     <br />
    <a href="mailto:USERNAME@NOSPAMdiaryland.com">email</a>
     <br /><br />
   <img src="http://www.sitefights.com/community/graphics/pinkfreak2//ga-nav-credit.gif" alt="credit" />
    <a href="http://pink-design.diaryland.com" target="_blank">design</a>
     <br />
    <a href="http://www.diaryland.com" target="_blank">host</a>
     <br /><br />
   <img src="http://www.sitefights.com/community/graphics/pinkfreak2//ga-nav-extra.gif" alt="extra" />
    imood
     <br />
    counter
     <br />
    etc.
  </div>
  <div class="bottom2"></div>
  </div>
  </div>
  </div>
 </body>
</html>

To make your older entries page match, paste this code into your change your archive page area.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="en">
 <head><meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
  <title>Archives</title>
  <style type="text/css">
   body{
    background-color:#82A73E;}
   .container1{
    position:relative;
    width:680px;}
   .container2{
    position:relative;
    float:left;
    width:450px;}
   .container3{
    position:relative;
    float:right;
    width:200px;
    text-align:center;}
   .entry{
    width:440px;
    font:11px 'Trebuchet MS';
    line-height:17px;
    text-align:left;
    color:#597524;}
   .nav{
    width:200px;
    font:11px 'Trebuchet MS';
    line-height:17px;
    text-align:center;
    color:#597524;}
   .top1{
    position:relative;
    width:450px;
    height:221px;
    background-image:url(http://www.sitefights.com/community/graphics/pinkfreak2//ga-top1.gif);
    background-repeat:no-repeat;}
   .bottom1{
    position:relative;
    width:450px;
    height:197px;
    background-image:url(http://www.sitefights.com/community/graphics/pinkfreak2//ga-bottom1.gif);
    background-repeat:no-repeat;}
   .top2{
    position:relative;
    width:200px;
    height:172px;
    background-image:url(http://www.sitefights.com/community/graphics/pinkfreak2//ga-top2.gif);
    background-repeat:no-repeat;}
   .bottom2{
    position:relative;
    width:200px;
    height:130px;
    background-image:url(http://www.sitefights.com/community/graphics/pinkfreak2//ga-bottom2.gif);
    background-repeat:no-repeat;}
   a:link{
    color:#6D8B33;
    text-decoration:none;}
   a:visited{
    color:#6D8B33;
    text-decoration:none;}
   a:hover{
    color:#BFD74B;
    text-decoration:none;}
   a:active{
    color:#BFD74B;
    text-decoration:none;}
   b,i,u,strong,em{
    color:#BFD74B;}
   hr{
    height:1px;
    color:#6D8B33;}
   blockquote{
    margin:20px;
    padding:10px;
    color:#BFD74B;
    background-color:#6D8B33;
    border:1px solid #597524;}
   input,textarea{
    font:11px 'Trebuchet MS';
    color:#BFD74B;
    background-color:#6D8B33;
    border:1px solid #597524;}
   h1{
    margin:0px;
    font-size:20px;
    font-weight:bold;
    line-height:26px;
    text-align:left;
    color:#597524;}
   h2{
    margin:0px;
    font-size:16px;
    font-weight:bold;
    line-height:22px;
    text-align:left;
    color:#597524;}
   h3{
    margin:0px;
    font-size:13px;
    font-weight:bold;
    line-height:19px;
    text-align:left;
    color:#597524;}
   h4{
    margin:0px;
    font-size:20px;
    font-weight:bold;
    line-height:26px;
    text-align:right;
    color:#597524;}
   h5{
    margin:0px;
    font-size:16px;
    font-weight:bold;
    line-height:22px;
    text-align:right;
    color:#597524;}
   h6{
    margin:0px;
    font-size:13px;
    font-weight:bold;
    line-height:19px;
    text-align:right;
    color:#597524;}
  </style>
 </head>
 <body>
  <center>
  <div class="container1">
  <div class="container2">
  <div class="top1"></div>
  <div class="entry">
   %%older_entries%%
  </div>
  <div class="bottom1"></div>
  </div>
  <div class="container3">
  <div class="top2"></div>
  <div class="nav">
    <a href="index.html">newest</a>
     <br />
    <a href="older.html">archives</a>
     <br />
    <a href="http://members.diaryland.com/edit/profile.phtml?user=USERNAME">profile</a>
     <br />
    <a href="cast.html">cast</a>
     <br />
    <a href="pictures.html">pictures</a>
     <br />
    <a href="links.html">links</a>
     <br /><br />
   <img src="http://www.sitefights.com/community/graphics/pinkfreak2//ga-nav-contact.gif" alt="contact" />
    <a href="http://members.diaryland.com/edit/notes.phtml?user=USERNAME">notes</a>
     <br />
    <a href="http://USERNAME.signmyguestbook.com">g-book</a>
     <br />
    <a href="mailto:USERNAME@NOSPAMdiaryland.com">email</a>
     <br /><br />
   <img src="http://www.sitefights.com/community/graphics/pinkfreak2//ga-nav-credit.gif" alt="credit" />
    <a href="http://pink-design.diaryland.com" target="_blank">design</a>
     <br />
    <a href="http://www.diaryland.com" target="_blank">host</a>
     <br /><br />
   <img src="http://www.sitefights.com/community/graphics/pinkfreak2//ga-nav-extra.gif" alt="extra" />
    imood
     <br />
    counter
     <br />
    etc.
  </div>
  <div class="bottom2"></div>
  </div>
  </div>
  </div>
 </body>
</html>

And paste this code into your change how each page on your older.html page looks area.

If you need any help or anything doesn't work for you, check out the FAQ/Help page or just email me and I'll do my best to help out.

last
next
updates
templates
about
links

email
notes

design
host

imood
counter
etc.