Portable infobox as seen on desktop

Portable infobox as seen on mobile

If you think converting your infoboxes is a long, lonely process, the crowd at Steven Universe may well prove you wrong. Sure, Fandom staff stopped by and gave a nudge or two, but most of the work was done in a collaborative effort by the community.

The power of conversation

One of the best things that happened at Steven Universe was the in-depth discussion. The community felt they first needed to decide just how much portability "matters" to them, and users brought up very astute points in both forum threads. They weren't just interested in how to build an infobox, but discussed the "philosophy" behind portability. Having decided portability is indeed a vital requirement to their community, users became especially committed to building portable infoboxes later on.

Look deep into the page history of one infobox, and you’ll find clear evidence of this. Fending off an attempt to revert back to the old, non-portable infobox, an editor simply says "There was a vote!" And with that, development on the new infobox continued uninterrupted.

More colors through JavaScript

This extensive discussion also caught the eye of some of our engineers. Impressed by Steven Universe's level of enthusiasm, our tech gurus devised a special solution for one of the community's woes: per-infobox color theming.

Some of the wiki's non-portable infoboxes were popular because they changed color depending upon how one of their variables was set. This isn't an ordinary feature of portable infoboxes, but our engineers decided to tackle it anyway. They managed to achieve the same functionality by using some clever, compact JavaScript.

As a result, hardly anything changed about the way they use their infobox. They can still feed a hex color value to the infobox when they incorporate the template on a page, and the background will magically change into that color on desktop. It's effectively impossible to tell the difference between their old infoboxes and these new, portable ones.

(If you're curious, you can see the code under the comment "Portable infoboxes colors" on their Common.js file.)

Please note: Fandom doesn't recommend mixing JavaScript with portable infoboxes. JS has several downsides that we'd recommend you avoid. And it can't be used to affect the infobox outside the desktop.

Here's why we did use it in this case

  • We know a lot of wikis have infoboxes that change colors like Steven Universe
  • The script to achieve it is particularly lightweight.
  • The JavaScript only affects the infobox' desktop version

Things you can learn from the Universe

While Fandom staff provided some help with the complex color feature, most of the conversions were done by the local community. Once Fandom provided a few example infobox templates, the community was able to simply replicate the code onto different infobox templates, tweaking where necessary. The community's forums stayed active during the transition, so that the community could ask staff questions as they proceeded. Users continued to actively discuss portability for months, but the actual conversion of the majority of infoboxes only took a few days.

Community content is available under CC-BY-SA unless otherwise noted.