[RFC|Merged] Removal of imagesets

[nextgen]

I agree completely with this idea.

I do not quite understand the concept
There will be much rewriting the css?

[nextgen]

I take the audacity to install version 3.1 and want to change language to throw an error of imageset.

[Arty]

Below is a preview of future wiki article. Please check it to see if instructions are clear.

How to test instructions: install latest phpBB 3.1, get any old style that still has imageset (3.0.x styles will do) and try to follow instructions.

[Arty]

How to convert phpBB 3.0 imageset to phpBB 3.1 theme.

In phpBB 3.1 imagesets no longer exist. Instead of imageset, all images are handled by CSS.
In addition to that, CSS is no longer being 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. Third part applies only to themes that didn't use template variables in CSS.

1. 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 <span class="imageset whatever"></span> instead of image. Instead of width/height for <span> tag, CSS uses padding-left and padding-top, so text inside <span> 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. Important: 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.

2. Copy 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/

3. Copy language specific CSS entries to new CSS 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.

[naderman]

The way a wiki works is, you write an article and then others can edit it. Please put your article in the wiki and just post a link here. We can still edit it then.

[Arty]

Right. Here it is: http://wiki.phpbb.com/PhpBB3.1/Imagesets_Removal

[nextgen]

Tonight proves that indicate changes.

[Dakin Quelia]

Hello,

Removing the variable like {T_THEME_PATH} in CSS file... is not a good idea in fact.

And I'd like suggest that: ./theme/images/{lang}/ instead of ./theme/{lang}/.

Best regards.

[Arty]

Removing the variable like {T_THEME_PATH} in CSS file... is not a good idea in fact. :?

Why not? That variable pointed to directory where css files are. CSS files are now included directly, so that variable is pointless.

And I'd like suggest that: ./theme/images/{lang}/ instead of ./theme/{lang}/. ;)

It includes not only images, but also css files.

[Dakin Quelia]

Okay.

Is it possible to add {T_THEME_LANG_PATH} variable in CSS file?