17 July 2004

Hello! This is what this design will look like. A very simple one, with a grayish blue stripe. This took me ages to do, mainly because I was so indecisive about how it should go. It was inspired by the stripey layouts I did a while ago and a diary I saw somewhere on diaryland, which had a plainish layout with just a stripe along the top, and dotted borders round the entry box and stuff like that. This one was much more "liney" when it started, but it was gradually whittled down to just the one. 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>%%date%%</title>
  <style type="text/css">
   body{
    background-color:#000000;
    background-image:url(http://www.sitefights.com/community/graphics/pinkfreak2//sblue.gif);
    background-repeat:repeat-x;}
   .entry{
    position:absolute;
    top:140px;
    right:30px;
    width:400px;
    padding:0px 0px 30px 0px;
    font:11px 'Verdana';
    line-height:19px;
    text-align:justify;
    color:#8793B2;}
   .title{
    position:absolute;
    top:82px;
    right:25px;
    padding:0px;}
   .nav{
    position:absolute;
    top:140px;
    right:460px;
    width:120px;
    padding:0px 0px 30px 0px;
    font:11px 'Verdana';
    line-height:19px;
    text-align:right;
    color:#667294;}
   .nav a:link{
    color:#667294;
    background-color:#000000;
    text-decoration:none;}
   .nav a:visited{
    color:#667294;
    background-color:#000000;
    text-decoration:none;}
   .nav a:hover{
    color:#8793B2;
    background-color:#000000;
    text-decoration:none;}
   a:link{
    color:#000000;
    background-color:#667294;
    text-decoration:none;
    padding:1px;}
   a:visited{
    color:#000000;
    background-color:#667294;
    text-decoration:none;
    padding:1px;}
   a:hover{
    color:#8793B2;
    background-color:#000000;
    text-decoration:none;
    padding:1px;}
   a:active{
    color:#8793B2;
    background-color:#000000;
    text-decoration:none;
    padding:1px;}
   blockquote{
    margin:20px;
    padding:10px;
    color:#000000;
    background-color:#667294;}
   input,textarea{
    font:11px 'Verdana';
    color:#000000;
    background-color:#667294;
    border:5px solid #667294;}
   textarea{
    line-height:15px;
    scrollbar-arrow-color:#000000;
    scrollbar-face-color:#667294;
    scrollbar-highlight-color:#667294;
    scrollbar-shadow-color:#667294;
    scrollbar-3dlight-color:#000000;
    scrollbar-darkshadow-color:#000000;
    scrollbar-track-color:#667294;}
   hr{
    height:3px;
    color:#667294;}
   b,i,strong,em,u{
    color:#667294;}
   h1{
    margin:0px;
    padding:5px 5px 5px 0px;
    font:24px 'Trebuchet MS';
    font-weight:bold;
    line-height:20px;
    text-align:right;
    color:#000000;
    background-color:#667294;}
   h2{
    margin:0px 0px 10px 0px;
    font:16px 'Trebuchet MS';
    font-weight:bold;
    line-height:20px;
    text-align:left;
    text-transform:uppercase;
    color:#667294;}
   h3{
    margin:0px 0px 10px 0px;
    font:16px 'Trebuchet MS';
    font-weight:bold;
    line-height:20px;
    text-align:left;
    color:#667294;}
   h4{
    margin:0px 0px 10px 0px;
    font:13px 'Trebuchet MS';
    font-weight:bold;
    line-height:20px;
    text-align:left;
    color:#667294;}
   h5{
    margin:0px 0px 10px 0px;
    padding:0px 3px 0px 0px;
    font:16px 'Trebuchet MS';
    font-weight:bold;
    line-height:20px;
    text-align:right;
    text-transform:uppercase;
    color:#000000;
    background-color:#667294;}
   h6{
    margin:0px 0px 10px 0px;
    font:13px 'Trebuchet MS';
    font-weight:bold;
    line-height:18px;
    text-align:right;
    color:#667294;}
  </style>
 </head>
 <body>
  <div class="title">
   <h1>%%short_description%%</h1>
  </div>
  <div class="entry">
   %%entry%%
  </div>
  <div class="nav">
   <h5>
    diary
   </h5>
    <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 />
   <h5>
    contact
   </h5>
    <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 />
   <h5>
    credit
   </h5>
    <a href="http://pink-design.diaryland.com" target="_blank">design</a>
     <br />
    <a href="http://www.diaryland.com" target="_blank">host</a>
     <br /><br />
    <h5>
     extra
    </h5>
     imood
      <br />
     counter
      <br />
     etc.
  </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:#000000;
    background-image:url(http://www.sitefights.com/community/graphics/pinkfreak2//sblue.gif);
    background-repeat:repeat-x;}
   .entry{
    position:absolute;
    top:140px;
    right:30px;
    width:400px;
    padding:0px 0px 30px 0px;
    font:11px 'Verdana';
    line-height:19px;
    text-align:justify;
    color:#8793B2;}
   .title{
    position:absolute;
    top:82px;
    right:25px;
    padding:0px;}
   .nav{
    position:absolute;
    top:140px;
    right:460px;
    width:120px;
    padding:0px 0px 30px 0px;
    font:11px 'Verdana';
    line-height:19px;
    text-align:right;
    color:#667294;}
   .nav a:link{
    color:#667294;
    background-color:#000000;
    text-decoration:none;}
   .nav a:visited{
    color:#667294;
    background-color:#000000;
    text-decoration:none;}
   .nav a:hover{
    color:#8793B2;
    background-color:#000000;
    text-decoration:none;}
   a:link{
    color:#000000;
    background-color:#667294;
    text-decoration:none;
    padding:1px;}
   a:visited{
    color:#000000;
    background-color:#667294;
    text-decoration:none;
    padding:1px;}
   a:hover{
    color:#8793B2;
    background-color:#000000;
    text-decoration:none;
    padding:1px;}
   a:active{
    color:#8793B2;
    background-color:#000000;
    text-decoration:none;
    padding:1px;}
   blockquote{
    margin:20px;
    padding:10px;
    color:#000000;
    background-color:#667294;}
   input,textarea{
    font:11px 'Verdana';
    color:#000000;
    background-color:#667294;
    border:5px solid #667294;}
   textarea{
    line-height:15px;
    scrollbar-arrow-color:#000000;
    scrollbar-face-color:#667294;
    scrollbar-highlight-color:#667294;
    scrollbar-shadow-color:#667294;
    scrollbar-3dlight-color:#000000;
    scrollbar-darkshadow-color:#000000;
    scrollbar-track-color:#667294;}
   hr{
    height:3px;
    color:#667294;}
   b,i,strong,em,u{
    color:#667294;}
   h1{
    margin:0px;
    padding:5px 5px 5px 0px;
    font:24px 'Trebuchet MS';
    font-weight:bold;
    line-height:20px;
    text-align:right;
    color:#000000;
    background-color:#667294;}
   h2{
    margin:0px 0px 10px 0px;
    font:16px 'Trebuchet MS';
    font-weight:bold;
    line-height:20px;
    text-align:left;
    text-transform:uppercase;
    color:#667294;}
   h3{
    margin:0px 0px 10px 0px;
    font:16px 'Trebuchet MS';
    font-weight:bold;
    line-height:20px;
    text-align:left;
    color:#667294;}
   h4{
    margin:0px 0px 10px 0px;
    font:13px 'Trebuchet MS';
    font-weight:bold;
    line-height:20px;
    text-align:left;
    color:#667294;}
   h5{
    margin:0px 0px 10px 0px;
    padding:0px 3px 0px 0px;
    font:16px 'Trebuchet MS';
    font-weight:bold;
    line-height:20px;
    text-align:right;
    text-transform:uppercase;
    color:#000000;
    background-color:#667294;}
   h6{
    margin:0px 0px 10px 0px;
    font:13px 'Trebuchet MS';
    font-weight:bold;
    line-height:18px;
    text-align:right;
    color:#667294;}
  </style>
 </head>
 <body>
  <div class="title">
   <h1>Archives</h1>
  </div>
  <div class="entry">
   older_entries
  </div>
  <div class="nav">
   <h5>
    diary
   </h5>
    <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 />
   <h5>
    contact
   </h5>
    <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 />
   <h5>
    credit
   </h5>
    <a href="http://pink-design.diaryland.com" target="_blank">design</a>
     <br />
    <a href="http://www.diaryland.com" target="_blank">host</a>
     <br /><br />
    <h5>
     extra
    </h5>
     imood
      <br />
     counter
      <br />
     etc.
  </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.

Simple Blue Stripe

diary

contact

credit

extra