Theming With Textpattern - A Beginners Guide

Posted
Comments None

Want to make some changes to the design of your new Textpattern website?
The best way is not to directly change the default files but to start a new theme.

Using a theme has two main advantages: First you have the original to fall back on if something goes drastically wrong and second, until you are ready, only you can see the changes made – it doesn’t affect the live site.

Preparation

A few steps to do before you start.
  1. Go to the root of your Textpattern installation and if not there add a folder/directory themes.
  2. Login to Textpattern go to Admin > Preferences > Admin. If not already done add themes to Theme directory go further down the page and at Enable development theme preview? select Yes.
  3. Now Save Preferences.

There is a much quicker and easier way to create a new theme, which I shall reveal later. But I think it is worth at least trying to do it the hard way to get a better insight in to the way theming in Textpattern works.

Creating a new theme

A theme in Textpattern is a collection of Pages, Forms and Styles.

  1. Go to Presentation > Themes.
  2. Click on New theme which will bring up a new panel – Edit Theme.
  3. Only the first two fields are necessary.
    • Theme name: Used by system so it shouldn’t contain any special characters or spaces.
    • Theme title: How it looks to users and can contain special characters and spaces.
  4. Click on save. This will return you to the Themes panel and you can now see your new theme added to the list.

Clicking on Theme Name will take you the panel where you can edit the theme information.
Clicking on Preview will take you to the Sections panel for that theme.

Working with a new theme

The Sections panel

The Sections panel lists the sections with their associated pages and properties.

In a new installation there will be just two sections; default and articles.

Under Theme you will see two entries. The first, with a strike-through, is the theme your website is showing and the second is the name of your new theme, that only you will see while logged in.

As we haven’t made any changes yet we have an empty theme so let’s test this out.
  1. View your website now and you will see a blank page.
  2. Either use another browser or log out and view your website again – yep all safe and sound.

Now we need to populate the theme.
So first go to Presentation > Pages.

The Pages Panel

In the Pages Panel we can create new pages, duplicate pages and edit them. Using the drop-down menu we can also navigate between available themes.

With the new theme selected we can now see why previously all that was seen when viewing the website while logged in was a blank page. There may be two pages listed but empty and a completely missing page which we will have to remedy.
  1. If not listed create and save new pages default, error_default and archive.
  2. Use the drop-down list to go to the Default theme, select the archive page and copy all the content.
  3. Return to the new theme select the archive page, paste the content and save.
  4. Rinse and repeat for the default and error_default pages.

Viewing your site will now show a functioning if rather empty and ugly looking website.
Now we need to show some content.
Go to Presentation > Forms

The Forms Panel

A form is a snippet or chunk of text, HTML, and Textpattern tags that is used to display content.
In the Forms Panel we can create new forms, duplicate forms and edit them. It also contains a drop-down menu which enables us to navigate between available themes.

As in the Pages Panel there are listed items that are empty and some completely missing. There are also a lot more of them and they are organized into categories – hence a new drop-down menu Form type.

Apart from the slight increase in complexity though all you need to do is the same as in the Pages Panel.
The only thing that may need mentioning is that you do not need to make a Miscellaneous category. It will show up as soon as a form is assigned to it.

Once this has been completed take look and see.
All we have to do now is deal with the ugly.

Go to Presentation > Styles

The Styles Panel

The Styles panel is used to add, duplicate and edit CSS files.
As in the previous panels this has a drop-down menu to navigate between themes.
The list column will contain all style sheets that can be used with the theme.

There is only one empty style sheet listed here and the only one needed for now.

Change the name to avoid confusion by entering it in Style name and save. And then it’s the final copy and paste.

And that is it. Your new theme is now complete.

Of course it looks exactly like the original but you can now make and review changes without worry.

Creating a new theme – the easy way

As promised earlier and something that is going to be very handy later on. Here is the easy way to create a new theme that saves a lot of copying and pasting.

  1. Go to Presentation > Themes.
  2. Tick the checkbox next to default theme.
  3. Go below to the drop-down menu and select Duplicate.
    You will now see a new theme named default_copy.
  4. Click on default_copy to edit theme.
  5. Change Theme name and Theme title then Save

And that’s it. The Themes panel will now show your new theme.

Coming soon:

Deploying your new theme.

Further Reading:

Textpattern CMS gains Themes support

Author
Categories

Comments

There are currently no comments on this article.

Add a comment

Enter your comment below. Fields marked * are required. You must preview your comment before submitting it.





← Older Newer →