FANDOM


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

Fallout 4 article infobox at Nukapedia

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 which is 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. 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 design a base theme that meets the needs of your wiki and adapt the infobox styling on a deeper level to fit your needs, which I will touch upon now.

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.

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:

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 theme name can designate 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.

The theme-source attribute allows adding a second class to the infobox, by adding the second theme’s name to it from the article. You can use it 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 that changes 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.

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

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

The concept of accent styling for infoboxes is to make per-article and per-template customization easier by placing the simple controls you need there. This allows more basic changes to the color scheme for each template and article. It also allows you to give your infoboxes customization without the right access to or knowledge of CSS. Overall, accent styling falls into a bigger picture where Fandom can provide tools for you to recolor all elements from the article without introducing inline styling.

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

There are two default accent color parameters you can place in the infobox template to recolor its headers and titles. 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-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.

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.

Here's how you use it:

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
}}

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

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.

Ad blocker interference detected!


Wikia is a free-to-use site that makes money from advertising. We have a modified experience for viewers using ad blockers

Wikia is not accessible if you’ve made further modifications. Remove the custom ad blocker rule(s) and the page will load as expected.