Creating phpBB templates
From ThemesWiki
| Official Page |
| Project Documentation |
| Download |
|
Making your own template can be not just very interesting, but also time consuming. There are many small details just waiting to be overlooked, and that is why I advise you not to rush through it too fast. Take your time, and the reward will come at the end.
As with many other design-related projects, one of the most challenging things about creating an appealing phpBB template is to get the idea for the layout. You might already have a homepage and would like to apply that layout, but many times I have seen people building the rest of their site around the layout of their phpBB template.
That is why, in this tutorial, we will start from scratch by telling you how to go about getting the basic layout idea into building the entire template.
Let me start by saying that inspiration, and the whole creative process itself, is not some precious gift that very few people are endowed with. It is something everybody can learn in time, with practice and some patience. Find some layout ideas and tweak them until you are satisfied with the result; the more time you spend doing this, the more you will learn about yourself: what you like and what you don't. Soon you will have developed your own style that you can turn almost anything into.
There is a limitless amount of places to begin looking for your future phpBB template layouts; magazines, newspapers, advertisings, homepages, constructions, art, or even basic wallpapers are just some of the inspiration sources I have found useful. Spending half an hour in a coffee shop with a pen drawing lines on a napkin can reveal the most appealing layout of all. It all depends on how "far" you're willing to go with this, even though I doubt anyone can build a good template layout based on things like a teapot!
For the kind of layout needed in a phpBB template, you should try to look for patterns you can use. For example, we need something that can show topics and posts, maybe with room for an image and a menu.
The template I'm going to build in this tutorial is based on an idea I got from a newspaper. It wasn't that complicated really: just a photo, a headline, and some text, which I drew a sketch of on a piece of paper so I wouldn't forget. I liked the simplicity, the lines, and the rather big image. And even though it might not look like a phpBB template at first glance, I will try anyway, while showing you how to work around any obstacles that are bound to bump up on the way:
The first thing I am going to do is to put together a rough, basic layout of the template in Photoshop. It doesn't have to be precise or exact, but enough to get an estimated look of the template. There are some important things that need to be decided upon first, starting with the width of the layout. Making it 100% wide is a very popular choice for HTML sites and templates, but it may not be such a good idea for this layout because of the image at the top. I need a fixed size. Also, in order to keep everything from getting too large, I have decided to shrink the entire layout down to a width of just 780 pixels. That will leave some "air" on the sides of the forum and also look more like a paper-based layout. With this width there are 20 pixels allocated to the scrollbar, for those who have screen resolution 800x600 pixels.
For the big image at the top, I had an old PSD image that I made for a Photoshop contest long time ago. I have always wanted to use this image for one of my projects and this seemed to be a good opportunity. The format of the image is 717x231 pixels, which fits nicely, neither too big nor too small.
Under the image will come the menu. The forum tables under the black lines won't look good with the same color as the background, so instead I give them a light gray shade.
It is hard to get a good color feeling going, since the colors of my PSD image don't match the rest of the template layout. After some trials with new background and forum colors that could match the image, I end up changing the image into an empty gray box, so as to match the light gray color of the forum. However, I still feel this is not the best solution; it looks much too empty.
Playing around with some Photoshop brushes eventually leads me to a brush with some paint spills, and with red color I manage to get something that looks like nosebleed. A bit morbid maybe, but it looks quite good, simple, and neat. I add the title 'NoseBleed' with a font I find well-fitted for the image, making it more dynamic.
There is no need to get into too many details at this early stage; it is quite easy to change images and colors later on if you get better ideas. After all, this is just a sketch!
I am still not sure if I want a colored background or maybe even a background image for the white "air" on each side of the forum, so I leave the option open. For now though, we keep it as simple as possible; all white.
With the sketch finished, I cut out the image and save it as top_image.jpg, so that we can begin creating the template.
[edit] TPL Stands for Template
Each page in the browser is made up of three .tpl files, consisting of HTML code, cascading style sheet code (CSS), and phpBB variables. The first file is always the overall_header.tpl, and the last one is always the overall_footer.tpl. The middle of these three .tpl files displays the actual content of what we can see on that specific page. If, for example, we are viewing the index page of the forum, what we see is the code of overall_header.tpl, index_body.tpl, and overall_footer.tpl put together. Or if we go to the login page, the .tpl files shown are overall_header.tpl, login_body.tpl, and overall_footer.tpl, and so on. This is quite handy since we only need to edit one .tpl file, the overall_header.tpl, in order to make changes in the top part of all the pages shown by the browser.
Think of it as if you were to write a letter on a piece of business paper. The paper would already have the company name, logo, and address at the top (overall_header.tpl), and maybe also an address line at the bottom (overall_footer.tpl). You would write your individual message in the middle (the middle .tpl file). No matter how many letters you wrote, and no matter how different the content of the letters was, you would always have the same header and footer. It's the .tpl in the middle that brings the phpBB forum to life.
However, before we start editing any files, we make a copy of the subSilver folder in the phpBB templates directory, and name it NoseBleed. With a copy we can always go back and get hold of the original .tpl file, should something go wrong.
[edit] Making Your Template Folder
In order to make phpBB recognize the new NoseBleed folder as a unique template, we need to edit some of the files. In the folder, there is a file named subSilver.cfg, which we rename to NoseBleed.cfg. We also rename subSilver.css to NoseBleed.css, even though there is no need for this file right now. Lastly we need to replace every instance of subSilver in the theme_info.cfg file with NoseBleed. If you are using WordPad for this, you can press CTRL+H to bring up the Replace All window, making this a fast edit.
We can now upload and install the new template from the Administration Panel.
[edit] Editors for .tpl Documents
The code being used in the .tpl files is basically, as mentioned earlier, HTML code. If you already have some knowledge of basic HTML and CSS, you have nothing to fear, and if you don't, don't worry. We will go through the process with detailed explanations on the way.
For this tutorial we are using Notepad to edit .tpl files. We could also use a WYSIWYG editor for editing, like Dreamweaver. It can have some advantages like being able to see an approximated view of the layout while coding. However, I don't recommend using the code that these editors can insert automatically, since there is a chance that phpBB can conflict with this kind of code. We could also use Word, WordPad, or any other text editor, as long as we remember to save the document as plain ASCII code, since phpBB can not read rich-text formatted .tpl files.
Start by opening the overall_header.tpl from the NoseBleed folder; this is the file that will contain the top layout appearing on every page. Remember not to be nervous if this is your first time with HTML; it's really not as difficult as it might seem at a first glance. At the top of the code you'll find the part telling your browser that this is an HTML document. We then have the title of the page, the CSS code, and then at the bottom, we have the HTML code that will display our layout. When phpBB loads a .tpl file, it fills in the phpBB variables from the database. These variables all have capital letters and always look like this: {PHPBB_VARIABLE}.
Between the <style type="text/css"> and </style> code tags, you will find all the CSS code, e.g.:\
/* Name of poster in viewmsg.php and viewtopic.php and other places */
.name { font-size : {T_FONTSIZE2}px; color : {T_BODY_TEXT};}
If you put code between the /* and */ tags in CSS, it will be ignored by the browser. You can use this if you want to leave comments for yourself or others. The particular CSS style above is called .name. The dot before name is not a type error, but something you should be aware of when you're going to add your own style. A CSS style named .table would only affect those areas of your HTML document where it is applied, e.g.:
<span class="table">Some text here</span>
However, a CSS style named table with no dot would have an effect on every table of your HTML document.
But let us get started building our template!
[edit] Ready, Set, Go!
With the sketch at hand, the best way to create a template is to simply follow the sketch, starting from the top and working our way down to the bottom. As mentioned earlier, the overall_header.tpl always contains the top part of each page you'll see in the browser, so this is the one we will work on first. In subSilver, this file already shows an image and the menu, a good approach that we will keep the same for our own template.
Open the overall_header.tpl file and scroll down to where the <body> begins (the section up to this tag is the CSS, which we will get to later).
The first thing we need to do is to make sure that the template stretches out entirely in the browser. By default, the browser adds a margin to the top and to the left of the page, but we can get rid of this by setting the topmargin and leftmargin to zero. We can do this by modifying the <body> tag as follows:
<body bgcolor="{T_BODY_BGCOLOR}" text="{T_BODY_TEXT}"
link="{T_BODY_LINK}" vlink="{T_BODY_VLINK}"
leftmargin="0" topmargin="0">
The next thing worth noticing in the template is the <a name="top"></a> link tag. If we add the following link:
<a href="top">Go to top!</a>
... anywhere else in the template, the browser will take you (on clicking the link) to <a name="top"></a>, in this case to the top of our page, where it is located.
Then we have the table structure of the template. The first table starts with:
<table width="100%" cellspacing="0" cellpadding="10" border="0" align="center"> <tr> <td class="bodyline">
... but it apparently has no end. This is not an error; it is because this table surrounds the entire forum, including the content that will be loaded after the overall_header.tpl.
You can find the end of this table:
</td> </tr> </table>
... in the overall_footer.tpl file.
Next we change the width of the table surrounding the entire forum. This width is set to 100% in the subSilver template, but we only want it to be 780 pixels for our template. We also add a height of 100% to stretch the template from top to bottom in our browser:
<table width="780" height="100%" cellspacing="0" cellpadding="10" border="0" align="center"> <tr> <td class="bodyline" valign="top">
The table will now cause all content inside it to appear ten pixels from the table borders, because of the size of the cellpadding. We changed the width to 780 pixels instead of 100%, and add the height 100%, in case we later decide on adding a background image or color on each side of the forum. Since the content, by default, is horizontally aligned in the middle of the table which is now 100% in height we need to align it so that it appears at the top. We can do this by adding a valign tag in the first <td> of the table.
After doing these modifications, the code of our table should look like this:
<table width="780" height="100%" cellspacing="0" cellpadding="10" border="0" align="center"> <tr> <td class="bodyline" valign="top">
[edit] Adding the Banner Image
We now want to add top_image.jpg the banner image that we made earlier which we first upload to the NoseBleed/images/ template folder. Without beginning to change and edit the rest of the already existing table structure which could easily turn out to be an editing task from hell we simply add a new independent table instead, directly underneath the line above, a table that will contain nothing but our banner image:
<table width="717" height="231" border="0" align="center"
cellpadding="0" cellspacing="0">
<tr>
<td>
<div align="center">
<a href="{U_INDEX}">
<img src="templates/NoseBleed/images/top_image.jpg" border="0"
alt="{L_INDEX}" vspace="1" />
</a>
</div>
</td>
</tr>
</table>
As you can see, I have added the <a href="{U_INDEX}"></a> link tag around the image, so that it works as a link back to the index page of the forum. This is similar to how subSilver also handles its own banner image. Basically, I just copied that part, using the same phpBB variable as was already given.
There are many variables like this one that we can use throughout the template, a list of all of which can be found at http://www.phpbb.com/styles/listvars.php.
Note that not all variables work in all the .tpl files. Most do, but some are meant for specific parts of the forum, like the registration page, the search page, etc.
[edit] Adding a Menu
The next thing we do is add the menu right under the top_image. Again we add a new table, below our banner image, this time with some temporary text that we will correct later. The text is added now to make it clearer when we start to add the real menu items.
<table width="715" height="20" border="0" align="center" cellpadding="0" cellspacing="0"> <tr> <td align="left"> FAQ Search Memberlist Usergroups Profile You have no new messages </td> <td align="right"> Log in Register </td> </tr> </table>
The sharp eye might have noticed that I made this table only 715 pixels wide instead of the 717 pixels that we'd decided on. The reason is just that it looks better this way, nothing more. I tried first with 717 pixels, but it then looked like the text was wider than the image. 715 pixels made it look more consistent.
In order to make the menu work, we need to turn each part of the menu into a link. For example, to make FAQ a link, <a href="url"> and </a> tags are added around it, where url should be replaced with the address of the file that we are linking FAQ to. The same thing has to be done for the rest of the menu:
<table width="715" height="20" border="0" align="center" cellpadding="0" cellspacing="0"> <tr> <td align="left"> <a href="url">FAQ</a> <a href="url">Search</a> <a href="url">Memberlist</a> <a href="url">Usergroups</a> <a href="url">Profile</a> <a href="url">You have no new messages</a> </td> <td align="right"> <a href="url">Log in</a> <a href="url">Register</a> </td> </tr> </table>
To replace the url with the actual address of where we want the link to take us, we can simply look at the way the subSilver template already used it. By looking at the code, each url can be replaced with the correct phpBB variable. We can also replace the text of the menu with variables; this way a user using the forum in another language won't be forced to have English menu items. After replacing the text, our table is now:
<table width="715" height="20" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td align="left">
<a href="{U_FAQ}">{L_FAQ}</a>
<a href="{U_SEARCH}">{L_SEARCH}</a>
<a href="{U_MEMBERLIST}">{L_MEMBERLIST}</a>
<a href="{U_GROUP_CP}">{L_USERGROUPS}</a>
<a href="{U_PROFILE}">{L_PROFILE}</a>
<a href="{U_PRIVATEMSGS}">{PRIVATE_MESSAGE_INFO}</a>
</td>
<td align="right">
<a href="{U_LOGIN_LOGOUT}">{L_LOGIN_LOGOUT}</a>
<a href="{U_REGISTER}">{L_REGISTER}</a></td>
</tr>
</table>
One thing to notice here is that users already logged in shouldn't be able to click Register. To prevent this, we can use the and tags. Everything between these tags will be shown only if the user is logged out, which is what we want for the Register menu. If we want something to be shown only when the user is logged in, we can use the tags and instead.
Personally, I see no reason why users not logged in should see the Profile and Private Messages menu, so I'm going to use these tags also to prevent guests from trying to access the profile and private messages menu.
The table should now look like this:
<table width="715" height="20" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td align="left">
<a href="{U_FAQ}">{L_FAQ}</a>
<a href="{U_SEARCH}">{L_SEARCH}</a>
<a href="{U_MEMBERLIST}">{L_MEMBERLIST}</a>
<a href="{U_GROUP_CP}">{L_USERGROUPS}</a>
<!-- BEGIN switch_user_logged_in -->
<a href="{U_PROFILE}">{L_PROFILE}</a>
<a href="{U_PRIVATEMSGS}">{PRIVATE_MESSAGE_INFO}</a>
<!-- END switch_user_logged_in -->
</td>
<td align="right">
<a href="{U_LOGIN_LOGOUT}">{L_LOGIN_LOGOUT}</a>
<!-- BEGIN switch_user_logged_out -->
<a href="{U_REGISTER}">{L_REGISTER}</a>
<!-- END switch_user_logged_out -->
</td>
</tr>
</table>
After saving the files, and uploading them (unless you are testing them locally), you'll see that it looks pretty good, except maybe for the font of the temporary text:
In order to change the font and colors of the template, I would like to introduce you to the Cascading Style Sheet (CSS).
[edit] CSS
If you look in the original subSilver menu you will notice that all of the links are surrounded by <span class="mainmenu"> and </span> tags. This is a reference to the CSS code, and if you look higher up in the code of the overall_header.tpl, where the CSS is located, you can find this (reformatted here for the book):
/* The register, login, search etc links at the top of the page */
.mainmenu { font-size : {T_FONTSIZE2}px;
color : {T_BODY_TEXT}
}
a.mainmenu { text-decoration: none;
color : {T_BODY_LINK};
}
a.mainmenu:hover { text-decoration: underline;
color : {T_BODY_HLINK};
}
Here we can change everything we want about the way the menu is displayed. The first line, surrounded by the /* and */ tags, is just a comment to help us out and is not used by the browser. The second line determines how the text, in this example, should be displayed, and the last two lines describe how the text should be displayed if it is a link. The variables are set from within the Admin Panel of the forum. Personally I like to add the CSS code for when a link has been visited, so I can be certain I don't suddenly get different colors or font sizes. The code is called a.mainmenu:visited and could be inserted either on its own line or as a part of the code already written, separated by a comma, as follows:
/* The register, login, search etc links at the top of the page */
.mainmenu { font-size : {T_FONTSIZE2}px;
color : {T_BODY_TEXT}
}
a.mainmenu,a.mainmenu:visited { text-decoration: none;
color : {T_BODY_LINK};
}
a.mainmenu:hover { text-decoration: underline;
color : {T_BODY_HLINK};
}
We could also add a definition for a.mainmenu:active if we want to define how the link should look when someone clicks on it.
With these definitions for our menu style, our table looks like this:
<table width="715" height="20" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td align="left">
<a href="{U_FAQ}" class="mainmenu">{L_FAQ}</a>
<a href="{U_SEARCH}" class="mainmenu">{L_SEARCH}</a>
<a href="{U_MEMBERLIST}" class="mainmenu">{L_MEMBERLIST}</a>
<a href="{U_GROUP_CP}" class="mainmenu">{L_USERGROUPS}</a>
<!-- BEGIN switch_user_logged_in -->
<a href="{U_PROFILE}" class="mainmenu">{L_PROFILE}</a>
<a href="{U_PRIVATEMSGS}" class="mainmenu">{PRIVATE_MESSAGE_INFO}</a>
<!-- END switch_user_logged_in -->
</td>
<td align="right">
<a href="{U_LOGIN_LOGOUT}" class="mainmenu">{L_LOGIN_LOGOUT}</a>
<!-- BEGIN switch_user_logged_out -->
<a href="{U_REGISTER}" class="mainmenu">{L_REGISTER}</a>
<!-- END switch_user_logged_out -->
</td>
</tr>
</table>
We are almost finished with the menu now. The only thing that doesn't look good is the menu items being too close to each other. In HTML, multiple spaces will only display as one space, but a way around this is to add the code instead, which in fact is just a spacing. It has the advantage that as many continuous spaces can be added as wanted.
We add two spacings between each menu item, and the span class mainmenu, in order to make the spacings the same font size as the font used in the menu.
The finished table looks like this:
<table width="715" height="20" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td align="left" class="mainmenu">
<a href="{U_FAQ}" class="mainmenu">{L_FAQ}</a>
<a href="{U_SEARCH}" class="mainmenu">{L_SEARCH}</a>
<a href="{U_MEMBERLIST}" class="mainmenu">{L_MEMBERLIST}</a>
<a href="{U_GROUP_CP}" class="mainmenu">{L_USERGROUPS}</a>
<!-- BEGIN switch_user_logged_in -->
<a href="{U_PROFILE}" class="mainmenu">{L_PROFILE}</a>
<a href="{U_PRIVATEMSGS}" class="mainmenu">{PRIVATE_MESSAGE_INFO}</a>
<!-- END switch_user_logged_in -->
</td>
<td align="right" class="mainmenu">
<a href="{U_LOGIN_LOGOUT}" class="mainmenu">{L_LOGIN_LOGOUT}</a>
<!-- BEGIN switch_user_logged_out -->
<a href="{U_REGISTER}" class="mainmenu">{L_REGISTER}</a>
<!-- END switch_user_logged_out -->
</td>
</tr>
</table>
We are now done with the tables in overall_header.tpl and can delete the left-over original subSilver table code.
It is time to enter the Admin Panel; we need to fix the text colors on the menu and this is where things might start to get a bit more confusing.
Let me start by saying that we do not need to use the Admin Panel settings of the forum in order to change the layout; we could just as easily edit the CSS code directly, without using variables. For example, say we wanted the text in the menu to be a little smaller, black, and when hovering the mouse over it, still black but underlined. The easiest way to achieve this would be to change the CSS to:
/* The register, login, search etc links at the top of the page */
.mainmenu { font-size : 11px;
color : black
}
a.mainmenu { font-size : 11px;
text-decoration: none;
color : black;
}
a.mainmenu:visited { font-size : 11px;
text-decoration: none;
color : black;
}
a.mainmenu:hover { font-size : 11px;
text-decoration: underline;
color : black;
}
However, this way we would have to edit the overall_header.tpl every time we wanted to change something. This might be an OK solution for you personally, but if you are planning on releasing the template publicly, it might not be such a good idea. Not everyone feels comfortable editing CSS code, and besides, if we have the option of changing these things from the Admin Panel, we might as well do it.
In the Administration Panel, by selecting the template under Styles Admin 'and Management' and editing it, you will find the variables used in the CSS. For example, the {T_FONTSIZE2} refers to Font Size 2:, which is set to 11. If you wanted your .mainmenu to have a smaller font, change it to 10 here. However, this would mean that everywhere else in the CSS that the {T_FONTSIZE2} appears, it would be font size 10 not exactly what we wanted.
Instead, it is easier to use {T_FONTSIZE1} in the CSS, which refers to Font Size 1: in the Admin Panel, which is already font size 10.
The Text Color: in the Admin Panel is set to 000000, which might be
a bit too dark on a white background like this. So we are changing it to a value of 111111 to soften it a little.
The Link Color: is set to 006699, which we are changing to a red
color with a value of 9F0002, the same value as for the brush in the top_image.jpg.
We will also use this value for the 'visited', 'active', and 'hover' link settings.
That is all we need for now, and we can save these settings and return to the forum.
The menu now has red text because it is using the link variables of the Admin Panel. If we want them black at all time, we need to change the following in the CSS code:
/* The register, login, search etc links at the top of the page */
.mainmenu {
font-size : {T_FONTSIZE2}px;
color : {T_BODY_TEXT}
}
a.mainmenu {
text-decoration: none;
color : {T_BODY_LINK};
}
a.mainmenu:hover {
text-decoration: underline;
color : {T_BODY_HLINK};
}
... to:
/* The register, login, search etc links at the top of the page */
.mainmenu {
font-size : {T_FONTSIZE1}px;
color : {T_BODY_TEXT}
}
a.mainmenu {
font-size : {T_FONTSIZE1}px;
text-decoration: none;
color : {T_BODY_TEXT};
}
a.mainmenu:visited {
font-size : {T_FONTSIZE1}px;
text-decoration: none;
color : {T_BODY_TEXT};
}
a.mainmenu:hover {
font-size : {T_FONTSIZE1}px;
text-decoration: underline;
color : {T_BODY_TEXT};
}
The menu is now with black text as wanted. Notice that we add the font-size : {T_FONTSIZE1}px; code to all the link definitions. This is something we don't normally have to
do since it is already defined in .mainmenu, but I have experienced that sometimes, if a user installs a new template with a CSS that only defines the font size in the .mainmenu, the template would use the font size from the previously installed template. It sounds strange, but this is something I have seen and it was not very pretty. There might be other ways to solve the problem, but this one has worked for me.
The gray background color and the borders around the forum don't seem to match the rest. Changing the Background Color: in the Admin Panel from E5E5E5 to FFFFFF solves the first problem, but there are still some borders we need to get rid off. If you
run into problems like this one, the best thing to do is to go back into the code for the .tpl file and find out what caused it. In this case, the borders are coming from a CSS in the first table called bodyline:
<table width="780" height="100%" cellspacing="0" cellpadding="10" border="0" align="center"> <tr> <td class="bodyline" valign="top">
In the CSS code we have:
/* This is the border line & background color round the entire page */
.bodyline {
background-color: {T_TD_COLOR2};
border: 1px {T_TH_COLOR1} solid;
}
Easy fix though, since only changing the border to 0px takes care of the problem.
We are now ready to edit the index_body.tpl, which displays the forum's index page.
[edit] Modifying the Forum Index in index_body.tpl
The first table in the index_body.tpl file looks like this:
<table width="100%" cellspacing="0" cellpadding="2" border="0" align="center">
<tr>
<td align="left" valign="bottom"><span class="gensmall">
<!-- BEGIN switch_user_logged_in -->
{LAST_VISIT_DATE}<br />
<!-- END switch_user_logged_in -->
{CURRENT_TIME}<br /></span><span class="nav">
<a href="{U_INDEX}" class="nav">{L_INDEX}</a></span>
</td>
<td align="right" valign="bottom" class="gensmall">
<!-- BEGIN switch_user_logged_in -->
<a href="{U_SEARCH_NEW}" class="gensmall">{L_SEARCH_NEW}</a>
<br />
<a href="{U_SEARCH_SELF}" class="gensmall">{L_SEARCH_SELF}</a>
<br />
<!-- END switch_user_logged_in -->
<a href="{U_SEARCH_UNANSWERED}" class="gensmall">{L_SEARCH_UNANSWERED}</a>
</td>
</tr>
</table>
It displays a range of variables: when the logged-in user last visited, the current time, a link to posts that the user hasn't read yet, and unanswered posts. We don't want to display these variables on top of the index page, so we simply copy the entire table, delete it, and paste it at the bottom of the .tpl instead. That way we can deal with it later.
For the top of the page, according to the layout idea, there should be two black lines under the menu with some text inside. This is a detail that should continue throughout the template, and something we have to build into all of the .tpl files.
The next table in index_body.tpl looks like this:
<table width="100%" cellpadding="2" cellspacing="1" border="0" class="forumline">
<tr>
<th colspan="2" class="thCornerL" height="25" nowrap="nowrap">
{L_FORUM}
</th>
<th width="50" class="thTop" nowrap="nowrap">
{L_TOPICS}
</th>
<th width="50" class="thTop" nowrap="nowrap">
{L_POSTS}
</th>
<th class="thCornerR" nowrap="nowrap">
{L_LASTPOST}
</th>
</tr>
<!-- BEGIN catrow -->
<tr>
<td class="catLeft" colspan="2" height="28">
<span class="cattitle">
<a href="{catrow.U_VIEWCAT}" class="cattitle">{catrow.CAT_DESC}</a>
</span>
</td>
<td class="rowpic" colspan="3" align="right">
</td>
</tr>
<!-- BEGIN forumrow -->
<tr>
<td class="row1" align="center" valign="middle" height="50">
<img src="{catrow.forumrow.FORUM_FOLDER_IMG}" width="46" height="25"
alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" />
</td>
<td class="row1" width="100%" height="50">
<span class="forumlink">
<a href="{catrow.forumrow.U_VIEWFORUM}" class="forumlink">{catrow.forumrow.FORUM_NAME}</a>
<br />
</span>
<span class="genmed">
{catrow.forumrow.FORUM_DESC}
<br />
</span>
<span class="gensmall">
{catrow.forumrow.L_MODERATOR} {catrow.forumrow.MODERATORS}
</span>
</td>
<td class="row2" align="center" valign="middle" height="50">
<span class="gensmall">
{catrow.forumrow.TOPICS}
</span>
</td>
<td class="row2" align="center" valign="middle" height="50">
<span class="gensmall">
{catrow.forumrow.POSTS}
</span>
</td>
<td class="row2" align="center" valign="middle" height="50" nowrap="nowrap">
<span class="gensmall">
{catrow.forumrow.LAST_POST}
</span>
</td>
</tr>
<!-- END forumrow -->
<!-- END catrow -->
</table>
This is the forum itself, with all the topics and categories, and this is what we want appearing at the top. On the first line, we can see that the table has a class="forumline" attribute. This is what creates the border around the table, and is what we want to modify. Jumping back to the CSS code of the overall_header.tpl, we can find:
/* This is the outline round the main forum tables */
.forumline {
background-color: {T_TD_COLOR2};
border: 2px {T_TH_COLOR2} solid;
}
The {T_TD_COLOR2} variable refers to Table Cell Color 2: in the Admin Panel, currently set to FFFFFF, a bright white. {T_TH_COLOR2} is the Table Header Color 2: that's set to 006699, a blue color. We can change this code any way we like to suit the frame around the table, but for this template, in order to keep it as simple as possible, and make it match the layout idea, we don't want any borders right now. The easiest thing to do would be to just remove the class="forumline attribute from the table, but if later we decide we want borders anyways, it would mean we have to go into all the .tpl files and add the attribute again manually too much work! Instead, we change the CSS to:
/* This is the outline round the main forum tables */
.forumline {
/*
background-color: {T_TD_COLOR2};
border: 2px {T_TH_COLOR2} solid;
*/
}
The table width is set to 100% now, which we change to 717 to match the image. We also add an align="center" attribute to make it centered on the page.
The first part of the table now looks like:
<table width="717" align="center" cellpadding="2" cellspacing="1" border="0" class="forumline">
<tr>
<th colspan="2" class="thCornerL" height="25" nowrap="nowrap">
{L_FORUM}
</th>
<th width="50" class="thTop" nowrap="nowrap">
{L_TOPICS}
</th>
<th width="50" class="thTop" nowrap="nowrap">
{L_POSTS}
</th>
<th class="thCornerR" nowrap="nowrap">
{L_LASTPOST}
</th>
</tr>
In the code, we can find the classes called thCornerL, thTop, and thCornerR. These are the ones displaying the blue background with orange text in the first row of our table. In our CSS code, we find them here:
/* Header cells - the blue and silver gradient backgrounds */
th {
color: {T_FONTCOLOR3};
font-size: {T_FONTSIZE2}px;
font-weight : bold;
background-color: {T_BODY_LINK};
height: 25px;
background-image: url(templates/subSilver/images/{T_TH_CLASS2});
}
... here:
th.thHead,th.thSides,th.thTop,th.thLeft,th.thRight,th.thBottom,th.thCornerL,th.thCornerR {
font-weight: bold;
border: {T_TD_COLOR2};
border-style: solid;
height: 28px;
}
... and here:
th.thHead,td.catHead {
font-size: {T_FONTSIZE3}px;
border-width: 1px 1px 0px 1px;
}
th.thSides,td.catSides,td.spaceRow {
border-width: 0px 1px 0px 1px;
}
th.thRight,td.catRight,td.row3Right {
border-width: 0px 1px 0px 0px;
}
th.thLeft,td.catLeft { border-width: 0px 0px 0px 1px; }
th.thBottom,td.catBottom { border-width: 0px 1px 1px 1px; }
th.thTop { border-width: 1px 0px 0px 0px; }
th.thCornerL { border-width: 1px 0px 0px 1px; }
th.thCornerR { border-width: 1px 1px 0px 0px; }
That's quite a mouthful! But don't despair; it is easier than it looks. If we start with the top left part of our table, the thCornerL class, we can follow it down the CSS code: First of all, it is a part of the th class, simply because we can find <th colspan="2" class="thCornerL" height="25" nowrap="nowrap"> in the table. In the CSS code for th, we can find the font color, the font size, the font weight, the background color, the height of the th, and the background image.
Further down, we find more definitions for th.thCornerL, with a border color, a border style, and a height of 28 pixels. We also get the exact definition of how the borders are displayed with th.thCornerL{border-width: 1px 0px 0px 1px; }, which is the size of the border on each side, clockwise starting from the top.
To change it, it is easiest to start from the bottom. We know that we want black lines above and below this section, so we can start by changing the CSS to:
th.thCornerL { border-width: 1px 0px 1px 0px; }
Going up in the CSS, we find border: {T_TD_COLOR2};, which in the Admin Panel refers to Table Cell Color 2, currently set to FFFFFF. Changing this color to black will change every instance in the CSS where {T_TD_COLOR2} is being used. And since we want that white table cell color, we need to do something different. Changing the border: {T_TD_COLOR2}; to border: {T_BODY_TEXT}; would give us the color of the text which we earlier set to black. That's one solution. The bad thing about this is that if we later want to change the font color, but not the black lines, we have to come back and edit the CSS again. Instead, we can add 111111 to the Table Cell Color 3 field (it's not being used yet) in the Admin Panel, and change the CSS to border: {T_TD_COLOR3};.
Following the CSS higher up, we find that in the th part there is a background image. If we want a background image behind this part of the table, we should keep this code. However, for this template we decided to go for a white background with black text, so again we add the /* and */ markers around the background image and the background color. After changing the font color and the font size, the CSS now looks like:
/* Header cells - the blue and silver gradient backgrounds */
th {
color: {T_BODY_TEXT};
font-size: {T_FONTSIZE1}px;
font-weight : bold;
/*
background-color: {T_BODY_LINK};
*/
height: 25px;
/*
background-image: url(templates/subSilver/images/{T_TH_CLASS2});
*/
}
... and:
th.thHead,th.thSides,th.thTop,th.thLeft,th.thRight,th.thBottom,th.thCornerL,th.thCornerR {
font-weight: bold;
border: {T_TD_COLOR3};
border-style: solid;
height: 28px;
}
... and:
th.thHead,td.catHead {
font-size: {T_FONTSIZE3}px;
border-width: 1px 1px 0px 1px;
}
th.thSides,td.catSides,td.spaceRow { border-width: 0px 1px 0px 1px; }
th.thRight,td.catRight,td.row3Right { border-width: 0px 1px 0px 0px; }
th.thLeft,td.catLeft { border-width: 0px 0px 0px 1px; }
th.thBottom,td.catBottom { border-width: 0px 1px 1px 1px; }
th.thTop { border-width: 1px 0px 0px 0px; }
th.thCornerL { border-width: 1px 0px 1px 0px; }
th.thCornerR { border-width: 1px 1px 0px 0px; }
Changing the thTop and thCornerR to have black lines similar to thCornerL is the last step needed to be done for now, and this can be done here:
th.thTop { border-width: 1px 0px 1px 0px; }
th.thCornerL { border-width: 1px 0px 1px 0px; }
th.thCornerR { border-width: 1px 0px 1px 0px; }
The rest of the table looks like this:
<!-- BEGIN catrow -->
<tr>
<td class="catLeft" colspan="2" height="28">
<span class="cattitle">
<a href="{catrow.U_VIEWCAT}" class="cattitle">{catrow.CAT_DESC}</a>
</span>
</td>
<td class="rowpic" colspan="3" align="right">
</td>
</tr>
<!-- BEGIN forumrow -->
<tr>
<td class="row1" align="center" valign="middle" height="50">
<img src="{catrow.forumrow.FORUM_FOLDER_IMG}" width="46" height="25"
alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" />
</td>
<td class="row1" width="100%" height="50">
<span class="forumlink">
<a href="{catrow.forumrow.U_VIEWFORUM}" class="forumlink">{catrow.forumrow.FORUM_NAME}</a>
<br />
</span>
<span class="genmed">
{catrow.forumrow.FORUM_DESC}
<br />
</span>
<span class="gensmall">
{catrow.forumrow.L_MODERATOR} {catrow.forumrow.MODERATORS}
</span>
</td>
<td class="row2" align="center" valign="middle" height="50">
<span class="gensmall">
{catrow.forumrow.TOPICS}
</span>
</td>
<td class="row2" align="center" valign="middle" height="50">
<span class="gensmall">
{catrow.forumrow.POSTS}
</span>
</td>
<td class="row2" align="center" valign="middle" height="50" nowrap="nowrap">
<span class="gensmall">
{catrow.forumrow.LAST_POST}
</span>
</td>
</tr>
<!-- END forumrow -->
<!-- END catrow -->
</table>
The catrow and the forumrow determine the categories and forum topics found in the database; they use the above HTML code to display the categories and topics, until there are no more to be found, like a loop. If we start with the first table row, we find where the name of the category is displayed:
<tr>
<td class="catLeft" colspan="2" height="28">
<span class="cattitle">
<a href="{catrow.U_VIEWCAT}" class="cattitle">{catrow.CAT_DESC}</a>
</span>
</td>
<td class="rowpic" colspan="3" align="right">
</td>
</tr>
Again, we hunt in our CSS code for the classes being used, starting with catLeft:
td.cat,td.catHead,td.catSides,td.catLeft,td.catRight,td.catBottom
{
background-image: url(templates/subSilver/images/{T_TH_CLASS1});
background-color:{T_TR_COLOR3};
border: {T_TH_COLOR3};
border-style: solid;
height: 28px;
}
Notice that catLeft is not the only class in this line. If we wanted all the other classes to look like this, except the catLeft class, the easiest way would be to just remove this class from the list and turn it into its own class underneath. But since all these classes are more or less only about displaying a background color and image, we leave the class where it is and change them all at once.
For this template, we don't use much from what is determined in these classes, so we change it to:
td.cat,td.catHead,td.catSides,td.catLeft,td.catRight,td.catBottom
{
/*
background-image: url(templates/subSilver/images/{T_TH_CLASS1});
background-color:{T_TR_COLOR3};
border: {T_TH_COLOR3};
border-style: solid;
*/
height: 28px;
}
We are keeping the height for now.
The next class we hunt for is called rowpic. What it actually does for our forum is simply displays a background image other than the one in catLeft, so the approach is the same. You can use this if you want to have an image background behind your category text, different from the image you would get from catLeft. But since we don't need any image there, we can remove that class from the table.
After doing this, our table should look like:
<tr>
<td class="catLeft" colspan="5" height="28">
<span class="cattitle">
<a href="{catrow.U_VIEWCAT}" class="cattitle">{catrow.CAT_DESC}</a>
</span>
</td>
</tr>
The category description is determined by the cattitle class, and we can find it in the CSS here:
/* Forum category titles */
.cattitle {
font-weight: bold;
font-size: {T_FONTSIZE3}px;
letter-spacing: 1px;
color : {T_BODY_LINK}
}
a.cattitle {
text-decoration: none;
color : {T_BODY_LINK};
}
a.cattitle:hover {
text-decoration: underline;
}
There is not much to change here except the font, which is a little too big; so the spacing of one pixel between each letter in the word has to go. We can also add an a.cattitle: visited class.
The class now looks like:
/* Forum category titles */
.cattitle {
font-weight: bold;
font-size: {T_FONTSIZE2}px;
color : {T_BODY_LINK}
}
a.cattitle {
text-decoration: none;
color : {T_BODY_LINK};
}
a.cattitle:visited {
text-decoration: none;
color : {T_BODY_LINK};
}
a.cattitle:hover {
text-decoration: underline;
}
Moving down in our .tpl, we find the forum row.
<!-- BEGIN forumrow -->
<tr>
<td class="row1" align="center" valign="middle" height="50">
<img src="{catrow.forumrow.FORUM_FOLDER_IMG}" width="46" height="25"
alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" />
</td>
<td class="row1" width="100%" height="50">
<span class="forumlink">
<a href="{catrow.forumrow.U_VIEWFORUM}" class="forumlink">{catrow.forumrow.FORUM_NAME}</a>
<br />
</span>
<span class="genmed">
{catrow.forumrow.FORUM_DESC}
<br />
</span>
<span class="gensmall">
{catrow.forumrow.L_MODERATOR} {catrow.forumrow.MODERATORS}
</span>
</td>
<td class="row2" align="center" valign="middle" height="50">
<span class="gensmall">
{catrow.forumrow.TOPICS}
</span>
</td>
<td class="row2" align="center" valign="middle" height="50">
<span class="gensmall">
{catrow.forumrow.POSTS}
</span>
</td>
<td class="row2" align="center" valign="middle" height="50" nowrap="nowrap">
<span class="gensmall">
{catrow.forumrow.LAST_POST}
</span>
</td>
</tr>
<!-- END forumrow -->
The classes of row1, row2, and row3 in the CSS determine the background colors for our template. They are defined by {T_TR_COLOR1}, {T_TR_COLOR2}, and {T_TR_COLOR3}, which again are defined in the Admin Panel by Table Row Color 1, Table Row Color 2, and Table Row Color 3. From the layout idea, we have already decided on light gray, to match the top_image of the template. We don't need to change anything in the CSS code, but from the Admin Panel, we add the new values of F3F3F3, EBEBEB, and E3E3E3, with the first color being the same as in the top_image.jpg and the others, slightly darker.
Next in our table are the folder images, defined by the {catrow.forumrow.FORUM_FOL DER_IMG} variable. We don't want to change anything here. Later in the tutorial we will see how to make new icons and images. The forumlink class determines what the font of the text describing the forum should look like. In the CSS we find the following:
/* Forum title: Text and link to the forums used in: index.php */
.forumlink {
font-weight: bold;
font-size: {T_FONTSIZE3}px;
color : {T_BODY_LINK};
}
a.forumlink {
text-decoration: none;
color : {T_BODY_LINK};
}
a.forumlink:hover {
text-decoration: underline;
color : {T_BODY_HLINK};
}
There isn't much to change here, except maybe the font size from {T_FONTSIZE3} to {T_FONTSIZE2}, and the hover color from {T_BODY_HLINK} to {T_BODY_LINK}. {T_BODY_HLINK} is the hover setting of links from the Admin Panel, but there is no need for a different color for this. The changed class now looks like:
/* Forum title: Text and link to the forums used in: index.php */
.forumlink {
font-weight: bold;
font-size: {T_FONTSIZE2}px;
color : {T_BODY_LINK};
}
a.forumlink {
text-decoration: none;
color : {T_BODY_LINK};
}
a.forumlink:visited {
text-decoration: none;
color : {T_BODY_LINK};
}
a.forumlink:hover {
text-decoration: underline;
color : {T_BODY_LINK};
}
As you might have noticed by now, it is not all that difficult to change the CSS, and I will try to spare you from a detailed description for the rest of the tutorial.
The next thing to change is the size of the genmed class to {T_FONTSIZE1} in the CSS, to make it a little smaller.
We are almost finished with this table now, but the text in the table row is really close to the edges. I am not too happy about that, and one way to solve this problem is to change the cellpadding value from 2 to 4 in the table. Another way would be to add a padding definition to a CSS class or even to make a new class and then add it to the table. We go for the first solution here.
Finally, to spice up the forum a bit, we add a rollover effect on the table row, meaning that it will change color when you move the mouse over it, and at the same time the whole table row will work as a link.
Our table should now look like:
<table width="717" align="center" cellpadding="4" cellspacing="1" border="0" class="forumline">
<tr>
<th colspan="2" class="thCornerL" height="25" nowrap="nowrap">
{L_FORUM}
</th>
<th width="50" class="thTop" nowrap="nowrap">
{L_TOPICS}
</th>
<th width="50" class="thTop" nowrap="nowrap">
{L_POSTS}
</th>
<th class="thCornerR" nowrap="nowrap">
{L_LASTPOST}
</th>
</tr>
<!-- BEGIN catrow -->
<tr>
<td class="catLeft" colspan="5" height="28">
<span class="cattitle">
<a href="{catrow.U_VIEWCAT}" class="cattitle">{catrow.CAT_DESC}</a>
</span>
</td>
</tr>
<!-- BEGIN forumrow -->
<tr>
<td class="row1" align="center" valign="middle" height="50">
<img src="{catrow.forumrow.FORUM_FOLDER_IMG}" width="46" height="25"
alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" />
</td>
<td class="row1" width="100%" height="50"
onmouseover="this.style.backgroundcolor='{T_TR_COLOR2}';
this.style.cursor='pointer';"
onmouseout=this.style.backgroundcolor=""
onclick="window.location.href='{catrow.forumrow.U_VIEWFORUM}'">
<span class="forumlink">
<a href="{catrow.forumrow.U_VIEWFORUM}" class="forumlink">{catrow.forumrow.FORUM_NAME}</a>
<br />
</span>
<span class="genmed">
{catrow.forumrow.FORUM_DESC}
<br />
</span>
<span class="gensmall">
{catrow.forumrow.L_MODERATOR} {catrow.forumrow.MODERATORS}
</span>
</td>
<td class="row2" align="center" valign="middle" height="50">
<span class="gensmall">
{catrow.forumrow.TOPICS}
</span>
</td>
<td class="row2" align="center" valign="middle" height="50">
<span class="gensmall">
{catrow.forumrow.POSTS}
</span>
</td>
<td class="row2" align="center" valign="middle" height="50" nowrap="nowrap">
<span class="gensmall">
{catrow.forumrow.LAST_POST}
</span>
</td>
</tr>
<!-- END forumrow -->
<!-- END catrow -->
</table>
The next table in our index_body.tpl file displays the link for "mark all forums" and the time and time-zone for the forum:
<table width="100%" cellspacing="0" border="0" align="center" cellpadding="2">
<tr>
<td align="left">
<span class="gensmall">
<a href="{U_MARK_READ}" class="gensmall">{L_MARK_FORUMS_READ}</a>
</span>
</td>
<td align="right">
<span class="gensmall">
{S_TIMEZONE}
</span>
</td>
</tr>
</table>
It looks quite good; the only thing to change is the width from 100% to 717 pixels; also, we want to change the gensmall class in the CSS to have black links instead of red, similar to what we did with the mainmenu class.
This takes care of the main part of the forum.
The next part of the index_body.tpl file is the table that displays who is online and other relevant information about the forum users. This table is found only in this .tpl file, and in my opinion it is not really a part of the forum itself, but more is of something extra being added. For this reason we insert this part at the bottom of the page, and also add here all the extra links we removed from the top of the file. We can add it all in a table, giving it the class of thTop so that it will have black lines above and below it, like we have with the menu.
To add a little space around the table, we insert an extra table row with a height of ten pixels at the beginning and end of the table.
The new table looks like:
<table align="center" width="717" border="0" cellspacing="0" cellpadding="0">
<tr height="10"><td>&nsbp;</td></tr>
<tr>
<th colspan="2" class="thTop" height="25" nowrap="nowrap">
<table width="717" cellspacing="0" cellpadding="2"
border="0" align="center">
<tr>
<td align="left" valign="bottom">
<span class="gensmall">
<!-- BEGIN switch_user_logged_in -->
{LAST_VISIT_DATE}
<br />
<!-- END switch_user_logged_in -->
{CURRENT_TIME}
<br />
</span>
<span class="nav">
<a href="{U_INDEX}" class="nav">{L_INDEX}</a>
</span>
</td>
<td align="right" valign="bottom" class="gensmall">
<!-- BEGIN switch_user_logged_in -->
<a href="{U_SEARCH_NEW}" class="gensmall">{L_SEARCH_NEW}</a>
<br />
<a href="{U_SEARCH_SELF}" class="gensmall">{L_SEARCH_SELF}</a>
<br />
<!-- END switch_user_logged_in -->
<a href="{U_SEARCH_UNANSWERED}" class="gensmall">{L_SEARCH_UNANSWERED}</a>
</td>
</tr>
</table></th>
</tr>
<tr height="10"><td>&nsbp;</td></tr>
</table>
We can now delete the table (the one we moved from the top in the beginning) at the bottom of the .tpl file.
We can now deal with the next table, which displays the information about the users of the forum. There are only a few things changes here: the width should be 717 pixels instead of 100%, and we need to add an align="center" tag.
Under this table is another table, with a variable displaying the number of active users in the past five minutes. Changing the width and aligning it like the above table corrects this table as well.
Next we have the login table, surrounded by and tags to make sure only users that are not logged in can see the table. If you want the login information to appear at the top of your site, just copy and paste this where you want it. For this template it is fine where it is now though, and again the only changes necessary are the width and the alignment.
There is one thing to notice here: the <form...> element. In some browsers, by adding a form, the element will also add a margin above and under it, almost making it look like you added a line break in the HTML code above and under the form. To prevent this, add this class in the CSS:
/* Form */
form {
margin: 0px;
padding: 0px;
}
Now we can add line breaks manually, above and under the form, and be sure it displays evenly in different browsers.
The last part of the index_body.tpl file shows the icons of the forum. We will come back to this later in the tutorial, and leave it unchanged for now. The following screenshot shows what our forum looks like with the changes made up until now:
[edit] Modifying the Forum Body in viewforum_body.tpl
The next file we edit is the viewforum_body.tpl template. This is the file displaying the content of the forum after the index. Here is how our forum looks like before editing the .tpl file:
The first line of code in viewforum.tpl is a form object, which we leave unchanged. And, as with the index_body.tpl, we move the first table to the end of the file, so that we can get the black lines appearing at the top, right under the menu. In the start of the code, we now have the following table:
<table border="0" cellpadding="4" cellspacing="1" width="100%" class="forumline">
<tr>
<th colspan="2" align="center" height="25" class="thCornerL" nowrap="nowrap">
{L_TOPICS}
</th>
<th width="50" align="center" class="thTop" nowrap="nowrap">
{L_REPLIES}
</th>
<th width="100" align="center" class="thTop" nowrap="nowrap">
{L_AUTHOR}
</th>
<th width="50" align="center" class="thTop" nowrap="nowrap">
{L_VIEWS}
</th>
<th align="center" class="thCornerR" nowrap="nowrap">
{L_LASTPOST}
</th>
</tr>
<!-- BEGIN topicrow -->
<tr>
<td class="row1" align="center" valign="middle" width="20">
<img src="{topicrow.TOPIC_FOLDER_IMG}" width="19" height="18" alt="{topicrow.L_TOPIC_FOLDER_ALT}"
title="{topicrow.L_TOPIC_FOLDER_ALT}" />
</td>
<td class="row1" width="100%">
<span class="topictitle">
{topicrow.NEWEST_POST_IMG}{topicrow.TOPIC_TYPE}
<a href="{topicrow.U_VIEW_TOPIC}" class="topictitle">{topicrow.TOPIC_TITLE}</a>
</span>
<span class="gensmall">
<br />
{topicrow.GOTO_PAGE}
</span>
</td>
<td class="row2" align="center" valign="middle">
<span class="postdetails">
{topicrow.REPLIES}
</span>
</td>
<td class="row3" align="center" valign="middle">
<span class="name">
{topicrow.TOPIC_AUTHOR}
</span>
</td>
<td class="row2" align="center" valign="middle">
<span class="postdetails">
{topicrow.VIEWS}
</span>
</td>
<td class="row3Right" align="center" valign="middle" nowrap="nowrap">
<span class="postdetails">
{topicrow.LAST_POST_TIME}
<br />
{topicrow.LAST_POST_AUTHOR} {topicrow.LAST_POST_IMG}
</span>
</td>
</tr>
<!-- END topicrow -->
<!-- BEGIN switch_no_topics -->
<tr>
<td class="row1" colspan="6" height="30" align="center" valign="middle">
<span class="gen">
{L_NO_TOPICS}
</span>
</td>
</tr>
<!-- END switch_no_topics -->
<tr>
<td class="catBottom" align="center" valign="middle" colspan="6" height="28">
<span class="genmed">
{L_DISPLAY_TOPICS}: {S_SELECT_TOPIC_DAYS} <input type="submit" class="liteoption" value="{L_GO}"
name="submit" />
</span>
</td>
</tr>
</table>
Again, we change the width from 100% to 717 pixels, and center-align it.
Under the black lines, the forum starts with the gray rows. But to make it fit better with the index page, we add an extra table row with two links: one to go back to the index page, and one to display the name of the selected forum. Instead of having the first link displaying the full name of the index page, we put instead a < sign to keep it short, which we add in the code with <. The top part of the table should now look like this:
<table border="0" cellpadding="4" cellspacing="1" width="717" class="forumline" align="center">
<tr>
<th colspan="2" align="center" height="25" class="thCornerL" nowrap="nowrap">
{L_TOPICS}
</th>
<th width="50" align="center" class="thTop" nowrap="nowrap">
{L_REPLIES}
</th>
<th width="100" align="center" class="thTop" nowrap="nowrap">
{L_AUTHOR}
</th>
<th width="50" align="center" class="thTop" nowrap="nowrap">
{L_VIEWS}
</th>
<th align="center" class="thCornerR" nowrap="nowrap">
{L_LASTPOST}
</th>
</tr>
<tr>
<th colspan="6" align="left" height="28" class="nav" nowrap="nowrap">
<a href="{U_INDEX}" class="nav"><</a>
<a class="nav" href="{U_VIEW_FORUM}">{FORUM_NAME}</a>
</th>
</tr>
The next part of the table looks like:
<!-- BEGIN topicrow -->
<tr>
<td class="row1" align="center" valign="middle" width="20">
<img src="{topicrow.TOPIC_FOLDER_IMG}" width="19" height="18" alt="{topicrow.L_TOPIC_FOLDER_ALT}"
title="{topicrow.L_TOPIC_FOLDER_ALT}" />
</td>
<td class="row1" width="100%">
<span class="topictitle">
{topicrow.NEWEST_POST_IMG}{topicrow.TOPIC_TYPE}<a href="{topicrow.U_VIEW_TOPIC}"
class="topictitle">{topicrow.TOPIC_TITLE}</a>
</span>
<span class="gensmall">
<br />
{topicrow.GOTO_PAGE}
</span>
</td>
<td class="row2" align="center" valign="middle">
<span class="postdetails">
{topicrow.REPLIES}
</span>
</td>
<td class="row3" align="center" valign="middle">
<span class="name">
{topicrow.TOPIC_AUTHOR}
</span>
</td>
<td class="row2" align="center" valign="middle">
<span class="postdetails">
{topicrow.VIEWS}
</span>
</td>
<td class="row3Right" align="center" valign="middle" nowrap="nowrap">
<span class="postdetails">
{topicrow.LAST_POST_TIME}
<br />
{topicrow.LAST_POST_AUTHOR} {topicrow.LAST_POST_IMG}
</span>
</td>
</tr>
<!-- END topicrow -->
This section will loop for every topic, between the and the tags. Notice that the rows have the background colors of the CSS classes row1, row2, row3, and row3right. There are a few things we could change, the first being the row color, and the second, the font size for the author of the topic. This row is darker than the two surrounding ones; it doesn't look very good, so we change it to the class of row2. As far as concerns the font, this row uses the name span class, which we change to {T_FONTSIZE1} in the CSS.
The red and bold font of the topic doesn't look very good either, so we modify it to the small and normal default black font that we also used in the index.
This class is called topictitle, and in the CSS it looks like:
/* titles for the topics: could specify viewed link colour too */
.topictitle,h1,h2 {
font-weight: bold;
font-size: {T_FONTSIZE2}px;
color : {T_BODY_TEXT};
}
a.topictitle:link {
text-decoration: none;
color : {T_BODY_LINK};
}
a.topictitle:visited {
text-decoration: none;
color : {T_BODY_VLINK};
}
a.topictitle:hover {
text-decoration: underline;
color : {T_BODY_HLINK};
}
... which we change to:
/* titles for the topics: could specify viewed link colour too */
.topictitle,h1,h2 {
font-size: {T_FONTSIZE1}px;
color : {T_BODY_TEXT};
}
a.topictitle:link {
text-decoration: none;
color : {T_BODY_TEXT};
}
a.topictitle:visited {
text-decoration: none;
color : {T_BODY_TEXT};
}
a.topictitle:hover {
text-decoration: underline;
color : {T_BODY_TEXT};
}
We are almost done with this section. It is worth mentioning that when an Announcement, Sticky, or Poll post is posted, it will display the matching text in front of the name of the topic using a variable named {topicrow.TOPIC_TYPE}. To match the link color, we would like this text to be red instead of black, but at the same time would like it to use the class of topictitle, like the rest of the text. To solve this, we add <span style="color: {T_BODY_LINK}"> and </span> tags around it, which will change only the color of the text and not the size or other attributes.
Finally once we add the rollover effect as in the index page, the section should now look like this:
<!-- BEGIN topicrow -->
<tr>
<td class="row1" align="center" valign="middle" width="20">
<img src="{topicrow.TOPIC_FOLDER_IMG}" width="19" height="18" alt="{topicrow.L_TOPIC_FOLDER_ALT}"
title="{topicrow.L_TOPIC_FOLDER_ALT}" />
</td>
<td class="row1" width="100%"
onmouseover="this.style.backgroundcolor='{T_TR_COLOR2}';
this.style.cursor='pointer';"
onmouseOut=this.style.backgroundcolor=""
onclick="window.location.href='{topicrow.U_VIEW_TOPIC}'">
<span class="topictitle">
{topicrow.NEWEST_POST_IMG}
<span style="color: {T_BODY_LINK}">
{topicrow.TOPIC_TYPE}
</span>
<a href="{topicrow.U_VIEW_TOPIC}" class="topictitle">{topicrow.TOPIC_TITLE}</a>
</span>
<span class="gensmall">
<br />
{topicrow.GOTO_PAGE}
</span>
</td>
<td class="row2" align="center" valign="middle">
<span class="postdetails">
{topicrow.REPLIES}
</span>
</td>
<td class="row2" align="center" valign="middle">
<span class="name">
{topicrow.TOPIC_AUTHOR}
</span>
</td>
<td class="row2" align="center" valign="middle">
<span class="postdetails">
{topicrow.VIEWS}
</span>
</td>
<td class="row3Right" align="center" valign="middle" nowrap="nowrap">
<span class="postdetails">
{topicrow.LAST_POST_TIME}
<br />
{topicrow.LAST_POST_AUTHOR} {topicrow.LAST_POST_IMG}
</span>
</td>
</tr>
<!-- END topicrow -->
The next part of the table looks like this:
<!-- BEGIN switch_no_topics -->
<tr>
<td class="row1" colspan="6" height="30" align="center"
valign="middle">
<span class="gen">
{L_NO_TOPICS}
</span>
</td>
</tr>
<!-- END switch_no_topics -->
This is what will be displayed if there are no topics in the forum. Again, the font size is a little too big and there are two ways to change it; either change the <span class="gen"> to <span class="gensmall">, or change the CSS of gen to use a different font size. Here, we do the latter since this template will probably always need the gen class to be a smaller size.
The table row looks empty and narrow as it is now, and so it needs to be a bit larger; we just add some line breaks here, and this part of the table is done:
<!-- BEGIN switch_no_topics -->
<tr>
<td class="row1" colspan="6" height="30" align="center" valign="middle">
<span class="gen">
<br />
{L_NO_TOPICS}
<br />
<br />
</span>
</td>
</tr>
<!-- END switch_no_topics -->
The last part of the table looks like this:
<tr>
<td class="catBottom" align="center" valign="middle" colspan="6" height="28">
<span class="genmed">
{L_DISPLAY_TOPICS}: {S_SELECT_TOPIC_DAYS} <input type="submit" class="liteoption"
value="{L_GO}" name="submit" />
</span>
</td>
</tr>
</table>
Instead of using the gray background colors of row1, row2, or row3,
the table uses a class called catBottom. We find it in our CSS here:
td.cat,td.catHead,td.catSides,td.catLeft,td.catRight,td.catBottom {
/*
background-image: url(templates/subSilver/images/{T_TH_CLASS1});
background-color:{T_TR_COLOR3};
border: {T_TH_COLOR3};
border-style: solid;
*/
height: 28px;
}
We have already changed this code earlier when we removed the background color and image from our menu. We didn't need it then, and so we added the /* and */ comment markers around it. That was only for our catLeft and catRight classes, and now we need something different for our catBottom. To solve this, we must remove the catBottom class from this area and add it below with its own code:
td.cat,td.catHead,td.catSides,td.catLeft,td.catRight {
/*
background-image: url(templates/subSilver/images/{T_TH_CLASS1});
background-color:{T_TR_COLOR3};
border: {T_TH_COLOR3};
border-style: solid;
*/
height: 28px;
}
td.catBottom { background-color:{T_TR_COLOR3}; }
We give it the background color of {T_TR_COLOR3}, which is the same as row3, the darkest of the gray tones.
[edit] Fixing the Size of the Jump Menu
The last thing to fix in this table is the font size of the jump menu and the button next to it. The properties for both the jump menu and the button are under select and input in the CSS:
/* Form elements */
input,textarea, select {
color : {T_BODY_TEXT};
font: normal {T_FONTSIZE2}px {T_FONTFACE1};
border-color : {T_BODY_TEXT};
}
All we need to do is change the font size to {T_FONTSIZE1}.
We align the td to the right instead of keeping it centered, to make the menu appear on the right side.
In the index_body.tpl file we had a table after the main table, and it looked like this:
<table width="717" cellspacing="0" border="0" align="center" cellpadding="2">
<tr>
<td align="left">
<span class="gensmall">
<a href="{U_MARK_READ}" class="gensmall">{L_MARK_FORUMS_READ}</a>
</span>
</td>
<td align="right">
<span class="gensmall">
{S_TIMEZONE}
</span>
</td>
</tr>
</table>
We use this again, except that this time we change the {L_MARK_FORUMS_READ} variable to {L_MARK_TOPICS_READ}, and then paste it in here.
After this table in the index_body.tpl, came the table with the black lines above and below it, and it looked like this:
<table align="center" width="717" border="0" cellspacing="0" cellpadding="0">
<tr height="10"><td></td></tr>
<tr>
<th colspan="2" class="thTop" height="25" nowrap="nowrap"><table width="717" cellspacing="0"
cellpadding="2" border="0" align="center">
<tr>
<td align="left" valign="bottom">
<span class="gensmall">
<!-- BEGIN switch_user_logged_in -->
{LAST_VISIT_DATE}
<br />
<!-- END switch_user_logged_in -->
{CURRENT_TIME}
<br />
</span>
<span class="nav">
<a href="{U_INDEX}" class="nav">{L_INDEX}</a>
</span>
</td>
<td align="right" valign="bottom" class="gensmall">
<!-- BEGIN switch_user_logged_in -->
<a href="{U_SEARCH_NEW}" class="gensmall">{L_SEARCH_NEW}</a>
<br />
<a href="{U_SEARCH_SELF}" class="gensmall">{L_SEARCH_SELF}</a>
<br />
<!-- END switch_user_logged_in -->
<a href="{U_SEARCH_UNANSWERED}" class="gensmall">{L_SEARCH_UNANSWERED}</a>
</td>
</tr>
</table></th>
</tr>
<tr height="10"><td></td></tr>
</table>
We copy this table from index.tpl and paste it in here. Instead of using the variables used there, we use the ones we have from the original first table (the table that was earlier moved to the end of the file). The table then looks like:
<table align="center" width="717" border="0" cellspacing="0" cellpadding="2">
<tr height="10"><td></td></tr>
<tr>
<th colspan="2" class="thTop" height="25" nowrap="nowrap">
<table align="left" width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="left" valign="top">
<span class="gensmall">
{L_MODERATOR}: {MODERATORS}
<br />
{LOGGED_IN_USER_LIST}
</span>
</td>
<td align="right" valign="top">
<span class="gensmall">
{PAGE_NUMBER}
<br />
{PAGINATION}
</span>
</td>
</tr>
<tr align="left" valign="top">
<td colspan="2">
<span class="nav">
<a href="{U_INDEX}" class="nav">{L_INDEX}</a>
~
<a class="nav" href="{U_VIEW_FORUM}">{FORUM_NAME}</a>
</span>
</td>
</tr>
</table>
</th>
</tr>
<tr height="10"><td></td></tr>
</table>
The next table looks like this:
<table width="100%" cellspacing="2" border="0" align="center"
cellpadding="2">
<tr>
<td align="left" valign="middle" width="50">
<a href="{U_POST_NEW_TOPIC}"><img src="{POST_IMG}" border="0" alt="{L_POST_NEW_TOPIC}" /></a>
</td>
<td align="left" valign="middle" width="100%">
<span class="nav">
<a href="{U_INDEX}" class="nav">{L_INDEX}</a> -> <a class="nav" href="{U_VIEW_FORUM}">{FORUM_NAME}</a>
</span>
</td>
<td align="right" valign="middle" nowrap="nowrap">
<span class="gensmall">
{S_TIMEZONE}
</span>
<br />
<span class="nav">
{PAGINATION}
</span>
</td>
</tr>
<tr>
<td align="left" colspan="3">
<span class="nav">
{PAGE_NUMBER}
</span>
</td>
</tr>
</table>
</form>
This table contains the New Topic button and the end tag of the form, but we do not really need to use the other variables again, and can cut down the table to this:
<table width="715" align="center" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>
<a href="{U_POST_NEW_TOPIC}"><img src="{POST_IMG}" border="0" alt="{L_POST_NEW_TOPIC}" /></a>
</td>
</tr>
</table>
</form>
Then we have the table with the jump box. We only need to change the width and the alignment, but here again we add an extra table row with a height of ten pixels, just to get some space between the different areas.
The last table displays the icons and the list of what the user can do in this topic, and we only fix the width for now.
And this leads us to the end of viewforum_body.tpl.
[edit] And the Story Continues
The rest of the .tpl files need the same kind of editing: locate the class in the CSS, copy the tables from previously edited files whenever possible, and use the phpBB variables specific for the .tpl you are working with. You should have a pretty good idea of how to do this by now, and instead of explaining every .tpl in detail for the rest of the tutorial, we will sum up their functions here.
Starting from the first file throughout the NoseBleed folder:
agreement.tpl
This is the first page forum visitors encounter when they want to register. It explains the registration agreement terms and checks for the visitor's age.
bbcode.tpl
This is the file that phpBB uses to display quotes and code, e-mail links, images in posts, URLs, and more. If, for example, you do not like the way quotes are displayed, this is the file you need to edit.
confirm_body.tpl
This file is displayed if the user has to confirm something with either 'yes' or 'no'.
error_body.tpl
This file displays error messages.
faq_body.tpl
This file displays the FAQ section.
forumIE.css
This is for additional CSS code, with IE-specific formatting definitions.
groupcp_info_body.tpl
This file displays usergroup information and members.
groupcp_pending_info.tpl
This file displays to the group moderators for them to allow or forbid pending users to join the usergroup.
groupcp_user_body.tpl
This file displays an overview of all the usergroups, as well as which usergroup the user belongs to.
index.htm
This file displays an image made by the designer of the template. It is included and displayed to prevent visitors of the site from viewing the files in the folder.
index_body.tpl
This is the main page for your forum.
jumpbox.tpl
This file displays the jump box.
login_body.tpl
This file displays the way the forum looks when someone wants to log in.
memberlist_body.tpl
This file displays the registered users of the forum.
message_body.tpl
This file displays a confirmation message from phpBB to the user; e.g., after changing your profile and clicking the submit button, you will be shown this file, to confirm that your profile has been updated.
modcp_body.tpl
This file is used when a moderator wants to moderate a post.
modcp_move.tpl
This file is used when a moderator wants to move a topic.
modcp_split.tpl
This file is used when a moderator wants to split a topic.
modcp_viewip.tpl
This file is used when a moderator wants to see the IP number of the user that posted the selected post.
subSilver.tpl
This is the configuration file of your template and should be renamed to the template's name, e.g. NoseBleed.tpl. It tells phpBB where it can find the different images and icons for the template.
subSilver.css
This is the CSS file of the template, and should be renamed to the template's name if you want to reuse it. By default, it is not being used; instead, the CSS code is located at the beginning of the overall_header.tpl file. Later, in Final Touches section of this tutorial, you will see how to move the CSS to its own file, which is something you might want to do if you are trying to save bandwidth.
overall_footer.tpl
This file is displayed at the bottom of almost all pages. It contains the link to the Admin Panel and the phpBB copyright note.
overall_header.tpl
This file is displayed at the top of almost all pages. By default it has the CSS code at the beginning of the file.
posting_body.tpl
This file displays when the user is posting a new post. It also contains JavaScript code for a pop-up window, used when the user wants to see all the emoticons he or she can use in the post.
posting_poll_body.tpl
This file displays how to add a poll to the post, and is loaded from posting_body.tpl with the variable {POLLBOX}.
posting_preview.tpl
This file displays how a preview of the post looks, and is loaded from posting_body.tpl with the variable {POST_PREVIEW_BOX}.
posting_smilies.tpl
This file displays in the pop-up window all the emoticons that a user can use in his or her post. This file uses simple_header.tpl and simple_footer.tpl instead of overall_header.tpl and overall_footer.tpl.
posting_topic_review.tpl
This file appears in an iframe in posting_body.tpl, using the {TOPIC_REVIEW_BOX} variable. This file uses simple_header.tpl and simple_footer.tpl instead of overall_header.tpl and overall_footer.tpl.
privmsgs_body.tpl
This file displays all your private messages.
privmsgs_popup.tpl
Whenever a user receives a new private message, a small pop-up window telling him or her about it will appear when he or she visits the forum. This file uses simple_header.tpl and simple_footer.tpl instead of overall_header.tpl and overall_footer.tpl.
privmsgs_preview.tpl
This file displays a preview of your private message, loaded from posting_body.tpl with the {POST_PREVIEW_BOX} variable.
privmsgs_read_body.tpl
This file displays when a user is reading a private message.
profile_add_body.tpl
This file displays when a visitor registers, and it is used to gather information like username, password, location, etc. This file is also displayed if the user wants to change his or her profile settings.
profile_avatar_gallery.tpl
This file displays a list of avatars that the user can choose from, to add to his or her profile setting.
profile_send_email.tpl
This file displays when a user is sending an e-mail to another user of the forum.
profile_send_pass.tpl
This file displays how to retrieve a forgotten password.
profile_view_body.tpl
This file displays the profile of a registered user.
search_body.tpl
This file displays when a user is searching a post or topic.
search_results_posts.tpl
This file displays only a list of posts containing the searched for word or expression.
search_results_topics.tpl
This file displays only a list of topics containing the searched for word or expression.
search_username.tpl
This file displays, in a pop-up window, when searching for a username. It is loaded from posting_body.tpl with the variable {U_SEARCH_USER}. This file uses simple_header.tpl and simple_footer.tpl instead of overall_header.tpl and overall_footer.tpl.
simple_footer.tpl
This file replaces the overall_footer.tpl in pop-up windows and iframes.
simple_header.tpl
This file replaces the overall_header.tpl in popup windows and iframes. Sometimes, copying the CSS from overall_header.tpl and pasting it into simple_header.tpl is enough to make the look of the pop-up windows and iframes match the rest of the template.
theme_info.cfg
This is the configuration file for the template. The first time it is installed, the template uses the default values of colors, fonts, etc., from this file. If you plan on releasing your templates for other people, be sure you have the correct values in this file. You do not need to type all these values in manually. If you go to the Admin Panel, under Styles Admin and select Export, phpBB will create a new theme_info.cfg file with all the font and color settings from the Admin Panel. You can download and use this file instead.
viewforum_body.tpl
This file displays the list of topics in the selected forum.
viewonline_body.tpl
This file displays the list of users and guests on the forum.
viewtopic_body.tpl
This file displays the topics on your forum.
viewtopic_poll_ballot.tpl
This file displays the poll ballot in the topic. It is loaded from viewtopic_body.tpl with the {POLL_DISPLAY} variable.
viewtopic_poll_result.tpl
This file displays the result of the poll in the topic. It is loaded from viewtopic_body.tpl with the {POLL_DISPLAY} variable.
The Admin Folder
The files in the admin folder of the template control how the Admin Panel is displayed. They use page_header.tpl and page_footer.tpl instead of overall_header.tpl and overall_footer.tpl. Sometimes, copying the CSS from overall_header.tpl and pasting it into page_header.tpl is enough to make the Admin Panel match the rest of the template.
[edit] Icons and Images
All the icons and images of the template are located in the images folder. This folder contains another folder, which contains the specific language images. There is one thing to notice here: the icon for Delete is universal and is displayed only by an X in the image. If we want our image to display actual text such as Delete instead, we should place the image in the specific language folder, in this case the lang_english folder. Since phpBB will not look for the Delete image in the language folder, we need to edit the NoseBleed.cfg file. Going down in the code we find this:
$images['icon_delpost'] = "$current_template_images/icon_delete.gif";
This is the path phpBB is using for this image. Adding the {LANG}language variable, we can specify the new path:
$images['icon_delpost'] = "$current_template_images/{LANG}/icon_delete.gif";
Making all the new images and icons might scare off many people, but there is a bright side to this: we do not have to start from scratch.
At http://www.phpbb.com/downloads.php#subSilver the original SDK files can be downloaded, and then edited with Photoshop, GIMP, Paint Shop Pro, and other programs. An easy solution if we are only interested in changing the font color, font size or background.
For the NoseBleed template, this file is downloaded and the font and the background of the icons changed, but the little icons for the language buttons are kept the same.
To simplify the use of icons and images even more, all the icons that are used for no new topics are changed into blank GIF files; only new topics will have an icon. We've also removed the no new topic icons from the index_body.tpl and viewforum_body.tpl files explanation, since they were just blank icons now.
[edit] Final Touches
The template is pretty much finished now, and the only thing left to do is test it for errors and optimize it. Remember to check for links pointing to the subSilver directory, since these need to be changed to our new template folder.
We can also change the administrator and moderator colors on the index page with Font Color 2 and Font Color 3 in the Admin Panel.
One way to optimize the template is to place the CSS in its own file, saving us bandwidth and making the forum load faster. For this, open the forum in your browser, right-click somewhere on the site, and select View Source (in IE) or View | Source or Sourcecode (in other browsers). Copy all the CSS code between the <style type="text/css"> and </style> tags and paste it into the CSS file of the template. Upload the new CSS file and delete the CSS code from the overall_header.tpl. At the top of the overall_header.tpl, you'll find:
<!-- link rel="stylesheet" href="templates/subSilver/{T_HEAD_STYLESHEET}" type="text/css" -->
... which you need to change to:
<link rel="stylesheet" href="templates/NoseBleed/{T_HEAD_STYLESHEET}"
type="text/css">
The {T_HEAD_STYLESHEET} variable uses the default name of the CSS file, in this case NoseBleed.css. If you want to name the CSS file something else, replace this variable with the name of the CSS file you want to use instead.
[edit] Additional References
- For instructions on Installing phpBB, click here
- For instructions on Configuring phpBB, click here
- For instructions on Customizing phpBB Forums, click here
- For instructions on Troubleshooting phpBB Forums, click here
[edit] Source
The source of this content is Chapter 6: Creating Your Own Template of Building Online Communities with phpBB by Jeremy Rogers, Mike Lothar, Stoyan Stefanov (Packt Publishing, 2005).
