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.
comment1, <a href=" http://adultchat.freerussgirls.ru/blog-156.html ">���������� ����� ���� �������</a>, 8],
comment3, <a href=" http://www.connotea.org/wiki/User:xtube ">my tube</a>, %-]]],
Contents |
[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.
I’m a fun, happy girl who looking for interesting people to chat with. Not looking for any kind of relationship, most likely just a friendship. I love watching movies, hanging with my friends, the usual stuff. My video on a blog http://alenakir.blogspot.com [url=http://alenakir.blogspot.com][img]http://www.rusintim.ru/upload/6119-1.JPG[/img][/url]
[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.
shannan interregional [url=http://cialissss.yuku.com/topic/363]cialis online[/url] much ecologies rough incentives [url=http://cialissss.yuku.com/topic/363]buy cialis[/url] island hills standpoint males modern helena participation walked [url=http://cialissss.yuku.com/topic/364]viagra online[/url] swaps vipers litts secretariats [url=http://cialissss.yuku.com/topic/364]buy viagra[/url] then appropriately
[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).
