
TEXTPATTERN TEMPLATE h1



Preamble
-------------

Welcome to TXP-template h1. If you don't have version 4.0.3 of Textpattern, now it would be a good moment for upgrading. Maybe this simple template will work with older versions, too.

This template is small, easy and clear. There are only a few images used. For installing You have to modify only a few files which already exist. It is highly customizable by You. 
For easier installing and starting no plugins are needed. Feel free to install those You like and/ or need. It is designed for articles. It's suitable for a blogs or corporate news.
It is released under GPL.

All pages - except the comment form - are xhtml strict.

This template was made be me, Robert Hartl. The image behind the heading is from a great ressource, so credit to http://svn.hu. If You're looking for an individual one, maybe there would be
a good starting point.


Installing
-------------
#1 - txp
Install or upgrade. http://www.textpattern.com

#2 - back-up
We are going to be overwriting existing templates so you should make a back-up of them just in case you want to return to them at a later date. 
They can be copy/pasted into txt files just like the one included here, or you can copy them to a new name in TXP.

#3 - relax
Make yourself a nice cup of coffee and then let's go. Don't hurry.

#4 - unzip
Create a directory an unzip the template-zip-file in it.

#5 - images
Let' s start with the few images.

First: ensure that the /images/ directory of your textpattern-install has been chmod 777 or you will not be able to upload images to it.

Second: Login, go to 'content', 'images'. Then upload all images from the unzipped template directory. The image category  'site design' is a good choise. Otherwise create a new one before under 'content'/'organise'.
It is important that You start with image 2, then 3, and so on. That makes it easier later if You have a new installation.
Select one, then click on the Upload button. TXP will upload the image and you will see a new screen with the image on it. There is a category drop-down box where you can select the category you have just created or use 'site design'.
You should also put something into the alt text box as this is used in the img tag. Scroll down the page and click on Save. You will now be taken back to the first screen where you will see the image title in the listing. 
Repeat this for the all the images included in the download. You will not see the images themselves in the listing unless you have created or uploaded a thumbnail for them and it isn't really necessary.

Third: images are done. Perfect.

#6 - css
First: Login or stay. Go to the 'presentation' / 'style' - tab. Now You see a default stylesheet. We override this one now. 
If you want to call the CSS something else, click on Create new CSS on the left of the text box. But then (only then) You will need to go later to the head section in the archive and default page templates and change the CSS 
call to reflect the name of your CSS.
 
Second: Delete the old stylesheet. Then copy/paste the css-default.txt file from the download-folder 'CSS Template' into the empty text box and save it. 

Third: Now it comes the only difficult part. Because for TXP all uploaded images have id as name. For example the fifth image You've uploaded get's 5.jpg (or gif, png, ...).
There are a few places in the stylesheet You need to adapt.
Always when there is 'background (...) url(/images/(...));' You have to check this lines.

a) Before the '/images/(...)' You have to enter the subdirectory if Textpattern doesn't start from the root. If TXP for example starts in http://yourdomain.com/sub/... You have to put in '/sub' before '/images'.
b) Now You have to check if the number of the picture name belongs to the right image. They need to be changed to the number that your TXP install allocated to them when you uploaded them. 
Open at the 'images' tab in a new window/tab. If You hover the image-link You can see at the end of the link the id.
c) Don't forget saving at the end.

That's it for the CSS.

#7 -page template
First: Yes, template, not templates. Okay there's a second error page.

Second: In the folder called Page Templates you will find 2 text files. TXP comes with 3 page templates already, default, error_default and archive. 
My versions of the first 2 have been modified somewhat.
In TXP go to 'presentation' / 'pages'. This will normally show you the default page template. You can't delete this one so don't bother trying. What you can do is select all the text and delete it so you have an empty text box. 
Now open the page-default.txt file and copy/paste the whole thing into the text box and save it.

Now select the error_default page template in TXP and do the same thing using the "page-error-default.txt" file as your source.

That's the page templates done!


#8 - form templates
First: Forms are very powerfull. For an easier installation I used only a few standard foms, we override.

Second: In the folder called Form Templates you should find (only) 5 text files.
The difference between form templates and page templates is that you need to tell TXP what type of form it is so that it can list it correctly in the various drop-down boxes used throughout TXP. 
Below the main text box you will see 2 smaller boxes. The top one is for the Form name. The second one is for the Form type. Both are required. 
I have used a specific naming convention to name the form template text files included here.

Third: An example:
Look at the file Single-misc.txt No don't open it, just look at the file name.
This goes to the template Single, is named Single and has the form type misc.

Fourth:So open the right template in txp, delete the text. Now copy/paste the text from the file, which belogs to it. Now save the template.

Fifth: Soon it's done.

#9 - sections
First: You do not need to create a new section.

Second: Go to the 'Sections' tab. You should already have default, about and article sections listed there. Change always the 'uses page' and the 'uses style' to default. 


#10 Done. Look at Your website. When You miss images ore see worng images, You have to adapt the id's in the css default template.


#11 - customizing
Look at useful plugins, change colors, backgrounds and You'll get an individual page. I promise.
For an easy start, there's a little feature on board. The first image in the css-default template ist the top background of the body. There are two further prepared images already uploaded You should look at.
The default image should be a little brighter at the top (for the sun-effect). The others are darker and blue. Enjoy.

#12 - feedback
Let me know, when You're version is online. I'm looking forward to see, what You can reach with this template.


Robert Hartl
http://hartl.info