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).

theme_info.cfg

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 shouldnt attempt to edit this file manually, instead use Admin Panel -> Styles Admin -> Management to modify your themes/styles.

templateName.cfg

This file is a lot more interesting and unlike theme_info.cfg this file is parsed every time you load a forum page. Ive 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.

Flashing image when new PMs

As I mentioned earlier, this file defines filenames for graphics and as you can see most of these are defined. However some arent. 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 users 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.

Fading post buttons

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, theyre 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'"