Blog Design Solutions (2006)
.pdf
B L O G D E S I G N S O L U T I O N S
Return to the TxP setup screen in your browser and press the I did it button. If all has gone well and again if TxP returns an error, retrace your steps and check for typos. You will get the message Thank you. You are about to create and populate database tables. Now you will be prompted to add your name and to choose a username and password. You should try and choose a strong username and password because this login area will be open to the world, and all that stands between your site and malicious attack are a good username and password. A good username might be something a little less obvious than just your name; maybe you could pick your mother’s maiden name or the name of your pet dog when you were a child. To create a good password, don’t use any names or dates that are relative to your life and add some unusual characters into the mix. So, for example, you could create a username of: bobthegoldfish and a password of: n0nsen=5e.
The only other important thing to say about your username and password is to keep it really safe. If you lose your TxP username and password it is not easy to recover. There is no I forgot my details option on the TxP login.
The final screen of the Setup Wizard should now display this message: You should be able to access the main interface with the login and password you chose. Thank you for your interest in Textpattern with the words main interface being a link to the login.
To log in to Textpattern after this, simply visit http://localhost/textpattern, as shown in Figure 6-14.
Figure 6-14. You have successfully installed TxP.
226
T E X T PAT T E R N
First login
The page you’ll land on when you log in for the very first time is the Manage languages page (see Figure 6-15). Here you can install your language of choice to work with TxP if you changed your mind since installing it. To change the language, simply click the appropriate Install link to the right of the language you want; after a little loading time, the drop-down menu at the top of this area will now contain your language. After choosing the language you want in the drop-down menu, press Save to install your choice.
6
Figure 6-15. The Manage languages page
227
B L O G D E S I G N S O L U T I O N S
Did it all work?
Although the fact that you can log in to the TxP back end indicates that everything has gone well, it’s a good idea to check the front end, too. Point your browser at the root of your site, most likely http://localhost, and you should be greeted with the default TxP layout and First Post, something along the lines of that shown in Figure 6-16.
Figure 6-16. Your blog’s homepage
If you don’t see this frontpage, it usually means that something is missing. That something is probably the index.php file from the TxP download. In this case, you should grab a copy from the TxP download ZIP file and drop it in place in the root of your server, overwriting the older version if need be.
Assuming that all is well on the front end, it’s time for a more in-depth look at the back end.
228
Key TxP areas
There are three key areas of TxP and they are found on the top row of tabs in the back end, as shown in Figure 6-17:
admin, in which you configure and control TxP functions to suit your needs
presentation, in which you add HTML, <txp: /> tags, and styling to present your content
content, in which you organize, add, and edit your content
The fourth tab, view site, simply opens up the front page of the site in a new browser window. Notice that when you click one of the tabs in the top row, different tabs become available on the bottom row. Let’s look at each area in a little more detail.
Figure 6-17. The TxP admin area
Admin
You probably won’t spend too much time in admin beyond setup, and even then there isn’t a great deal to do. So while you take a look around this area I will run you through the basic changes that you may need to make to get up and running successfully.
Diagnostics
When you select the diagnostics tab, you’ll be greeted with Pre-flight check and Diagnostic info. Any information given in red indicates items that need attention—useful information, indeed! I’ll go through the three most common messages you might see, and how to fix them.
/path to your server/textpattern/setup/ still exists. This message simply tells you that the directory /textpattern/setup/ still exists and might pose a security issue. If you open up the main textpattern directory on your web server, find the setup directory, and delete it, as shown in Figure 6-18, refresh the page and you’ll see that this message should now be gone.
Figure 6-18. Deleting the setup folder from the textpattern folder
T E X T PAT T E R N
6
229
B L O G D E S I G N S O L U T I O N S
Image directory is not writable: /path to your server/textpattern/images and File Upload Path is not writable: /path to your server/textpattern/files. If you plan to upload and share images and files using the tool provided by TxP (such as your homemade mp3s), you need to make these directories writable (even if you don’t plan to, making the directories writable is a good habit to get into as part of the setup process). Usually this means you have change permissions to 777, which is simply a way of telling the server that the directories can be written to and executed as well as read. The easiest way to do this is to navigate to the directory in which the main textpattern folder resides (this is where the images and sites folders are also located) by using your command line/terminal/shell with the cd command (for example, using OS X terminal, found in Applications Utilities). At the prompt, enter cd /pathtoyourserver/ and then the following commands to change the permissions of your folders: chmod 777 files and then (after pressing Enter) chmod 777 images (and press Enter as shown in Figure 6-19). Return to the diagnostics web page and refresh the page. These messages should now be gone.
Figure 6-19. All diagnostic checks have been passed.
After you fix all these issues, your diagnostics page will display an All checks passed! message, and you are fine to continue on to the next tab: preferences.
Preferences
The preferences tab allows you to easily change the way your site works. When you click the preferences tab, you will arrive in the Site preferences area. But there are also two other pages, Advanced preferences and Manage languages, that are accessible via links at the top of the preferences page. You have already seen the Manage languages area, so no need to revisit it; however here is a quick overview of the other two pages:
Site preferences This page, which is the first area that opens when you click the preferences tab, lets you choose the basics of your site, such as your time zone, whether comments should be moderated or not, and how you want to present dates on your posts. You don’t actually need to adjust anything here for your blog to work (it’s designed to work right out of the box), but for this example you do need to change the permanent link mode so when you create an archives section you can give it a clean URL—such as /path to your server/archives/. To do this, look under the heading Publish for the drop-down menu labeled Permanent link mode and change the value from ?=messy to /section/title.
Scroll to the bottom of the page and press Save. That’s it—job done.
More about permanent link mode If you happen to find yourself on a server that doesn’t allow you to use the /section/title Permanent link mode or any of the other
230
“clean URL” options, don’t panic; the ?=messy Permanent link mode can be used just as effectively. For example, where I suggest we will reach the archive section via /path to your server/archive/ you would simply replace this with /path to your server/index. php?s=archive. As the name suggest, it’s perhaps, a little messier than we want, but it does show that TxP will run well on most server setups.
Advanced preferences It is unlikely that you will want to venture into advanced preferences until you get really comfortable with TxP. But there are a couple of things you should do straightaway that will stop the readers of your site who access your posts via RSS or Atom feeds from sending e-mails of complaint, in bold red letters no less. Let’s do that now.
1.Scroll down to the area titled Publish.
2.Change the radio button for the Show comment count in feeds? option from yes to no.
3.Change the radio button for the New comment means site updated? option from yes to no.
4.Press Save at the bottom of your screen to save your settings.
What this process does is stop the RSS and Atom feeds from being updated every time someone adds a comment to your site. This is a potentially useful feature in some situations, but my experience has been that people find it very annoying: they have read and enjoyed your entry, but have another 200 plus feeds to get through before lunch, so the last thing they want is your feed hassling them every time you get a comment.
Presentation
Beginners to TxP often find the presentation area very confusing. Some of this confusion, I think, has to do with the way areas are named. For example, forms are not forms as you may understand them from using the web, and pages, as you will see, are quite a bit more than simply run-of-the-mill HTML.
For the lucky few, it all makes sense at first glance. But to those who find it all a little confusing to start with, I usually say, stick with it; the TxP developers have done their job well, and the fog will begin to clear as you work with the software. At that point, the sheer elegance of TxP will become apparent.
I’ll now cover the basics of an enormously powerful area of TxP. After you understand it, you will be flying. We’ll look at the options on the left side of the screen in the Creating an archive section and page template section.
Sections
Sections, as the name suggests, are the main areas of your site. Most sites have an about section, a contact section, and perhaps even a links section. This is probably the easiest way to understand sections initially.
Sections work with pages, which are discussed next, and together they allow you to build the skeleton of your site. Notice that TxP has a built-in section called Default that can’t be
T E X T PAT T E R N
6
231
B L O G D E S I G N S O L U T I O N S
deleted. This section is used by TxP on the homepage, so when a visitor lands on your very first page (for example, http://myblog.com), TxP will use the Default section and its associated settings to present the front page.
Pages
You can think of pages as site templates. Every section can have its own page, or many sections can share one page (in this case, we need only a one-page template). This is one of TxP’s key features that, when combined with sections, gives you the power to use one setup of TxP to run multiple designs very easily. Notice a long list of options on the left— they are links to help you generate TxP tags. (We’ll be using some of these options along the way, so there will be more details a bit later.)
Forms
The name forms often causes confusion to new TxP users because most of us are familiar with forms as something used on the web for capturing information: logins, orders, and so on. TxP forms, though, are something completely different and have nothing to do with HTML forms. The easiest way to understand TxP forms is as storage boxes in which we can keep chunks of code. Forms are used in conjunction with pages, and I will show you how they work when we get to putting the site together.
Style
The style tab is where all the Cascading Style Sheets (CSS) are stored in TxP; we will be visiting this area extensively throughout this chapter. To the left of the main text area is a link that says Edit in CSS editor. As you might expect, this link opens up the stylesheet in TxP’s built-in style editor. If you want to use this editor while following along with the examples in this chapter, go right ahead. I am not a fan of this editor, however, so you won’t hear me mention it again.
Content
As the name suggests, the content area is where we go to add content. When you log in or click the content tab, you are taken to the write tab by default because it is the most logical place to start on a day-to-day blogging basis—this is where you make your daily entries. To the left you will see a tab marked articles that (as the name suggests) lists all the articles you have ever published. Although there are other areas within content, they are not needed for our blog. As I said in the beginning, it’s been tough deciding what not to tell you. The content area is far and away the simplest area to figure out and after you have a good understanding of the fundamentals, working out the areas I have skipped over here will be a snap—really it will.
Question mark buttons
Finally note little question mark buttons to the right of many of the options within the TxP back end. They give you helpful tips about what actions will be performed by that particular option. Clicking them has no impact on your site, so feel free to click away.
232
T E X T PAT T E R N
Default design
During setup, you visited the front end of TxP and saw what is a deceptively simple design. In reality, there is a lot more going on than you might expect to give you everything you need to get a useful blog up and running.
First, though, let’s take a quick look at a fundamental part of TxP: the txp tag. Open up a new browser window or simply click the view site tab, and enter the web address of your site so that you have a copy in front of you to show your changes.
Back in the TxP back end, the first stop is the admin area and you will find yourself in the preferences area by default. Let’s just walk through a simple example of how TxP slots together.
The site name and the site slogan
In the preferences area of the admin area, under the heading Publish, you see a text field labeled Site name, as shown in Figure 6-20. You can change it to whatever you like and it
will show up on your front page. Go ahead and change it to anything you like, scroll down 6 the page, press Save, and then refresh the site front end—it will have been updated.
Figure 6-20. Setting the site name and slogan
To see how this works, click the presentation tab and look through the default template code. You will see a <txp:sitename /> tag, as shown in Figure 6-21. This is the TxP tag that pulls the information out of the admin area and onto your site.
Figure 6-21. Displaying the site name in a template
The exact same situation applies to the site slogan in the preferences area of admin. You see a text field labeled Site tagline and the words My pithy slogan; in the default template code, we find a TxP tag <txp:site_slogan /> that outputs My pithy slogan to the site. This example is perhaps one of the simplest examples of a TxP tag in action, but it does illustrate the principle of tags nicely. A TxP tag is essentially a set of instructions that TxP reads and takes action on. So by adding <txp:sitename />, you tell TxP to look at what name the site has been given in the preferences area and present it on the site.
233
B L O G D E S I G N S O L U T I O N S
It’s your blog
Now that TxP is installed, you learned about the options available in the TxP management interface, and you had a quick look at the default TxP blog design, let’s start to think about your own blog. Before you dive into reams of code, it is always best to do a bit of planning. So you first have to think about what you want from your blog and then consider its visual design. Only then can you start creating your masterpiece.
What is the purpose of your blog?
Until you define your blog’s reason for existence it will be very difficult to get any kind of design going. If you don’t already have a clear idea of what it is you want to blog about, it’s worth spending a couple of days making some notes of your ideas about what you want to do to begin with and what you might want to do in the future. For example, do you want to add links to other sites? Will there be other sections, such as an About me section? How will you organize the archives or will you just have a search form instead?
For the sake of this exercise, let’s assume that you want to keep things nice and simple: publish articles and receive comments back—that’s it. For the sake of this exercise, let’s go for a really simple one-column layout and give it our own little twist.
Designing your blog
Designing for yourself can be a frustrating experience for some: nothing is ever good enough, and nothing ever reflects your personality the way you would like. Some people will spend hours scouring stock photography sites, hoping to come across something that fits, but I find that process completely soul-destroying and have a tendency to go out for a walk or pace around the office, searching for an idea first and a way to implement it second.
On this occasion, I was thinking about how I would describe the basics of the page layout—the head, the foot, and the bit that goes in between—and I thought a stretchy person might be able to help me illustrate the point.
The next step was to take this rough idea and give it legs and hands (and a head, for that matter). I fired up my favorite graphics package, Macromedia Fireworks, and drew a schematic diagram to show where I wanted the bits of my design to go, as shown in Figure 6-22.
What I lacked were the practical drawing skills to make my idea a reality. Fortunately, I happen to be in touch with a very talented cartoonist by the name of Kev Adamson (www.kevadamson.com) and was able to recruit him to help give me what I wanted.
234
T E X T PAT T E R N
Figure 6-22. My schematic design, mocked up up in Fireworks
6
From my very brief note (worded roughly as “Kev, please make me a stretchy man”) and my very dull gray box (refer to Figure 6-22) came back a work of art (see Figure 6-23). Not only did this help me get motivated but I was nowhere near as self-critical about the end results because someone else did such an important visual part of the site. Thus I was free to get on with the job at hand: getting a blog up and running. I think it is worth hunting down some talent for collaboration if you don’t have the skills to bring your ideas to life. And if you can afford to do it, why not fork over the extra cash? You are sure to reap the rewards in extra traffic and all the opportunities that brings.
Figure 6-23. The finished illustration, compliments of kevadamson.com
235