Help:Infoboxes/CSS

Portable infoboxes can be themed quite simply using custom CSS.

Infobox themes
Default infobox theming can be overwritten using either theme or theme-source attributes of the infobox tag, allowing infoboxes to be styled via local community CSS. See to learn more about styling. If both attributes are used inside the infobox tag, the theme attribute is treated as the default. Note that spaces in the values of theme and theme-source are converted to hyphen-minuses, so only a single class may be added using them.
 * The theme attribute is used to specify a custom CSS class for the infobox.
 * The theme-source attribute allows you to vary the CSS class via a template parameter.

"Theme"
For example, theme="delta" will add a class called pi-theme-delta to the infobox HTML, which can then be customized using CSS:

// infobox contents go here

The code below could then be used to change the secondary background color to red:

If no theme is specified, .pi-theme-wikia will be used instead.

"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:  ...

The CSS to theme the template will thus be:

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

Helper classes
Portable infoboxes 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 infobox element
 * paddings around each infobox element


 * infobox element border colors
 * infobox element border colors

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

Sample code snippets
Change infobox width:

Change infobox background color:

Change infobox headers and navigation background:

Change infobox elements border color:

Change infobox elements paddings:

Change infobox data values font size:

Change infobox headers, labels and navigation values font size:

Change infobox title font size:

Change label column width:

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

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 infobox class, so CSS that changes the background for that theme would be:

fr:Aide:Infoboxes portables/CSS zh:Help:移動化訊息框/CSS