This guide assumes that you have knowledge of HTML and cascading stylesheets (CSS). If you have no knowledge of either I recommend that you read some tutorials on HTML and CSS first. These are good places to start:
Apart from curiosity and patience, good things seldom come easily, you also need a few applications:
If you are running Windows I recommend SmartFTP, it is free and easy to use.
For editing templates, HTML and CSS I recommend ConText, a free open source programmer’s editor.
By my Apple loving friends I’ve been told that Mac users should look into:
http://smultron.sourceforge.net
If you are running a UNIX/Linux as operating system, a standard text editor such as VI/VIM, Emacs, Pico or Nano will do. You can use the FTP client that came with your system or distribution to upload and download files.
I will not explain how to use these applications, they all come with help files. If you get stuck with an application please consult its help files.
You will need to set up a working phpBB installation. I suggest you set up a new phpBB board for the sole purpose of designing and testing new templates and styles, that way you won’t risk messing up your own forum. It will need its own directory on the server as well as its own database. Free phpBB hosts that do not give you FTP access will not work, you need a regular hosting account or use the method described below. Again, I won’t go through this in any more detail so please refer to the documentation available at phpbb.com and elsewhere.
The best way to work when creating templates for phpBB is to have set up your own web server in such a way that you edit the files directly in your editor and make changes to the files in the web server’s web root directory without having to upload them manually with your FTP client. Some FTP clients, one of them being SmartFTP, allow you to edit files on the server. The way this works is the FTP client downloads the file, opens with your software and every time you save the file, the FTP client detects it and uploads the file back on the server. This works great when you edit one file at a time but when editing several files it soon becomes a bottleneck.
Once again, I will not cover how you configure your own web server locally; there are several tutorials online that explain the process. See this Wikipedia article for information on running a local server on your Windows machine:
http://en.wikipedia.org/wiki/WAMP
There are also application packages available on the Internet that automate the whole set up process making it a snap.
If you cannot configure a local web server, don’t worry, you can still use the edit feature in your FTP client to edit files remotely. You can also edit them locally and then upload them to the server and overwrite the old files. This works perfectly but takes more time than working with files locally.
When it comes to designs for phpBB, two terms are used the most: template and style. These are not the same even though downloadable designs for phpBB are by the phpBB Group referred to as styles.
The phpBB template engine, that is the part of phpBB that takes the template files as input and generates the forum as you see it in your browser, loads the template files and then take the data from the database and combines these and generates HTML which it then serves to the browser. The theme is stored in the database as a series of colors and filenames. The template engine takes this information as well and serves it to the browser as CSS code which the browser then applies to the HTML the template engine has generated.
Many templates use a separate CSS file instead of using themes, it makes it easier to edit and you can add your own CSS classes and rules. I prefer this method over storing the theme data in the database as a theme. The drawback is however that you can no longer change fonts and colors from within the admin panel but I will return to this later.
Templates and themes are therefore both necessary to change the design of your phpBB board. Together they are known as Styles but I don't think it's a very well-chosen term. It makes a lot of more sense to let Style refer to the information that is used for the stylesheet and template to the actual files. I, among other people, would propose: Template + Style = Theme
However, as I noted, in phpBB lingo:
Template + Theme = Style
I am using the words Style and Template interchangeably here but just for the sake of clarity and in official terms: theme is what's in the database, template is what's on the harddrive and taken together they form a style.
Once you're all set, proceed to the next chapter where we'll create the foundation for your template and upload it to the server.