MA Help:Sidebars/CSS — memory alpha

Contents → Sidebars → Sidebars/CSS

Portable sidebars can be themed quite simply using custom CSS.

Without customization, portable sidebar theming takes cues from Memory Alpha's Theme Designer settings, particularly the article background color, accent color, and link color.

Sidebar themes and types

The default sidebar theming can be overridden using 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 sidebar title and headers) of all character sidebars 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 sidebars 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 sidebar.

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 sidebars 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 sidebars contain a variety of design-specific helper classes to help you easily update the overall styling:

Overall sidebar 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 sidebar, 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 Sidebars/Tags.

Sample code snippets

Change sidebar width:

.portable-infobox {
   width: 300px;
}

Change infobox background color:

.portable-infobox.pi-background {
   background-color: #ff0000;
}

Change sidebar headers and navigation background:

.portable-infobox .pi-secondary-background {
   background-color: #00ff00;
}

Change sidebar elements border color:

.portable-infobox .pi-border-color {
   border-color: #00ff00;
}

Change sidebar elements paddings:

.portable-infobox .pi-item-spacing {
   padding: 10px 20px;
}

Change sidebar data values font size:

.portable-infobox .pi-font {
   font-size: 16px;
}

Change sidebar headers, labels, and navigation values font size:

.portable-infobox .pi-secondary-font {
   font-size: 18px;
}

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