Development Wiki

PhpBB3.1/Imagesets Removal

From phpBB Development Wiki

Revision as of 17:49, 13 October 2011 by Naderman (Talk | contribs)

Converting a phpBB 3.0 imageset into phpBB 3.1 theme

In phpBB 3.1 imagesets no longer exist. Instead of separate imagesets, all images are handled by theme through CSS. In addition to that, CSS is no longer parsed, so template variables in CSS files no longer exist.

There were two types of themes in phpBB 3.0: ones that used template variables in CSS files (prosilver based) and ones that didn't (subsilver2 based). If you are trying to convert theme that didn't use template variables, look only at first two parts of this tutorial. The third part applies only to themes that didn't use template variables in CSS.

Adding new CSS entries

In phpBB 3.0 when script used $user->img('whatever'), phpBB generated PHP code that echoed <img> tag for img_whatever from imageset. In phpBB 3.1 same function echoes instead of image. Instead of width/height for tag, CSS uses padding-left and padding-top, so text inside tag would be hidden. RTL language packs should use padding-right instead of padding-left and set padding-left to 0.

This change means you have to add entry for .imageset.whatever in CSS for your new images. Have no fear, phpBB 3.1 includes script that will do that automatically. Same script also replaces all template variables in CSS files with values from old imageset.

Upload your old style to directory "styles", but do not install it. Open file develop/imageset_to_css.php in text editor, on line 10 replace 'subsilver2' with your style name, then navigate your browser to your forum's develop/imageset_to_css.php

Script will show you list of updated files as well as new CSS for former imageset that you need to add to your CSS files. [b]Important[/b]: script will NOT edit your CSS files, you have to do it yourself. Script will only tell you what to do.

What to do with it:

  • "Nothing to replace in {file}": nothing to change in that CSS file, ignore it.
  • "Updated {file}": copy/paste contents of text box below text to that file.
  • "Code to add to CSS file": that code includes entries for new CSS that was converted from old imageset.
    • If you are converting style that uses only stylesheet.css, such as subsilver2, append that code at the end of stylesheet.css.
    • If you are using prosilver based style that uses many CSS files, create file imageset.css in theme directory and put that code in it, then append @import url("imageset.css"); to stylesheet.css.
  • "New CSS file": create that file.

Update CSS files as written in script.

Moving Images

Move all images from styles/{style}/imageset/{lang}/ to styles/{style}/theme/{lang}/ Move all images from styles/{style}/imageset/ to styles/{style}/theme/images/

Moving language specific CSS to new file

This section applies only to styles that used template variables in CSS files.

If old CSS files contained entries for language specific images, such as "quote" and "edit" buttons and those entries contained width, height or source of image, you need to copy those entries to your new file styles/{style}/theme/{lang}/stylesheet.css

When copying those entries, remove "en/" in source image URL. See styles/prosilver/theme/en/stylesheet.css (lines before /* EN Language Pack */) for list of selectors that were moved manually from other CSS files in default prosilver style. List of selectors is different for each style.

If you forget to move a selector, images in translations might have incorrect dimensions or source file. Easiest way to test it is to convert a language pack and test it.


Conversion script will output separate CSS entries for each image from imageset. If you would like to merge images that use same dimensions to one line to reduce size of CSS file, open develop/imageset_to_css.php, find this line:

   $group = $bidi;

and replace with

   $group = true;