I'm sure many of you are aware of a phenomenon known as the portable infobox, AKA Wikia's way of straying away from complex wikitext in favor of better mobile compatibility. I'm also sure that many of you long-time users hate them and continue/will continue to refuse to use them; if you're one of them, then sorry, but this blog isn't directed at you. :P
This blog is directed at users who find little to no reason to use standard wikitext infoboxes, whether it's because they are relatively new, simply like PIs better, etc. Syntax and CSS tips are both included in this post.
Very brief intro
To make a portable infobox, you first need to start creating a template page. Go to Special:CreatePage and name the page something like "Template:Example". Then it's time to get technical.
Begin the code with
<infobox>. This will specify that what you are making is a PI.
Optionally, you can also add on additional styling, such as theme and/or layout. Theme will allow individual/multiple templates of the type to be customized via CSS, and layout will change how the fields are presented (by default they are presented like this).
Want to use both? Merge them like this:
<infobox theme="whatever" layout="stacked">
A title on the infobox (the "Environmental Hazards" at the very top in this case) can be achieved using the <title> tag, like this:
If you want to make it so that the title defaults to the page's name, use this:
There will be more on <default> tags later on in this post.