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.

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

Title: .pi-title
Header: .pi-header
Navigation: .pi-navigation
Group: .pi-group
Data tag: .pi-data
Data Value: .pi-data-value
Data Label: .pi-data-label
Image: .pi-image
Image Caption: .pi-caption
Image Gallery: .pi-image-collection
Panel Tabs Element: wds-tabs__wrapper
Panel Tab Group: wds-tabs
Panel Tab: wds-tabs__tab
Panel Tab Content: wds-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: .pi-background
Title and header backgrounds: .pi-secondary-background
Data value font styling: .pi-font
Header, data label, and navigation font styles: .pi-secondary-font
Padding around each infobox element (title, headers, and each label/data pair): .pi-item-spacing
Infobox element border color (entire infobox, captions, groups, label/data pairs, and tab content groups): .pi-border-color

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

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

Community Central