Documentation
3.8. Styles
phpBB 3.0 is very customisable. Styling is one aspect of this customisability. Being able to manage the styles your board uses is important in keeping an interesting board. Your board's style may even reflect the purpose of your board. allows you to manage all the styles available on your board.
phpBB 3.0 styles have three main parts: templates, themes, and imagesets.
- Templates
Templates are the HTML files responsible for the layout of the style.
- Themes
Themes are a combination of colour schemes and images that define the basic look of your forum.
- Imagesets
Imagesets are groups of images that are used throughout your board. Imagesets are comprised of all of the non-style specific images used by your board.
Figure 3.9. Styles overview
This is a list of the styles that are installed on the board and the styles that can be installed on the board. You can see the number of users using the style and you can follow the links to change the style's details.
Creating a style is not an easy task and it takes quite a lot of time. Skilled designers from the phpBB community create styles that are available publicly and anyone can download them. This is a good place to start if you want to download and install a new style and you cannot afford to create your own, for any possible reason. The first place where you should stop is the Styles section on phpBB.com, you will find a list of useful links for places like the:
- Styles Demo
The styles demo allows you to display each style on a live forum and see how each part of the board looks like using the specified style. You can browse through the styles until you find one that suits you and/or your board. The styles demo provides links to download the style and see its entry in the styles database.
- Styles Database
The Style Database contains all the styles that were validated by the phpBB.com Styles Team. All styles are validated to ensure they are safe to use, work correctly and do not have any other caveats. You can filter styles by parameters like version, color or category to easily find a style that you would like. Each style entry in the database contains a link to the Style Demo, to show a live example of the style in use.
3.8.1. Installing and managing styles
After you choose a style and you are ready to install it, unpack it on your PC and upload the directory with the style to your board's server. Make sure that the directory you upload to the server's styles contains the template, theme and imageset directories. The only exception is when a style has its template, theme or imageset based on another one, you will however be informed of that when you download the style. Having the dependent style component installed is required to install such a style.
Since you have uploaded all the necessary files, you can continue to install your style. Go to the Styles tab in the ACP. You should see a table containing several items - the preinstalled prosilver style, subsilver2, and any of your uploaded styles. The list is divided into two parts, the first one contains styles that are installed on the board and the second one contains styles that were uploaded, but not installed. If you want to install your downloaded style, click the Install link next to its title.
After you click Install, you will be asked about two options:
Active: If set to No, the style will not be available for users and only the admin will be able to preview it through the ACP.
Make default style: This will set the style as the default one for the board, making it the style that new users and guests see. For more about setting the default style, read Section 3.2.1.2, “Board Settings”.
When you are finished, just click Submit.
At this moment, you should know how to install a new style. However, there are some links and features on the Styles overview page that we have missed. They are:
Details: This link will take you to the details of style, where you can change its name, author, the style components it uses and determine if the style is active or not.
Activate/Deactivate: Pretty clear without an explanation, this link allows you to switch the style on and off very quickly and easily.
Export: This will offer the style for download with any of its components. You will be able to choose between downloading the file to your PC or storing in in the store folder on your server. This feature is useful when you want to move your board and want to have the whole style packed up so you can use it in another place.
Delete: If you or your users do not like the style anymore, use this link. When you delete a style, you will be requested to choose another style which will be set for users using the deleted one. Choose that style in Replace style with and click Delete to complete the process. If you delete a style, no files will be touched, the style will appear in the Uninstalled styles section.
Preview: This is a very useful and powerful feature for administrators. If you click this link, you will be taken to the board and the style you have selected will be applied - this is great when you want to see if the style looks good on your board and you want to make sure you should activate it. This feature can be used even with deactivated styles. The style ID is passed through the URL, so you can browse through the board and see any page you need.
3.8.2. Templates
Templates create the basic skeleton of your board, they define the structure of the content and contain all the HTML markup. Templates are then style using the theme and any buttons and images are taken from the imageset. Often you will be asked to edit a template when installing a MOD. Each style has its own template (an exception is when it inherits the template from another style) and you will need to make the change for each style individually. The template files can usually be found in the styles/[your_style]/template/ directory.
Note
After you change a style through the filesystem, remember to Purge the cache. To do this, press the appropriate button on the ACP index page.
Warning
If you make changed to the template files through the ACP and then refresh the template, the changes made through the ACP will be overwritten with the contents of the files on the server.
On the page, there are several links to pages where you can manage and work with templates. Let's take a closer look at them and see what you can do on each of them.
Features on the page
Edit: On this page, you can edit the individual template files through the ACP. Click the link and you will see a list of all the template files. You can select one and a editor for editing it will show up. If the file you are editing is not server-writable, the whole template will be stored in the database. This can cause some problems in the future, for example you won't be able to edit the templates through the filesystem. All the template files have to be writable, including the
template/directory in order for the script to write directly into the files.Cache: phpBB caches all of the template files to increase the performance of your board. It compiles them and makes them ready to use, then, once every while, it refreshes the template set to reflect changes you made to it manually. On this page, you will see a list of all the template files cached for the template set. If you made changes to a template file and you want to apply them, select the template file and clicked Delete marked at the bottom of the page. phpBB will then regnerate the file for you. Do not worry about deleting files here, they are only temporary files and you cannot break anything.
Details: When you click this item, you will see three things: the name of the template, shown in the lists; the template copyright and last, but not least the place where the template is stored. If the template is stored in the filesystem, you can edit the files through a text editor after you download them from your server. After you re-upload them, you must purge the cache. If the templates are stored in the database, you must edit them through the ACP editor. No cache purge is needed afterwards. Storing the template in the database however takes more resources than having it in the filesystem.
Refresh: Very similar to the cache menu item, clicking Refresh will clear all the cached files for the template set. This is useful after editing the files on the filesystem, when you want to apply changes. It will overwrite any stored data in the database with the contents of the files on the server.
Export: If you need to download the files of the template to your PC and transfer them elsewhere, choose this option. You will be asked wheter to download the file to your PC or to save it in the board's store folder. You can also choose the archive format depending on your server setup.
Delete: Clicking this option will remove all references to the template from the database. It will, however, leave the files of the template set on the server. When deleting the template you will be asked for another template that will replace the deleted one.
3.8.3. Themes
Now that we have described the style component that defines the structure of the site, the templates, we will continue to the themes. This style components takes care of all the styling. It adds colors, dimensions, formatting, fonts, and whatever else you can think of concerning styles. Basically it is a set of one or more CSS files that put together the final look of the board. The theme files can usually be found in the styles/[your_style]/theme/ directory.
There are two possible theme setups. The first one is used by subsilver2, where it has one stylesheet file which is loaded directly by specifying the URL of it in the templates. If you are editing such a file, the only thing you need to do after a change is to refresh the page in your browser. The second option is used by prosilver, there is one file that includes the others and the compiled and complete stylesheet is stored in the database. After you change on of the theme files, you will have to refresh the themes.
Warning
If you make changed to the stylesheet through the ACP and then refresh the theme, the changes made through the ACP will be overwritten with the contents of the stylesheet files on the server.
The themes page is very similar to the templates page, a lot of features are common, the main difference is that the theme contains a different type of files
Features on the page
Edit: On this page, you can edit the stylesheet for the board. If the theme is stored in the database in various files, they will be all joined in one stylesheet file for you to edit. Save your changes with the Submit button. If you want to edit the file manually on the filesystem, you will find it in the
theme/directory of your style.Details: When you click this item, you will see three things: the name of the theme, shown in the lists; the theme copyright and last, but not least the place where the theme is stored. If the theme is stored in the filesystem, you can edit the files through a text editor after you download them from your server. After you re-upload them, you must refresh the theme (this option is described just below). If the theme is stored in the database, you can edit it through the ACP editor. No theme refresh is needed afterwards.
Refresh: Be careful when using this option, as it will load the data from the files and overwrite any stylesheets in the database. If you edited your theme through the ACP, these changes will be lost. You can Export the theme to your PC if you need to save the changes. You will use this option when you make changes to the theme through the filesystem and you need to apply them to your board.
Export: If you need to download the theme to your PC and transfer it elsewhere or save any changes it, choose this option. You will be asked wheter to download the file to your PC or to save it in the board's store folder. You can also choose the archive format depending on your server setup.
Delete: Clicking this option will remove all references to the theme from the database. It will, however, leave the files of the theme on the server. When deleting the theme you will be asked to choose a theme that will replace the deleted one.
3.8.4. Imagesets
The first and last component of a style is the imageset. It contains all the images that are not included in the theme. For example they are the posting buttons, online banners, or topic and forum markers. The files which make up the imageset of your style can usually be found in the styles/[your_style]/imageset/ directory.
The imageset is always stored in the database. The details about each image (its location and dimensions) are taken from a imageset.cfg file located in the imageset directory and stored in the database from which they are loaded.
Before we describe the interface in the ACP, which allows you to edit the imageset through a graphical interface, let's take a look at how the imageset.cfg file is created in case you would like to edit the file manually by yourself. A typical row in the files looks like this: img_sticky_read = sticky_read.gif*27*27. The text before the equals sign is the image on the board. The location follows next. At the end, the height and width (in this order) of the file is defined. The last three items are separated by an asterisk without spaces.
Features on the page
Edit: Here you can edit the individual images of the set. The imageset consists of a list of image entities with defined attributes, e.g. an entity is "Sticky topic icon", which has the attributes height, width and location. In order to explain what you can do on this page, let's go through all the controls present on it:
Current image: This shows the image that is currently assigned to the image.
Selected image: This gives you a preview of the image you select in the Image field.
Image: The ACP pulls all the images located in the
imageset/directory and lists them here. You can then assign any image file uploaded to that directory to an image on the board.Include dimensions: If set to Yes, the dimensions from the fields below will be taken in account, otherwise they will be detected automatically.
Image width: Sets the width of the image file.
Image height: Sets the height of the image file.
Details: On this page, you can edit the name and copyright of the imageset (of course leave copyrights of the respectful authors).
Refresh: This option will take the details about each image from the
imageset.cfgfile and save them in the database. This will overwrite any changes you have made through the ACP editor and weren't saved on the filesystem.Export: If you need to download the imageset to your PC and transfer it elsewhere or save any changes it, choose this option. You will be asked wheter to download the file to your PC or to save it in the board's store folder. You can also choose the archive format depending on your server setup.
Delete: Clicking this option will remove all references to the imageset from the database. It will, however, leave the files of the imageset on the server. When deleting the imageset you will be asked to choose another set that will replace the deleted one. You always must have at least one imageset installed.
Figure 3.10. Interface for editing imagesets
On this page, you can edit the details of individual images that make up the imageset.