Help:Infoboxes/CSS

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

Without customisations, portable info-box theming takes cues from your community's Theme Designer settings, particularly the article background colour and link colour.

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


 * The theme attribute is used to specify a custom CSS class for the info-box 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 Info-boxes 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 info-box HTML, which can then be customised using CSS:

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

Using "theme-source"
For example, theme-source="location" means that, when location is specified in an article's info-box, it will use the value of it as the class.

For example:

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

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


 * Header


 * Navigation


 * Groups


 * Data tag


 * Data Value


 * Data Label


 * Image


 * Image Tabs

Helper classes
Portable info-boxes contain a variety of design-specific helper classes to help you easily update the overall styling:
 * overall infobox background
 * overall infobox background


 * header and navigation backgrounds
 * header and navigation backgrounds


 * data value font styling
 * data value font styling


 * header, label and navigation font styles
 * header, label and navigation font styles


 * paddings around each info-box element
 * paddings around each info-box element


 * info-box element border colors
 * info-box element border colors

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

Sample code snippets
Change info-box width:

Change info-box background colour:

Change info-box headers and navigation background:

Change info-box elements border colour:

Change info-box elements paddings:

Change info-box data values font size:

Change info-box headers, labels and navigation values font size:

Change info-box title font size:

Change label column width:

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

Change background colour of tabs for images

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

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,  is on the same   element as the theme  and general portable info-box class, so CSS that changes the background for that theme would be: