To help make this wiki more accessible, in particular on small screens, I and Whittard mt have migrated the infobox templates to the new portable infoboxes format.
Why portable infoboxes?[]
The old infobox templates use inline style information to design the infoboxes. This infobox implementation hard-wired content, for example a label such as "Appearances:" and presentation (layout, colors, fonts etc.) with the binding of the parameters (here is an example). This made it hard to change the design, because every infobox template (there are currently about ten in this wiki) contained the style information in hard-coded form, and changing something in all infoboxes required changing all of these templates. It also made it hard to understand the template code (so that changing even only one template was difficult), because the parameter bindings and the style are hard to see between all the layout markup. Separating the bindings from the styling also enables the wiki to adapt the layout to smaller screens.
Theme "tlj"[]
The main work consisted in recreating the current infobox design. I have created an "infobox theme" named "tlj", by adding the style information used by TLJ infoboxes (for example transparent background, a light grey border with rounded corners) to MediaWiki:Wikia.css (the local style sheet). Without such customization, "portable" infoboxes have a light blue background, possibly determined by an overall wiki styling.
The default for portable infoboxes uses border lines between information items (rows, in the case of Template:Infobox between columns, too). To match the "classic TLJ infobox style", I have suppressed these borders.
In order to mostly match the existing design as far as the text is concerned, I have reduced the internal margins from the default used by the portable infoboxes. This also affects the width of the images. Rectangular images now tend to fill the entire width, exactly up to the border. Cropped images of characters now appear much larger, which can make them easier to recognize, for example April Ryan. This was not intentional (and not visible with the preview image), but I like it, so have left it like that for now. Please comment how you like the wider images, and notify me of any problems that you notice.
Migration process[]
At first, with one exception, I have migrated only infoboxes which were not used, so that their style did not really matter. The exception was Game Chapter, which was then used by about ten pages. I have then migrated Template:Infobox_character, which automatically affects all members of Category:Character (Special:WhatLinksHere/Template:Infobox_character, to be precise), over a hundred pages. Note that to see the effect of such changes, you may have to append "?action=purge" to the URLs, until Wikia has refreshed all their caches. My plan then was to wait a few days maybe and if no one objected, to migrate Template:Infobox_location and Template:Infobox_item as well. Whittard mt went ahead and just did it right away. :-)
Issue: Lowercase "image:" did not work[]
Unfortunately, the portable infobox mechanism was not as convenient as I would have liked it to be. See this bug report that I filed. Until that was fixed, images with image field values that start in "i" (not "I") did not display. The problem only became apparent once Wikia refreshed their caches (append "?action=purge" forces this for an individual page). To work around this, I had manually changed all affected character pages. For items and locations, to avoid having to edit a hundred pages or so, I had at first reverted the infobox migration for these.
In the bug report thread, Dessamator has suggested a workaround for the lowercase "image:" uses. So I restored Whittard mt's portable versions of the infoboxes for items and locations and applied the workaround. A few days later Wikia fixed the issue, so I removed the workaround. Now it seems to work, I have not found broken image uses.
Issue: Infobox images link to the image itself instead of to the image page[]
Solution: Just left-click, the resulting overlay shows the link to the image page at top left.
When hovering the pointer over an image, the browser shows an address like [1]. Depending on your system, using the context menu or the middle mouse button leads directly to the image itself, instead of to the image page, such as File:Placeholder person.png in the example shown here. However, when simply clicking on the image using mouse button 1 (the left one, for most people) the page shows an overlay, showing information about the image such as who uploaded it, where the image is used, and a link to the image page, in the form of the file name, at top left. It is surprising that left-click does something else than to follow the link that the browser shows. I think I'd like it better if hovering showed a link to the image page.
