phpBB - Customizing Your Forum 3

Configuration File Cannot Be Opened

Sometimes phpBB may have trouble finding the configuration file for a template element. When this happens, either during installation or normal forum operations, the forum will present the user with a Critical Error message, as shown in the following figure, mentioning the name of the template. That name is a very important part of this error message, because it is telling you what name phpBB has used to look for the configuration file. When the name of the template is shown as subSilver, phpBB could not find a file called subSilver.cfg in the templates/subSilver directory. Similarly, the name subBook means phpBB looked for subBook.cfg in the templates/subBook directory. The pattern here should be clear:

To repair this error, you need to ensure that phpBB can find the file in question. As with the error when the style does not appear in Styles Administration, the names of the actual file and directory must be exactly the same as that in the error message. Subbook is not the same as subBook. First, look in the templates directory and ensure that there is a subdirectory with the template name. Next, look inside that subdirectory for the template configuration file. If either the directory or file is named incorrectly, renaming them to the correct spelling should fix the error.

If there is no templates subdirectory that comes even close to having the correct name, there are two ways to fix the error temporarily. The first method is to rename another subdirectory (and the template configuration file inside it) to the name phpBB is trying to find. When doing this, be sure to write down the original name for a quick change-back later. The second and better method is to copy another template and rename it. The steps for this are the same as those in the Creating a Copy Style section earlier in this chapter, except you will not need to edit theme_info.cfg. With the problem repaired for the moment, you can try to uninstall the problem style or work out a more lasting solution like replacing the templates files of the style.

Removing an Installed Style

At some point, you may decide that you want to remove a style you have added to your phpBB forum. This is a much simpler process than installing styles. There are two steps to removing a style: deleting the style and theme information from the database and deleting the templates directory of the style.

In the Administration Control Panel, scroll the navigation menu down to the Styles Admin section. Clicking the Management link will load a Styles Administration page, listing the styles currently installed on your forum. It looks very similar to the installation page you have already seen. By clicking the Delete link next to a style, you will remove all information related to that style in your forum's SQL database. You will be asked to confirm the deletion before it actually happens. Any users that have selected a style in their profiles will automatically have their selection changed when that style is deleted. Their profile setting will be altered to the style selected as the Board Default on the General Configuration page of the Administration Control Panel.

If you only have one style installed on your forum, you cannot delete it. You also cannot delete the Board Default style.

The second aspect of removing a style calls for deleting that style's related subdirectory of the templates directory. This will typically be done through the same means by which you copied the style into templates when installing it. Since it is possible to have multiple styles that use a single template or image set element with different themes, you should make certain that removing these files will not damage any styles you have not deleted in the Administration Control Panel.

Create or Customize

So far, we have only looked at installing new styles that already exist. This is only one of the ways in which we can alter the appearance of a phpBB, however. Two of our other options are creating a completely new style or customizing one already installed, like subSilver. Both of these options have some benefits and some drawbacks.

Creating a new style can really bring life to a forum. If your forum has a look that is unlike any other, your visitors are more likely to remember it. You probably remember some of the unique-looking websites you have visited in the past yourself. Also, you do not have to spend time looking through hundreds of existing styles for something you like or one that will fit nicely with the subject matter of your forum. Sometimes you may not even be able to find a style appropriate to your subject! The temptation to create your own style is great.

On the other hand, creating a new style is a lot of work! There are many graphics required for normal phpBB operations, and you will probably want to replace most of them with your own. You may even want to create new graphics and alter the template files to create new visual effects. Essentially, you would be designing an entire website. If you are not an experienced web designer or graphic artist, you may find the task to be a bit beyond your current skill level.

When you customize an existing style, you will save a lot of time over creating a new one. The existing structure will already be complete, other than any changes you want to make. You can quickly replace any images or colors to alter the mood of the forum, as you will see later in this chapter. The work of the original style creator will serve as a guideline to help you develop your knowledge. Then again, if you customize a style, that same existing structure will limit you unless changed greatly. Chances are that the customized style will bear some resemblance to the original, and many people will know that at first glance.

So which method is better? It really depends on how much you want to change the look of a forum. There is a good chance you can find an existing style to customize that will not limit you too much. If you look at enough styles, however, you will find that many of them are based, at least in part, on the original subSilver style. For something unique, you will have to create a new style.

In the rest of this chapter, we will learn to customize an existing style. However, the examples will use the subBook style created earlier in the chapter. This approach will allow us to preserve the original subSilver style of your forum, while making any changes we choose to the subBook copy.

In Chapter 6, we will deal with designing a completely new style in detail.

If you did not create and install subBook earlier or replace all the uses of the subSilver name in subBook's template files, you may wish to do so now. You can work with subSilver if you like, but this may cause your forum to appear much different from the examples and screenshots in later chapters.

Customizing Through the Stylesheet

The quickest way to overhaul the look of a forum is to change its colors, fonts, and other visual (but non-graphical) decorations. When we looked at the basic elements of a style earlier, we learned that a theme defines and controls these concepts through the formatting rules of a Cascading Style Sheet (CSS). CSS formatting rules add stylistic data, such as specifications for fonts, colors, sizes, borders, and spacing to a document structured with a markup language like HTML. Since phpBB creates documents of this kind to display a forum, the preferred method for changing these parts of the outward appearance of the forum is CSS.

CSS rules can be stored in three different places: in an external CSS file such as subBook.css, in overall_header.tpl, or in a combination of the overall_header.tpl method with some database storage. subSilver uses the combination method, and therefore subBook will also do the same.

Editing the Stylesheet in the Admin Panel

We can look at the database storage portion of the combination method first. It allows us to edit certain aspects of the stylesheet through the Administration Control Panel. The values entered into the administration feature are placed into the SQL database and later retrieved for use on every page phpBB displays.

Time For Action�Editing the Stylesheet

1. Locate the line labeled Background Color on the page.

There is a form field on this line containing the text E5E5E5. Delete that text.
Type CC0000 in the form field. Use the number zero, not the capital letter O.
Scroll down to the bottom of the page and press the Save Settings button.
On the next page, click the word Here in the text Click Here to return to Style Administration. This returns you to the Styles Administration page, where your change will be reflected.

What Just Happened? As the name suggests, the Edit Theme page allows you to alter some aspects of the forum's theme. Each aspect that can be altered has a matching form field, such as Background Color for the background color of forum pages. By replacing E5E5E5 with CC0000, you altered the page background color from a light gray to red. If you replace CC0000 with E5E5E5 and Save Settings again, the change will be reversed.

Editing Other Theme Components

You can change more than just the background color of pages. The first two options on the Edit Theme page actually allow you to modify two aspects of the style, even though Theme may be used in their labels. Alterations to the Theme Name will be reflected in board style selection lists and Styles Administration. Selecting a new Template can change the entire layout of a forum while keeping the current color scheme. All templates in your forum's templates directory will be listed in this selection box, even if they are not currently used in an installed style.

The remaining thirty-eight options are presented in a three-column format. The first column, Theme Element, describes the individual settings while the second column holds the current values. When you install a new style, some values may or may not be provided automatically; it varies from style to style. These two columns are the most relevant to your needs.

The third column, Simple Name, can hold some extra descriptive information about the use of these settings. If you look at the Edit Theme page for subSilver, you can see this in action. Unfortunately, phpBB does not have a method of importing Simple Name data when installing new styles, so this column is often ignored. You can enter short descriptions of your own, but otherwise only subSilver will use this column:

Since there are so many options on this page, let us concentrate on the types of values that can be entered, the settings used most often, and the ones you would most likely want to change. Many settings are alternative versions of others, so looking at every single one in detail is not necessary. All of the options are listed in a table at the end of this section.

Not all templates will use every setting in the same way. Some templates also do not use all of the settings provided. You should consider the descriptions provided here as a general guide to the ways the settings can be used, but not how they must be used. There is a fair amount of flexibility here, and some templates make use of that.

Allowed Values

There are several types of values that can be entered and most settings accept only one type. Those restricted to one kind of value can be grouped under filename, color, font size, and font face settings. All other settings accept filename, color, and CSS class name values, but only one kind of value can be used in each group of these settings.

The filename settings�CSS Stylesheet and Background Image�should only be used with the names of existing files in the templates directory of a style. It is possible to use a file that is not in a templates subdirectory, but this often requires some editing of multiple template files. Some styles, including subSilver, will not use one or both of this pair when first installed. Make sure a value is filled in for CSS Stylesheet regardless, as you may find yourself needing it later. Background Image is optional.

Color settings require a hexadecimal color code. Hexadecimal color codes, sometimes called HTML color codes, are combinations of six letters and numbers that represent a color, usually prefaced with a pound symbol (#). Many websites provide charts and lists that show examples of these codes. When entering a hexadecimal color code into the color settings of this page, you must not include the pound symbol. The color settings will accept only six character values, so including the pound will cause the last character of the code to be cut off! That can lead to some weird color effects. You may be tempted to enter a color name, such as red or green, for the color settings. If you do so, however, you will get some strange results. Lists of the different hexadecimal codes are available on many websites. Two good lists can be found at http://www.htmlgoodies.com /tutors/colors.html and http://webmonkey.wired.com/webmonkey/reference /color_codes/.

The last of the restricted value settings�font faces�accepts comma-separated lists of typeface names. An example of a good value is Verdana, Arial, Helvetica, sans-serif. If you want to include a name that consists of more than one word in the list, place it inside single or double quotes: for example, 'Verdana', 'Trebuchet MS'. You can also use a single name, but it is a better idea to use a list. When a list is provided, the first font that is installed on the viewer's computer will be used.

The more flexible settings allow you to use filenames, colors, or CSS class names for values, as already stated. Filename values operate under the same restrictions as those for filename-specific settings. Color values can be hexadecimal color codes, including the pound symbol this time, or simple names like blue. CSS class names are names of Cascading Style Sheet formatting rules. They will usually be short names made of all lowercase letters and numbers. The formatting rules named will be used to control the display of everything that the theme element controls.

Commonly Used and Altered Elements

You have already learned about a few settings, such as font sizes and faces, in the previous section. Now let us examine some more useful options in the Edit Theme page.

Table Cell Colors

The Table Cell Color 1, Table Cell Color 2, Table Cell Class 1, and Table Cell Class 2 elements are interesting because they are perhaps the most commonly used. Any aspect of phpBB that displays data in table rows, such as the member list, forums, and topics, can use these elements to achieve an alternating row color effect. For compatibility with phpBB's internal coding, Table Cell Class 1 often has a value of row1 and Table Cell Class 2 a value of row2. This is a sort of unspoken standard, but one that is not always used.

Font Colors

Two options that many forum administrators like to change, but often cannot locate without help, are Font Color 2 and Font Color 3. All font color settings are used to color a variety of text, but these two are used for the special colors given to administrator and moderator usernames on the forum in several locations like online user lists. Font Color 3 assigns the administrator names' color, and Font Color 2 details moderator name color.

Again, these colors are used in other places as well, so be sure to look around the forum if you change them. It is very easy to change the name colors to something nice only to find your table headers or code BBCodes have become unreadable.

Once you have edited the elements to your preferences, you should click the Save Settings button at the bottom of the Edit Theme page to store the new values in the database. You will be shown a confirmation message that the settings have been updated, and the new settings should be reflected on any page loaded after that message.

The following table lists the names of theme elements and defines them:

Theme Element Name	Description
CSS Stylesheet	Filename for a Cascading Style Sheet file.
Background Image	Image used as a background for the forum. Not used
	in subSilver.
Background Color	Color of page backgrounds.
Text Color	Default text color of all pages.
Link Color	Default color of all unvisited links.
Visited Link Color	Color for all links that have been visited.

Theme Element Name	Description
Active Link Color	When clicking a link, it switches color. Not used in
	subSilver.
Hover Link Color	When moving the mouse pointer over a link it changes to
	this color.
Table Row Color 1	Background color for table rows, often very light.
Table Row Color 2	Another, usually medium, table row background color.
Table Row Color 3	Third row background color, rarely used and is often
	the darkest.
Table Row Class 1	CSS class name for table rows. Not used in subSilver.
Table Row Class 2	Class name for a second set of rows. Not used in subSilver.
Table Row Class 3	Class name for a third row set. Not used in subSilver.
Table Header Color 1	Color for table headings. Also used for page borders
	in subSilver.
Table Header Color 2	Second heading color. Also used for table borders in
	subSilver.
Table Header Color 3	Third heading color. Also used for inner table borders
	in subSilver.
Table Header Class 1	CSS class name for table heading cells.
Table Header Class 2	Class name for a second set of table heading cells.
Table Header Class 3	Class name for a third heading set.
Table Cell Color 1	Background color of various common table cells.
Table Cell Color 2	Alternative table cell background color.
Table Cell Color 3	Another table cell background color. Not used in subSilver.
Table Cell Class 1	CSS Class name for table cells. Often used to alternate
	row colors.

Theme Element Name	Description
Table Cell Class 2	Second Class name for cells. Often used to alternate
	row colors.
Table Cell Class 3	Third possible class name. Not used in subSilver.
Font Face 1	Default type face for most text.
Font Face 2	Second type face, sometimes for topic titles.
Font Face 3	Third type face. Often used for code BBCode tags.
Font Size 1	Smallest font size.
Font Size 2	Medium font size.
Font Size 3	Largest font size, used for most text, including posts.
Font Color 1	Quote BBCode text color.
Font Color 2	Code BBCode text color. Also moderator username color.
Font Color 3	Table header cell text color. Also administrator user
	name color.
Span Class 1	A CSS class name for use in HTML span tags. Not used
	in subSilver.
Span Class 2	Another class name for span tags. Not used in subSilver.
Span Class 3	Third class name for span tags. Not used in subSilver.