FANDOM


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

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

Infobox themes

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

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