Help:Infoboxes/CSS

Infobox themes and types

The default infobox theming can be overridden using local community CSS, and using the type, theme, 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.
Communities using the Europa theme feature have a different set of CSS defaults. These can be identified using the .pi-europa selector. Communities with existing classic styles that they are trying to recreate for Portable Infoboxes are encouraged to deactivate Europa before migrating their CSS.

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"> ... </infobox>
CSS to be used	.portable-infobox.type-character { ... }

As an example, the code below could then be used to change the secondary background color to red:

.portable-infobox.type-character .pi-secondary-background {
    background-color: #CF3D0C;
}

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"> ... </infobox>
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 to red:

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

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 as the class.

For example:

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

If you want to target specific elements within that particular infobox, you would do then something like this:

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

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 used instead.

Main classes

These classes help you update the styling of specific tags:

Title: .pi-title
Header: .pi-header
Navigation: .pi-navigation
Groups: .pi-group
Data tag: .pi-data
Data Value: .pi-data-value
Data Label: .pi-data-label
Image: .pi-image
Image Tabs: .pi-image-collection-tabs

Helper classes

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

.pi-background: overall infobox background
.pi-secondary-background: header and navigation backgrounds
.pi-font: data value font styling
.pi-secondary-font: header, label and navigation font styles
.pi-item-spacing: paddings around each infobox element
.pi-border-color: infobox element border colors

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

.pi-image-collection-tabs li {
  background-color: green;
}

Advanced

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 {
   background-color:#334;
}

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 (.pi-theme-name) and general portable infobox class (.portable-infobox), so CSS that changes the background for that theme would be:

.portable-infobox.pi-theme-name.pi-background {
   background-color:#334;
}

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].