Building Better Boxes: Themes and Accents

Hey! I'm Speedit from the Vanguard team, here to tackle the topic of infobox theming.

The Fallout 4 infobox on Nukapedia is the main element to the article lede. It's noticeable because it's large and colourful.

Infoboxes are a fundamental, high-profile element of most wiki articles that gathers key facts on the article’s subject. A well-designed infobox will set the bar for an attractive article, so pay the layout good attention to make sure it ticks that box!

There are two ways to customize the appearance of Portable Infoboxes - CSS theming and accent styling. The design of the Portable Infobox product makes one fundamental change. Any markup added to change the presentation is split from the content.

This means that Fandom’s servers can understand and digest the information properly. The change paves the way to greater things - better adaptability for mobile devices, more machine-friendliness for search engine crawlers and huge potential for Fandom’s content APIs.

Infobox design

To prepare the design of a portable infobox, you need to adapt the layout of the template. That's controlled by the markup for the infobox. The infobox tags listed in Help:Infoboxes/Tags each have their meaning to editors and machines. It is important to start by using the right tags on an infobox template to ensure correct layout.

Modifying the design of a portable infobox will require an understanding of CSS - this guide provides a good basis for understanding CSS. The CSS for the portable infoboxes are stored in your wiki’s stylesheets, such as MediaWiki:Common.css for all desktop skins and MediaWiki:Wikia.css for Oasis.

All the infoboxes have a .portable-infobox class. The elements that make up your infobox also have classes, listed at Help:Infoboxes/CSS. It is advisable for you to start with a base theme design (to meet the needs of the whole wiki). This will allow you to adapt the infobox styling on a deeper level to fit your needs, through CSS theming or accent styling.

CSS theming

Theming is a versatile CSS tool. You can use it to provide consistency between different infobox designs when migrating your infoboxes. Each design aspect can also be changed centrally, which is highly useful in the case of color schemes and visual tweaks. A lot of wikis have a panoply of color schemes, formatting needs and layouts between templates. You can use theming to achieve this effect too.

Infobox themes

To add theming to a specific set of infoboxes or an individual infobox only, the theme parameter is used in the infobox. This is done by adding theme="THEMENAME" to the <infobox> tag, and styling the .pi-theme-THEMENAME class.

The theme name can describe a type, a design variant or a specific template. You can use theme to increase the width of all infoboxes for the wiki’s media articles. Using CSS, you can also customize any element inside that infobox theme - like tweaking the horizontal groups of an episode infobox.

theme attribute example

Here's how Undertale Wiki centered the labels for their music infobox.

Template:

<infobox theme="music">
    <title source="name" />
    <image source="image"/>
</infobox>

CSS:

.pi-theme-music .pi-data-label,
.pi-theme-music .pi-data-value {
    text-align: center;
}

Result:

The music infobox for Memory on the Undertale Wiki now has centered data labels.

This customization now applies to all music infoboxes, so it carries over to Determination.

Per-article theming

The theme-source attribute allows adding a second .pi-theme- class to the infobox. However, theme-source is different to theme because it is added from the article.

You can use theme-source to change the visual styling of an article’s infobox, without creating a new template for each article. You can also use it to introduce a subtheme, changing the infobox’s themed styling depending on what parameter is in the theme-source. This comes in handy when changing the color scheme of an in-universe article infobox depending on an association with something else.

theme-source attribute example

For example, Wookieepedia uses theme-source parameters to apply color theming to its character infoboxes based on their allegiance.

The Kylo Ren character infobox has a dark red color scheme that reflects his Sith allegiance.

Meanwhile, Luke Skywalker’s infobox has a gold color scheme to show that he is a Jedi.

Take a look at how it’s done:

Template:

<infobox theme="character" theme-source="type">
    <title source="name" />
</infobox>

Article:

{{Character
|type=jedi
|name=Luke Skywalker
}}

CSS theming:

.pi-theme-jedi .pi-title {
	background: #736326;
}

Accent styling

Accent styling for infoboxes is aimed at making per-article and per-template customization easier. This is done by placing simple controls in the article's source. These allows more basic changes to the color scheme for each template and article.

Accent styling allows you to give your infoboxes customization without the right access to or knowledge of CSS. It also falls into a bigger picture, where Fandom can provide tools for you to recolor all elements from the article, and without introducing inline styling.

The French One Piece Encyclopédie uses accent colors to great effect, applying matching color schemes between character infoboxes and the character design. The editors of the wiki can recolor the infoboxes from the article itself.

The Doflamingo article infobox at One Piece Encyclopédie has been given pink headers and purple text.

Meanwhile, the infobox in the Luffy article has yellow headers and red text.

Accent styling by default

There are two default accent color parameters you can place in the infobox template to recolor its headers and titles:

accent-color-default

This is used to change the background color of the template’s title and header elements.

accent-color-text-default

The text color of the template’s header and title elements is changed with this parameter.

It is possible to avoid using CSS theming for recoloring elements this way. However, one wiki stylesheet may be easier to maintain than default coloring for a set of infoboxes. Choose what will work best for you in your case, and don’t hesitate to ask below if you need help deciding.

Accent source styling

The two accent styling source parameters are special. These let you use a template parameter to change the color of your infobox template in the article, which is what the One Piece Encyclopédie did.

accent-color-source

Applies a color input to the background of the infobox’s title and header elements.

accent-color-text-source

Applies the color input to the infobox’s header and title text.

Do note that the only accent styling input the infobox accepts are hex colors. Your feedback on the accent styling feature, and your ideas for features in portable infoboxes, are always welcome.

Accent styling example

Shanks' color scheme now matches the Red Hair Pirates - and his own hair.

Here's how the One Piece Encyclopédie colored Shanks' infobox red, to match his affiliation with the Red Hair Pirates.

Template:

<infobox
accent-color-default="#000"
accent-color-text-default="#fff"
accent-color-source="bgcolor"
accent-color-text-source="txtcolor"
>
</infobox>

Article:

{{Infobox
|bgcolor = #01c0ed
|txtcolor = #fff
}}

Conclusion

You can theme your portable infoboxes using CSS and accent styling. It is highly advisable to work from a base theme that matches your wiki’s needs. We used:

• theme to add CSS to our infobox templates,
• theme-source to show the schism in the Force,
• and accent styling to give Doflamingo a flamboyant color scheme!

You may find there’s new things to learn and a few new limits to adapt to. Hopefully, you can still push through and use Portable Infoboxes to redefine your editing and customization habits.