Working with Textpattern
In this article I'll explain how to use the Textpattern's interface for creating a CSS-driven layout. This article requires a basic knowledge of Textpattern.
Table of contents
- Creating a new section
- Editing a page template
- Inserting fictional content
- Editing styles
- Working with images
- The final layout
- Download examples
Creating a new section
The first thing we need is a new section where we can test our new layout, so we'll create a new one and we'll name it test.
Figure 1. Creating the test section
Of course we have also to change the default settings of the new section, as shown in the following figure.
Figure 2. New section's settings
We've set all the options to No. By doing so, the new section will not be visible, since it's only a temporary section that will be deleted as soon as our work is finished.
Editing a page template
If our goal is only a style change, we can simply copy the main template by renaming it test and using it in our new section. On the contrary, if we want to change also the markup, we need to copy the main template as said before and then apply the changes to the new template, as depicted in the following figure.
Figure 3. Editing a page template
Keep also in mind that in Textpattern the overall structure of our site is made up by forms.
Forms are little code snippets in which there are both markup fragments and Textpattern's tags (usually starting
with the prefix
txp:). If we want to change the overall structure of our pages, we need to create new
forms or edit the existing ones, as shown below.
Figure 4. Creating new forms
Once created a form, this can be added to our main template at the time of publishing.
Inserting fictional content
After creating our new template or editing an existing one, we can create a fictional post in order to have a reference page, just for testing purpose. In this case we can use a simple sequence of paragraphs with nonsensical words.
Figure 5. Inserting fictional content
Of course, the newly created page will appear without styles, as shown in the following figure.
Figure 6. A page without styles
There are two ways in Textpattern of editing styles: raw mode and editor mode. Both ways are explained below.
Editing styles in raw mode
With the raw mode we can write our style sheet as in a normal text editor. By doing so, we can also copy and paste other code taken from our main style sheet or from a local file.
Figure 7. Editing styles in raw mode
If we are experienced coders, this is probably the best way of editing styles in Textpattern.
Editing styles in editor mode
With the editor mode, we can use the internal editor of Textpattern to create our style sheet. This is a step-by-step procedure that is actually recommended to beginners.
Figure 8. Editing styles in editor mode
In this mode we can write a single rule by dividing it into its constituents, namely a selector, a property and a value. Of course this is not the fastest way of writing a style sheet.
Working with images
After creating all the graphics for our design, the first thing we should do is obviously uploading the images.
Figure 9. Uploading the images
Textpattern put all the images in the /images directory, located at the root of your site. After uploading all the images, we need to choose an appropriate category for them. Since our images are intended only for design purposes, we choose the Site Design category, as shown in the following picture.
Figure 10. Choosing the appropriate category
Keep in mind that when we upload an image, Textpattern assigns an unique ID to it.
Figure 11. An unique ID for each image
This ID will be used as the new name of the image. So if our file name was banner.png, the new name could be 36.png. We should remember this name when we want to use an image in our style sheet. Another thing to be aware of are relative paths to our images. Remember that if the path of our new section is http://localhost/test/, our images are inserted in the /images directory that is actually one level higher than our working directory, as shown below.
Figure 12. Relative paths to the images
The final layout
Finally, we can see our layout complete.