Wikia

Community Central

Comments47

How Portable Infoboxes Can Change Your Style

One of the opportunities that comes with switching to portable infoboxes is that you can reconsider the way your whole community looks. That may sound daunting, but it can be highly rewarding. As the most dominant element on most pages, infoboxes are usually where the readers' eyes are drawn — and so they are naturally part of the stylistic core of any community.

CSSLogo

It's that middle "S" that you've got to worry about

It's easy to forget that the central "S" in "CSS" stands for style. We just go around, picking colors out of a hat, choosing styles at random. But, particularly when it comes to infoboxes, your life will be exceptionally easier if you take your time and consider your infoboxes a holistic system of design elements. After all, knowing which brushes to buy and which paint to use makes you smart, but it doesn't necessarily make you an artist.

It's fun to make each infobox have its own color and to attempt some sort of "color-coding" with them. But the more your community grows, the bigger the chance that your color-coding won't work any longer. There may be an almost infinite number of colors out there, but there are really only a few that the human eye can usefully distinguish.

So if you’re going to do color-coding of some kind, paint with a very broad brush. Assign colors to huge topics, not smaller slices of knowledge. For instance, you’ll probably want to have just one color for all foods — not a color for meats, a color for vegetables, and a color for desserts.

Notice how Wookieepedia have grouped six infoboxes under the single theme of astro:

	/* Constellation, Galaxy, Nebula, Sector, System, Trade_route */
	.pi-theme-astro .pi-title { background-color: #004466; }
	.pi-theme-astro .pi-navigation { background-color: #004466; }
	.pi-theme-astro .pi-navigation a { color: white; }
	.pi-theme-astro .pi-header { background-color: #BBCCDD; }

By assigning astro to all massive space objects, they're using colors #004466 and #BBCCDD to convey useful meaning.

But consider this. Your life can be even simpler if you choose to make all your infoboxes have the same color — preferably one that is chromatically related to your navigation bar. Taking the time to create a single, killer style for your infoboxes will reduce your maintenance time for years to come.

ColorEye

Make sure that you choose colors everyone can see.

Likewise, people must be able to read your infobox. This is harder to do if there's little contrast between the color of the text and the background. Here's a well-illustrated demonstration of color contrast issues. You'll also want to use a color contrast analyzer to help you make highly-readable color choices.

If you're looking for design inspiration, and even specific coding ideas, go to communities that currently have portable infoboxes in action. Read their CSS and try to make sense out of it. Audition their code on a test wiki that you create. Then, when you're comfortable manipulating the portable infobox CSS, use it on your own community. The worst that could happen is that you'll make an easily-fixable mistake!

Tailored themes

Recently, Wikia worked with two communities with different theme experiences. In one case, our goal was to match as closely as possible the existing theme. In another, we broke with the established theme in order to establish something more readable, particularly in the title bar.

Reproducing what's already there

The Walking Dead Wiki was given a crafted, bespoke theme for their portable infoboxes that matched most of their original infoboxes. Some of the templates on their community were imported from other sites and did not consistently match the rest. However, once the new theme was set up in the site CSS, all infoboxes defaulted to it — without requiring inline code.

Tyreese-nPI

Non-portable infobox

Tyreese-PI

Portable infobox

Making some changes

By contrast, Borderlands Wiki elected to enlist Europa, one of the two default themes for portable infoboxes. It uses a community's existing color scheme to provide a tailored feel without writing any CSS code. It's optimized for the desktop and tablet experiences, with plenty of touch-friendly padding for navigation on emerging devices.

Of course, Europa can be modified by CSS, and Borderlands Wiki chose to tweak things a bit from the true Europa default. But in doing so, they didn't give up any of Europa’s native responsiveness.

HB-nPI

Non-portable infobox

HB-PI

Europa, slightly tweaked

Conclusion

While you absolutely can style each and every infobox individually, you should use your power wisely. Try to make as much of your infobox design universal — applicable to every individual infobox. If you don't, you'll end up with a very complicated CSS that'll be much harder to maintain. Here's an example of a really complicated set of Themes — over 2000 lines long!

It's completely understandable why this has happened. Over time, communities add more and more infoboxes. And a team that worked on the community in 2009 might have totally different stylistic ideas to yours. Like modern cities built atop ancient ones, the deeper you go into the past, the more different styles you'll find. Thus, the adoption of portable infoboxes is a great time to clear away all the old styles to come up with something fresh, bold and unified. Otherwise, you'll end up maintaining tons of other people's ideas of What Looks Cool.

Want to receive updates on the latest Staff blog posts? Then click here to follow this blog.

Around Wikia's network

Random Wiki