Working with Textpattern

Share on TwitterShare on TumblrSubmit to StumbleUponSave on DeliciousDigg This

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

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.

Creating a new sectionFigure 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.

New section's settingsFigure 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.

Editing page templateFigure 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.

Creating new formsFigure 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.

Inserting fictional contentFigure 5. Inserting fictional content

Of course, the newly created page will appear without styles, as shown in the following figure.

A page without stylesFigure 6. A page without styles

Editing 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.

Editing styles in raw modeFigure 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.

Editing styles in editor modeFigure 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.

Uploading the imagesFigure 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.

Choosing the appropriate categoryFigure 10. Choosing the appropriate category

Keep in mind that when we upload an image, Textpattern assigns an unique ID to it.

An unique ID for each imageFigure 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.

Relative paths to the imagesFigure 12. Relative paths to the images

The final layout

Finally, we can see our layout complete.

The final layoutFigure 13. The final layout

Download examples