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.
- Go to the root of your Textpattern installation and if not there add a folder/directory
themes
.
- 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.
- 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.
- Go to Presentation > Themes.
- Click on New theme which will bring up a new panel – Edit Theme.
- 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.
- 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.
- View your website now and you will see a blank page.
- 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.
- If not listed create and save new pages
default
, error_default
and archive
.
- Use the drop-down list to go to the Default theme, select the
archive
page and copy all the content.
- Return to the new theme select the
archive
page, paste the content and save.
- 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.
- Go to Presentation > Themes.
- Tick the checkbox next to
default theme
.
- Go below to the drop-down menu and select Duplicate.
You will now see a new theme named default_copy
.
- Click on
default_copy
to edit theme.
- 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