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