This fourth part of the guide covers a number of techniques and methods I’ve used as well as provide answers to some common questions. It is recommend you at least look through this section to see if there's anything you might find useful.
A question often asked is about how to change the link colors for moderator and administrator user listed in the Who’s Online box and on the Who’s Online page. It’s relatively easy, you will need to edit the colors for “font color 2” and “font color 3” in Administration Panel -> Styles Admin -> Management.
Like I mentioned previously in the guide while on the topic of styles, phpBB uses field values stored in the database for colors, background images and fonts. The colors used for moderator and administrator user links cannot be defined in the external stylesheet (CSS file) so they need defined in the style (stored in the database). In the default subSilver template, “font color 3” is also used for table headers.
The page for showing topics, viewtopic_body.tpl contains the buttons that are displayed below posts. I call these “post buttons”. There’s a post button for ICQ, and in the default subSilver template there’s also a snippet for JavaScript code that shows a user’s ICQ online status by overlaying it with a green ICQ flower.
The same code is used in profile_view_body.tpl to display the user’s ICQ online status.
If you redesign this post button you may either have to remove or edit this code. It’s a simple piece of JavaScript so remove all the code between the <script>…</script> tags, remove the <noscript> and </noscript> and only keep the template variable placeholder for the image.
When you make a poll topic in phpBB, the result of the votes will be shown as bars, one for each option. These bars consist of three images, a left cap image, an image that is repeated to create the center of the bar and a right cap. The code for these bars can be found in viewtopic_poll_result.tpl.
Originally, the poll result bars weren’t intended to be designed this way. Instead the developers intended one image to be used, and for it to be stretched by setting its width to represent the per cent of votes. There was also the intention of supporting votebars in several colors, or designs. If you open the CFG file (myTemplate.cfg) you will find the following code:
$images['voting_graphic'][0] = "$current_template_images/voting_bar.gif";
$images['voting_graphic'][1] = "$current_template_images/voting_bar.gif";
$images['voting_graphic'][2] = "$current_template_images/voting_bar.gif";
$images['voting_graphic'][3] = "$current_template_images/voting_bar.gif";
$images['voting_graphic'][4] = "$current_template_images/voting_bar.gif";By removing the code for adding the left and right end caps and assigning a different bar image for each of these you can display poll results as up to five differently colored bars. I haven’t used done myself but I imagine that if there are more than five options the colors are reused.
If you find it hard to keep track of what tpl file is used for what forum part or page there’s a simple way to keep track of it. Open every tpl file and add an HTML comment containing its filename at the top and the bottom of it. So if you edit viewtopic_body.tpl you would add the comment <!-- start of viewtopic_body.tpl --> at the top, and <!-- end of viewtopic_body.tpl --> at the end of the file after all the other HTML and template code.
You can create multiple themes to be associated with your style. These can introduce minor changes such as different fonts faces, colors or background images. In order for this to work it is important that you use all or some of the CSS code from subSilver's overall_header.tpl file. In case you have removed it from your copy of overall_header.tpl, you can simple copy it from subSilver's overall_header.tpl and paste it in your file. You can then remove or edit it as you like. Each of the variable placeholders here takes data from the theme configuration which is done in Administration Panel -> Styles Admin -> Management. The variable names and the field names are more or less the same so figuring out where what goes is relatively easy.
You create the new theme by going Administration Panel -> Styles Admin -> Create. What’s important here is that you choose your template and the CSS stylesheet file you wish to use (just enter its filename). Remember that what you enter on this page will override the CSS in your stylesheet file since it is loaded after it and in order for it to work the <style>...</style> code in overall_header.tpl must be intact (see an unaltered copy of subSilver's overall_header.tpl if unsure).
A template for phpBB includes to CFG-files. These can be recognized by their file extension: .cfg. There are usually two CFG-files, theme_info.cfg and templateName.cfg (where templateName is the name of the template).
This file is where the theme/style info is written when you export your themes/styles as explained in part five of this guide. It is only read when you import a theme/style. You shouldn’t attempt to edit this file manually, instead use Admin Panel -> Styles Admin -> Management to modify your themes/styles.
This file is a lot more interesting and unlike theme_info.cfg this file is parsed every time you load a forum page. I’ve pasted the contents of subSilver.cfg here below. As you can see it contains a lot of values. Technically it is what programmers call an array and here is where all the image filenames used in your template are defined. First of all it defines the directory where the images are stored:
$current_template_images = $current_template_path . "/images";
This cfg file also defines the image filenames used by the template variable placeholders. You can achieve some rather cool special effects by modifying these.
As I mentioned earlier, this file defines filenames for graphics and as you can see most of these are defined. However some aren’t. One that may come in handy when you create your template is the image used to show when a user has new PMs. By assigning filenames of images to the following lines you can for example use an animated GIF image to draw the user’s attention to there being unread messages in his/her PM inbox. I used this technique for a board I designed for a customer.
$images['pm_new_msg'] = "";
$images['pm_no_new_msg'] = "";
Then use {PRIVMSG_IMG} in your template files where you want the image to show.
This technique was originally devised by Daz of forumimages.com. Unfortunately his site along with all the tutorials, graphics and templates hosted there is no longer available.
I used this method to create fading post buttons in Cobalt, you can check it out in the styles demo forum to see how it looks. It works in most browsers, but I know for sure it works in Firefox and Internet Explorer.
This method requires you to edit several files, begin by adding the following code at the beginning of templateName.cfg (right before “do not alter” comment):
$ifade = 'onmouseover="this.className='imgfull'" onmouseout="this.className='imgfade'';
Then find the post button image paths, they’re right below where it sets the path to the images directory, should look something like this:
$images['icon_quote'] = "$current_template_images/{LANG}/icon_quote.gif";
There are twelve of them (around line 29 through 41), alter all of them this way:
$images['icon_quote'] = "$current_template_images/{LANG}/icon_quote.gif\" class=\"imgfade\" " . "$ifade";
$images['icon_edit'] = "$current_template_images/{LANG}/icon_edit.gif\" class=\"imgfade\" " . "$ifade";
$images['icon_search'] = "$current_template_images/{LANG}/icon_search.gif\" class=\"imgfade\" " . "$ifade";
$images['icon_profile'] = "$current_template_images/{LANG}/icon_profile.gif\" class=\"imgfade\" " . "$ifade";
$images['icon_pm'] = "$current_template_images/{LANG}/icon_pm.gif\" class=\"imgfade\" " . "$ifade";
$images['icon_email'] = "$current_template_images/{LANG}/icon_email.gif\" class=\"imgfade\" " . "$ifade";
$images['icon_delpost'] = "$current_template_images/icon_delete.gif\" class=\"imgfade\" " . "$ifade";
$images['icon_ip'] = "$current_template_images/{LANG}/icon_ip.gif\" class=\"imgfade\" " . "$ifade";
$images['icon_www'] = "$current_template_images/{LANG}/icon_www.gif\" class=\"imgfade\" " . "$ifade";
$images['icon_icq'] = "$current_template_images/{LANG}/icon_icq_add.gif\" class=\"imgfade\" " . "$ifade";
$images['icon_aim'] = "$current_template_images/{LANG}/icon_aim.gif\" class=\"imgfade\" " . "$ifade";
$images['icon_yim'] = "$current_template_images/{LANG}/icon_yim.gif\" class=\"imgfade\" " . "$ifade";
$images['icon_msnm'] = "$current_template_images/{LANG}/icon_msnm.gif\" class=\"imgfade\" " . "$ifade";
What remains is modifying your stylesheet file to add the two new CSS classes we used, add this code anywhere in it:
.imgfade{filter:alpha(opacity=50); -moz-opacity:0.5}
.imgfull{filter:alpha(opacity=100); -moz-opacity:1}
Alternatively put it in overall_header.tpl, between the tags.
You can add this fading effect to almost any button by modifying the CFG file the same way done above, or by adding this code to its img tag:
class="imgfade" onmouseover="this.className='imgfull'" onmouseout="this.className='imgfade'"