You will have to upload some images into your /images folder. Open up an FTP client and drag the images in the /images folder from this download into your /images folder on your website. This folder will be located in the same directory as your /textpattern folder.


1.gif


Open up the Textpattern admin page. Click on presentation.


2.gif


Copy and paste the following into the textarea:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

 <meta http-equiv="content-type" content="text/html; charset=utf-8" />

 <link rel="stylesheet" href="<txp:css />" type="text/css" media="screen" />

 <title><txp:page_title /></title>

</head>

<body>


<!-- head -->

<div id="head">

  <h1><txp:link_to_home><txp:sitename /></txp:link_to_home></h1>

  <h2><txp:site_slogan /></h2>

</div>


<div id="container">


<!-- right -->

<div id="right">

  <h1>Search</h1>

  <txp:search_input label="" wraptag="p" size="" />

  <h1>Categories</h1>

  <txp:category_list wraptag="p" />

  <h1>Links</h1>

  <txp:linklist form="Links" wraptag="div" />

  <h1>Feeds</h1>

    <p>

      <txp:feed_link label="RSS" /><br />

      <txp:feed_link label="Atom" flavor="atom" />

    </p>

</div>


<!-- left -->

<div id="left">

  <txp:article limit="5" />

  <txp:if_individual_article>

    <p id="navigation">

      <txp:link_to_prev>

        &lt;&lt;

      </txp:link_to_prev>

      |

      <txp:link_to_next>

        &gt;&gt;

      </txp:link_to_next>

    </p>

  </txp:if_individual_article>

  <txp:if_article_list>

    <p id="navigation">

      <txp:older>

        &lt;&lt;

      </txp:older>

      |

      <txp:newer>

        &gt;&gt;

      </txp:newer>

    </p>

  </txp:if_article_list>

</div>


<br style="clear: both;" />

</div>


<!-- footer -->

<div id="foot">

  <p>

    Copyright &copy; <?php $date=date(Y); echo("$date"); ?> <txp:sitename />. All rights reserved. Powered by <a href="http://www.textpattern.com">Textpattern</a>. Core template by Angelo Ashmore. <a href="http://validator.w3.org/check?uri=referer" title="This page is NOT valid XHTML 1.1 when viewing/posting comments">XHTML 1.1</a>, <a href="http://jigsaw.w3.org/css-validator/check/referer">CSS</a>.

  </p>

</div>


</body>

</html>


3.gif


Click on archive. Copy and paste the following in the textarea:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

 <meta http-equiv="content-type" content="text/html; charset=utf-8" />

 <link rel="stylesheet" href="<txp:css />" type="text/css" media="screen" />

 <title><txp:page_title /></title>

</head>

<body>


<!-- head -->

<div id="head">

  <h1><txp:link_to_home><txp:sitename /></txp:link_to_home></h1>

  <h2><txp:site_slogan /></h2>

</div>


<div id="container">


<!-- right -->

<div id="right">

  <h1>Search</h1>

  <txp:search_input label="" wraptag="p" size="" />

  <h1>Categories</h1>

  <txp:category_list wraptag="p" />

  <h1>Links</h1>

  <txp:linklist form="Links" wraptag="div" />

  <h1>Feeds</h1>

    <p>

      <txp:feed_link label="RSS" /><br />

      <txp:feed_link label="Atom" flavor="atom" />

    </p>

</div>


<!-- left -->

<div id="left">

  <txp:article limit="5" />

  <txp:if_individual_article>

    <p id="navigation">

      <txp:link_to_prev>

        &lt;&lt;

      </txp:link_to_prev>

      |

      <txp:link_to_next>

        &gt;&gt;

      </txp:link_to_next>

    </p>

  </txp:if_individual_article>

  <txp:if_article_list>

    <p id="navigation">

      <txp:older>

        &lt;&lt;

      </txp:older>

      |

      <txp:newer>

        &gt;&gt;

      </txp:newer>

    </p>

  </txp:if_article_list>

</div>


<br style="clear: both;" />

</div>


<!-- footer -->

<div id="foot">

  <p>

    Copyright &copy; <?php $date=date(Y); echo("$date"); ?> <txp:sitename />. All rights reserved. Powered by <a href="http://www.textpattern.com">Textpattern</a>. Core template by Angelo Ashmore. <a href="http://validator.w3.org/check?uri=referer" title="This page is NOT valid XHTML 1.1 when viewing/posting comments">XHTML 1.1</a>, <a href="http://jigsaw.w3.org/css-validator/check/referer">CSS</a>.

  </p>

</div>


</body>

</html>


4.gif


Click on error_default. Copy and paste the following into the textarea:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

 <meta http-equiv="content-type" content="text/html; charset=utf-8" />

 <link rel="stylesheet" href="http://core.studiopd.com/textpattern/css.php?s=default" type="text/css" media="screen" />

 <title><txp:page_title /></title>

</head>

<body>


<!-- head -->

<div id="head">

  <h1><txp:link_to_home><txp:sitename /></txp:link_to_home></h1>

  <h2><txp:site_slogan /></h2>

</div>


<div id="container">


<!-- right -->

<div id="right">

  <h1>Search</h1>

  <txp:search_input label="" wraptag="p" size="" />

  <h1>Categories</h1>

  <txp:category_list wraptag="p" />

  <h1>Links</h1>

  <txp:linklist form="Links" wraptag="div" />

  <h1>Feeds</h1>

    <p>

      <txp:feed_link label="RSS" /><br />

      <txp:feed_link label="Atom" flavor="atom" />

    </p>

</div>


<!-- left -->

<div id="left">

  <h1>

    <txp:error_status />

  </h1>

  <p><txp:error_message /></p>

  <p><txp:link_to_home><txp:site_url /></txp:link_to_home></p>

</div>


<br style="clear: both;" />

</div>


<!-- footer -->

<div id="foot">

  <p>

    Copyright &copy; <?php $date=date(Y); echo("$date"); ?> <txp:sitename />. All rights reserved. Powered by <a href="http://www.textpattern.com">Textpattern</a>. Core template by Angelo Ashmore. <a href="http://validator.w3.org/check?uri=referer" title="This page is NOT valid XHTML 1.1 when viewing/posting comments">XHTML 1.1</a>, <a href="http://jigsaw.w3.org/css-validator/check/referer">CSS</a>.

  </p>

</div>


</body>

</html>


5.gif


Click on forms. Copy and paste the following into the textarea:

<div>

  <h1>

    <txp:permlink>

      <txp:title />

    </txp:permlink>

  </h1>

  <h2>

    Posted <txp:posted />

  </h2>

  <txp:body />

</div>


6.gif


Click on comments. Copy and paste the following into the textarea;

<txp:message />

<h5><txp:comment_name /> <txp:comment_time /> <txp:comment_permlink>Permanent Link</txp:comment_permlink></h5>


7.gif


Click on comments_display. Copy and paste the following into the textarea:

<h3>Comments</h3>

<txp:comments />

<txp:if_comments_allowed>

<txp:comments_form />

<txp:else />

<h4><txp:text item="comments_closed" /></h4>

</txp:if_comments_allowed>


8.gif


Click on comment_form. Copy and paste the following into the textarea:

<h1><txp:comments_error /></h1>

<div>

<div id="commentsinfo">

  <div>

    <h6>Name</h6>

    <txp:comment_name_input />

  </div>

  <div>

   <h6>Email</h6>

   <txp:comment_email_input />

  </div>

  <div>

    <h6>Website</h6>

    <txp:comment_web_input />

  </div>

</div>

<div id="commentstext">

  <h6>Comment</h6>

  <txp:comment_message_input />

<div>

  <txp:comment_submit />

</div>

<div>

  <txp:comment_preview />

</div>

</div>

<br style="clear: both;" />

</div>


9.gif


Click on Links. Copy and paste the following into the textarea:

<txp:link /><br />


10.gif


Click on search_results. Copy and paste the following into the textarea:

<div>

  <h1>

    <txp:permlink>

      <txp:title />

    </txp:permlink>

  </h1>

  <h2>

    Posted <txp:posted />

  </h2>

  <p>

    <txp:search_result_excerpt />

  </p>

</div>


11.gif


Click on style. Copy and paste the following into the textarea:

body

{

  margin: 0px;

  font-family: Helvetica, Arial, Verdana,  sans-serif;

  font-size: 62.8%;

  color: #5b5b5b;

  background: #737373 url(../images/head.gif) repeat-x;

}


img

{

  border: 0px;

}


input, textarea

{

  padding: 3px;

  border: 1px solid #5b5b5b;

  font-family: Helvetica, Arial, Verdana,  sans-serif;

  color: #5b5b5b;

  background-color: #000;

}


#head

{

  width: 760px;

  height: 164px;

  margin: 0px auto 0px auto;

  padding: 0px;

  color: #888;

  background: #737373 url(../images/head.gif) repeat-x;

}


#head h1

{

  margin: 50px 0px 18px 0px;

  padding: 0px;

  font-size: 2.5em;

  font-weight: normal;

  position: absolute;

}


#head h1 a

{

  color: #a8a8a8;

  text-decoration: none;

  background: #737373 url(../images/subhead.gif) repeat-x;

}


#head h2

{

  margin: 0px 0px 50px 0px;

  padding: 0px;

  font-size: 1.5em;

  font-weight: normal;

  position: absolute;

  top: 97px;

}


#container

{

  width: 760px;

  margin: 0px auto 0px auto;

  padding: 0px;

  color: #5b5b5b;

  background-color: #000;

}


#right

{

  float: right;

  width: 226px;

  margin: 0px;

  padding: 0px 0px 20px 0px;

  color: #5b5b5b;

  text-align: right;

  background-color: #000;

}


#right h1

{

  margin: 0px;

  padding: 20px 20px 0px 0px;

  font-size: 1.8em;

  color: #e75998;

  background-color: #000;

}


#right p

{

  margin: 0px;

  padding: 0px 20px 0px 0px;

  font-size: 1.2em;

}


#right p a, #right .linklist a

{

  color: #5b5b5b;

  font-weight: bold;

  text-decoration: none;

  background-color: #000;

}


#right input

{

  width: 75%;

}


#right form

{

  margin: 0px;

  padding: 0px;

}


#right .linklist

{

  margin: 0px;

  padding: 0px 20px 0px 0px;

  font-size: 1.2em;

}


#left

{

  float: left;

  width: 534px;

  margin: 0px;

  padding: 0px;

  color: #5b5b5b;

  background-color: #000;

}


#left h1

{

  margin: 0px;

  padding: 20px 20px 0px 20px;

  font-size: 1.8em;

  color: #b0e759;

  background-color: #000;

}


#left h1 a

{

  color: #b0e759;

  text-decoration: none;

  background-color: #000;

}


#left h2

{

  margin: 0px;

  padding: 0px 20px 0px 20px;

  font-size: 1.0em;

}


#left h3

{

  margin: 0px;

  padding: 20px 20px 0px 20px;

  font-size: 1.3em;

  color: #b0e759;

  background-color: #000;

}


#left h4

{

  margin: 0px;

  padding: 10px 20px 0px 20px;

  font-size: 1.1em;

  color: #5b5b5b;

  background-color: #000;

}


#left h5

{

  margin: 0px;

  padding: 10px 20px 10px 0px;

  font-size: 0.9em;

  color: #3f3f3f;

  background-color: #000;

}


#left h5 a

{

  color: #3f3f3f;

  text-decoration: none;

  background-color: #000;

}


#left h5 a:hover

{

  color: #5b5b5b;

  background-color: #000;

}


#left h6

{

  margin: 0px 0px 10px 0px;

  padding: 0px;

  font-size: 1em;

  color: #5b5b5b;

  background-color: #000;

}


#left p

{

  margin: 0px;

  padding: 10px 20px 0px 20px;

  font-size: 1.2em;

  line-height: 1.3em;

  font-weight: bold;

}


#left p a

{

  border-bottom: 1px solid #5b5b5b;

  color: #888;

  text-decoration: none;

  background-color: #000;

}


#left p b, #left p strong

{

  color: #888;

  background-color: #000;

}


#left .comments

{

 margin: 20px 20px 0px 20px;

 padding: 0px;

 list-style: none;

}


#left .comments li

{

 padding-bottom: 10px;

}


#left .comments li p

{

  margin: 0px;

  padding: 0px;

}


#left .comments_error

{

  margin: -10px 20px 10px -20px;

}


#left form

{

  margin: -20px 20px 0px 20px;

  padding: 0px;

}


#left form #commentsinfo

{

  float: left;

  width: 187px;

  margin: 0px;

}


#left form #commentstext

{

  float: right;

  width: 247px;

  margin: 0px;

  padding: 0px;

  text-align: right;

}


#left form #name, #left form #email, #left form #web

{

  width: 187px;

  margin: 0px 0px 10px 0px;

  padding: 0px;

}


#left form #message

{

  width: 247px;

  margin: 0px 0px 10px 0px;

  padding: 0px;

}


#left #navigation

{

  margin: 10px 20px 20px 20px;

  padding: 0px;

}


#left #navigation a

{

  color: #5b5b5b;

  text-decoration: none;

  background-color: #000;

}


#foot

{

  width: 760px;

  height: 50px;

  margin: 0px auto 0px auto;

  padding: 0px;

  color: #262626;

  background: #737373 url(../images/foot.gif) repeat-x;

}


#foot p

{

  margin: 0px;

  padding: 10px 0px 10px 0px;

  font-size: 1em;

  text-align: center;

}


#foot p a

{

  color: #262626;

  text-decoration: none;

  background: #737373 url(../images/subfoot.gif) repeat-x;

}


#foot p a:hover

{

  color: #a8a8a8;

  background: #737373 url(../images/subfoot.gif) repeat-x;

}