Community Central
Community Central

Portable infoboxes can be themed quite easily by local administrators using a wiki's community CSS.

Without customization, portable infobox theming takes cues from your community's Theme Designer settings, particularly the article background color, accent color, and link color.

Infobox themes and types[]

The default infobox theming can be overridden using local community CSS, and using the typetheme, or theme-source attributes on the infobox tag will make it easy to target specific infobox templates using classes.

  • The type attribute is used to specify a logical type (what an infobox is describing), but can also be used as a CSS class.
  • The theme attribute is used to specify a custom CSS class for the infobox template.
  • The theme-source attribute allows you to vary the CSS class via a template parameter.

Using "type"[]

For example, type="character" will add a class called type-character to the infobox HTML, which can then be customized using CSS:

Template code
<infobox type="character">
CSS to be used
.portable-infobox.type-character {

As an example, the code below could then be used to change the secondary background color (the background color of the infobox title and headers) of all character infoboxes to maroon:

.portable-infobox.type-character .pi-secondary-background {
    background-color: maroon;

Using "theme"[]

For example, theme="delta" will add a class called pi-theme-delta to the infobox HTML, which can then be customized using CSS:

Template code
<infobox theme="delta">
CSS to be used
.portable-infobox.pi-theme-delta {

As an example, the code below could then be used to change the secondary background color of all delta-themed infoboxes to navy blue:

.portable-infobox.pi-theme-delta .pi-secondary-background {
    background-color: #000080;

If theme= is left unspecified, it will default to theme="wikia" and the class pi-theme-wikia will be added to the infobox.

Using "theme-source"[]

For example, theme-source="location" means that, when location is specified in an article's infobox, it will use the value of it to form a class name.

For example:

Template code
<infobox theme-source="location">
Code on article
{{Example infobox
 |location = Africa
CSS to be used
.portable-infobox.pi-theme-Africa {

If you want to change the secondary background of the infoboxes for all locations in Africa, you would do then something like this:

.portable-infobox.pi-theme-Africa .pi-secondary-background {
   //custom styles

Note that class names are case-sensitive, so be careful about what you allow users to enter as the value of the theme-source parameter. In this case illustrated above, a value of "africa" would not trigger the desired style changes.

Advanced theme notes[]

  • If both theme and theme-source are used, both will supply CSS properties.
  • Spaces in the values of theme and theme-source are converted to hyphens (-), meaning only a single class can be added.
  • If no theme is specified, pi-theme-wikia will be added instead.

Main classes[]

These classes help you update the styling of specific tags:

Data tag
Data Value
Data Label
Image Caption
Image Gallery
Panel Tabs Element
Panel Tab Group
Panel Tab
Panel Tab Content

Helper classes[]

Portable infoboxes contain a variety of design-specific helper classes to help you easily update the overall styling:

Overall infobox background
Title and header backgrounds
Data value font styling
Header, data label, and navigation font styles
Padding around each infobox element (title, headers, and each label/data pair)
Infobox element border color (entire infobox, captions, groups, label/data pairs, and tab content groups)

Note: this is not an exhaustive list of available classes - more are listed within Help:Infoboxes/Tags.

Sample code snippets[]

Change infobox width:

.portable-infobox {
   width: 300px;

Change infobox background color:

.portable-infobox.pi-background {
   background-color: #ff0000;

Change infobox headers and navigation background:

.portable-infobox .pi-secondary-background {
   background-color: #00ff00;

Change infobox elements border color:

.portable-infobox .pi-border-color {
   border-color: #00ff00;

Change infobox elements paddings:

.portable-infobox .pi-item-spacing {
   padding: 10px 20px;

Change infobox data values font size:

.portable-infobox .pi-font {
   font-size: 16px;

Change infobox headers, labels, and navigation values font size:

.portable-infobox .pi-secondary-font {
   font-size: 18px;

Change infobox title font size:

.portable-infobox .pi-title {
   font-size: 24px;

Change label column width:

.portable-infobox .pi-data-label {
   flex-basis: 165px;

Select for custom theme "oblivion", then tweak caption font size:

.portable-infobox.pi-theme-oblivion .pi-caption {
   font-size: 16px;

Change background color of tabs for images

.portable-infobox .wds-tabs__tab {
  background-color: green;


Normally, if you need to change the styling for a specific theme you would write something like this:

.portable-infobox.pi-theme-name .pi-secondary-background {

However, when a CSS class is on the same element as another and you need to select for both, leave no space between the classes. For example, .pi-background is on the same <aside> element as the theme class (.pi-theme-name) and the general portable infobox class (.portable-infobox), so CSS that changes the background for that theme would be:

.portable-infobox.pi-theme-name.pi-background {

Individual elements can be styled independently using data-attributes as selectors. For example, all Portable Infobox elements that have an input of source will now render in HTML with that parameter name in a data-attribute, such as data-source="ATK". This will allow you to write CSS or jQuery selectors such as .pi-item[data-source=ATK] to style and identify individual items. Used in combination with type, this should eliminate the need for nth-of-type style selection and opens up other possibilities for design and interactivity.

The name attribute on an item allows explicit selection of elements whether they accept a source input or not, including identification of <title>, <group>, <data>, <header>, <image>, and <navigation>. Much like the data-source data-attribute, <data name="bar"> can be selected as .pi-item[data-item-name=bar].