Portable infobox notes

The following is a collection of notes about the coding of portable inboxes. No attempt to sort these notes into a useful order will be made. 
Most of my ramblings here will be about CSS that can be applied in various situations. The code snippets given should almost always be applied through MediaWiki:Common.css. However, for additions to Common.css to work, you must ensure in WikiFactory that the variable wgOasisLoadCommonCSS is enabled. For reasons I cannot currently explain, this variable is set to true by default only on newer wikis, dating from — I think — 2014 onwards. DaNASCAT has long been on a campaign to see that people enable this variable rather than @import-ing Common.css "manually" from MediaWiki:Wikia.css. So you may encounter a number of older wikis where this has been done already. However, you should always check this variable in WikiFactory, anyway.
Why do you want to put this portable infobox code in Common.css rather than Wikia.css? If you put it in Wikia.css, then Monobook viewers won't your CSS alterations. It costs nothing to include them, so why not do it? 
Okay, that established, let's crack on with some more specific things:
== Styling ==
=== General infobox width ===
Quickest way forward to establish a particular width for infoboxes is: .portable-infobox { width: whatever}
Why aren't all infobox widths the same? Mainly because communities have different image policies. Especially with WAM 500 ones, infoboxes have been engineered based upon the standard width of infobox images. For instance, at w:c:memoryalpha, all infobox images are 292px. At w:c:tardis the number is 250px. If you start screwing with those numbers by making the width of the box different from the width of the images, you're going to have extremely widespread visual differences between the old infobox and the portable one. 
=== Main title ===
To affect styling of main title of infobox, use .portable-infobox .item-type-title { whatever styling you want } 
=== Other rows of the infobox ===
Take a page from MarkvA's book at do something like this: 
 
.item-type-key-val {
 padding: 0px ! important;
}
 
.item-type-key-val .portable-infobox-item-label {
 background: #008000 none repeat scroll 0% 0%;
 padding: 5px 20px 5px 10px;
}
 
.item-type-key-val .portable-infobox-item-value {
 background: #ffff00 none repeat scroll 0% 0%;
 padding: 5px 20px 5px 10px;
}
=== Getting little icons into the infobox ===
A lot of infoboxes, particularly on Games wikis, use the infobox to show you graphically how to build something using in-game objects, or how much of certain qualities your character has. So the question becomes how to honour the original infobox and include those icons. Turns out, it's not quite what you may have been expecting.
You definitely do not use an <image> tag. Here's an example from w:c:ja-dont-starve:
 <group layout="horizontal">
	<header>クラフト</header>
	<format>[[File:{{{ingredient1}}}.png]]</format>
	</group>
A lot more styling could be added here — the undefined anticipates this. To see it in action, you click here for the template and here to see it in action.
== Navigation tags ==
The navigation tag is meant to only enclose navigational elements. Resist the temptation to use it for anything but navigation. It might not show up on mobile, which would kinda defeat the purpose of the exercise of PIs.
== Errors ==
Errors are not currently well defied by the PI code. You'll typically get a message that simply says, "You done wrong!" And that's not helpful. So I'll list a few things that I've noticed trigger error messages, along with their solutions.
=== Proper quotations around HTML definitions ===
With other aspects of Wikia, this —  works as well as . That's not the case with PI code. Only works. So don't be lazy. :)