[RFC|Merged] Removal of imagesets

These requests for comments/change have lead to an implemented feature that has been successfully merged into the 3.1/Ascraeus branch. Everything listed in this forum will be available in phpBB 3.1.
Post Reply
User avatar
nextgen
Registered User
Posts: 128
Joined: Sat Jul 24, 2010 4:59 am
Location: Guatemala
Contact:

Re: [RFC|Accepted] Removal of imagesets

Post by nextgen » Tue Sep 20, 2011 8:36 pm

Maël Soucaze wrote:I agree completely with this idea.
I do not quite understand the concept :|
There will be much rewriting the css?

User avatar
nextgen
Registered User
Posts: 128
Joined: Sat Jul 24, 2010 4:59 am
Location: Guatemala
Contact:

Re: [RFC|Merged] Removal of imagesets

Post by nextgen » Tue Sep 20, 2011 11:51 pm

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

User avatar
Arty
Registered User
Posts: 970
Joined: Wed Mar 06, 2002 2:36 pm
Location: Mars
Contact:

Re: [RFC|Merged] Removal of imagesets

Post by Arty » Thu Sep 22, 2011 11:00 am

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.
Formerly known as CyberAlien.

Free phpBB styles | Premium responsive XenForo styles

User avatar
Arty
Registered User
Posts: 970
Joined: Wed Mar 06, 2002 2:36 pm
Location: Mars
Contact:

Re: [RFC|Merged] Removal of imagesets

Post by Arty » Thu Sep 22, 2011 11:00 am

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.
Formerly known as CyberAlien.

Free phpBB styles | Premium responsive XenForo styles

User avatar
naderman
Product Manager
Product Manager
Posts: 1727
Joined: Sun Jan 11, 2004 2:11 am
Location: Karlsruhe, Germany
Contact:

Re: [RFC|Merged] Removal of imagesets

Post by naderman » Thu Sep 22, 2011 11:37 am

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.

User avatar
Arty
Registered User
Posts: 970
Joined: Wed Mar 06, 2002 2:36 pm
Location: Mars
Contact:

Re: [RFC|Merged] Removal of imagesets

Post by Arty » Thu Sep 22, 2011 11:52 am

Formerly known as CyberAlien.

Free phpBB styles | Premium responsive XenForo styles

User avatar
nextgen
Registered User
Posts: 128
Joined: Sat Jul 24, 2010 4:59 am
Location: Guatemala
Contact:

Re: [RFC|Merged] Removal of imagesets

Post by nextgen » Thu Sep 22, 2011 8:36 pm

Tonight proves that indicate changes. :)
*Imagine a signature super spectacular.*

Dakin Quelia
Registered User
Posts: 11
Joined: Mon Feb 02, 2009 4:44 pm

Re: [RFC|Merged] Removal of imagesets

Post by Dakin Quelia » Thu Oct 13, 2011 6:42 pm

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.

User avatar
Arty
Registered User
Posts: 970
Joined: Wed Mar 06, 2002 2:36 pm
Location: Mars
Contact:

Re: [RFC|Merged] Removal of imagesets

Post by Arty » Thu Oct 13, 2011 6:46 pm

Dakin Quelia wrote: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.
Dakin Quelia wrote:And I'd like suggest that: ./theme/images/{lang}/ instead of ./theme/{lang}/. ;)
It includes not only images, but also css files.
Formerly known as CyberAlien.

Free phpBB styles | Premium responsive XenForo styles

Dakin Quelia
Registered User
Posts: 11
Joined: Mon Feb 02, 2009 4:44 pm

Re: [RFC|Merged] Removal of imagesets

Post by Dakin Quelia » Thu Oct 13, 2011 6:48 pm

Okay.

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

Post Reply