FANDOM



This page contains the structure of an infobox and its classes which are applied to certain parts of the infobox. This help page has some additional notes and advice.

Infobox is..?

An Infobox is a template that is positioned on the right side of the page and holds the general information of a certain subject. Presently, it is used on numerous wikis to provide the most important information of the article.

Initially, they were creating infoboxes manually, using tables or separate templates. In 2014, FANDOM created its own infobox markup for portable infoboxes, which consists of XML tags and provides better data portability. It ensures that infoboxes can run on any device correctly. That's the main reason to use portable markup. In case if a wiki has some created templates already, they need to be converted to enjoy portable rendering.

You can create an infobox in two ways: either using an editor (InfoboxBuilder) or manually, using XML tags.

InfoboxBuilder

InfoboxBuilderManual

User Interface of InfoboxBuilder

If user creating a template sets its type as «Infobox», constructor of infoboxes will automatically load. It's placed on the InfoboxBuilder page. It is recommended to contributors unfamiliar with portable infobox markup or want to look at how the infobox will look. The only downside of it is that it doesn't apply written CSS code to infoboxes. However, this editor automatically creates a «documentation» in the code of a template, containing all the parameters for it.

Also, InfoboxBuilder can be used in case if you've planned a lot of rows, and after that you go to editing the source code. To do so, you need to press a button at the bottom right corner. On its hover, it will show up «Source Code Editor».

If you need to expand the rows with other content, such as format, default values, it's recommended to work in Source Editor. InfoboxBuilder creates the initial «bones» of a template.

If you've done creating an infobox, you need to press «Publish» button at the top right corner. If you've got to revert all your actions or choose another type of template, you need to click on an arrow at the top left corner.

Elements

Initially you get an infobox with the title set to «Article Name», an image and two similar rows. User can interact with four elements of an infobox: title, image, rows and section headers. After pressing on any element you'll see the explanation of how it looks and its options. They can be switched by places, which is suggested after pressing on any of them.

InfoboxBuilder creates the parameters automatically in the following appearance: on English language, in uppercase and with a serial number.

Title

It's the first button in the list. Options in InfoboxBuilder can set a default value of title to article name. If the option isn't checked, the title changes to «Infobox Title». This option is recommended to use, otherwise title won't show up unless user defines title1 parameter.

Elements get called by a serial number: title1, title2, title3, etc.

Image

The button is placed on the right side at title's button. It has no options. By default, it contains the caption element which can be modified with caption1 parameter. This way, the image element initially contains the following structure: <image source="image1"><caption source="caption1"/></image>.

Row

The button is shown up below the title button, at the right side. It's possible to change the label from its default «Row» value. If it remains the same, it receives parameters like row1, row2, row3 and etc. If it's changed, it gets a certain parameter written in uppercase and with underscore instead of a space. For example, if you've called a label «Previous Episode», it gets a parameter called previous_episode.

Again, if you want to modify a parameter or change a label content, you will need to use Source Editor.

Section header
InfoboxBuilderCollapseClosed

Collapsed header in InfoboxBuilder

It's the last button within the list. It gets initially added to an infobox after pressing a certain button. All the rows below a headers are included to a separate group. Options suggest to give the name to a header and collapse the group. Mainly, this option is chosen if a group might contain spoilers or it's too way large. In other words, it's collapsed by default, replaced with a header and an arrow; after pressing this arrow, all the inner rows will show up.

It doesn't have parameters due to its stability. For additional settings of a group, go to Source Editor. These settings include the appearance, the amount and the way of showing up data.

The result

Default infobox of a builder extension has the following code:

<infobox>
  <title source="title1">
    <default>{{PAGENAME}}</default>
  </title>
  <image source="image1">
    <caption source="caption1"/>
  </image>
  <data source="row1">
    <label>Label</label>
  </data>
  <data source="row2">
    <label>Label</label>
  </data>
</infobox>

Here's the code of an infobox that contains one expanded group and a collapsed one:

<infobox>
  <title source="title1">
    <default>{{PAGENAME}}</default>
  </title>
  <image source="image1">
    <caption source="caption1"/>
  </image>
  <group>
    <data source="row1">
      <label>Label</label>
    </data>
    <data source="name">
      <label>Name</label>
    </data>
  </group>
  <group collapse="closed">
    <data source="row2">
      <label>Label</label>
    </data>
    <data source="age">
      <label>Age</label>
    </data>
  </group>
</infobox>

Unfortunately, InfoboxBuilder isn't an option for creating handy and pretty infoboxes. That's why we're moving towards Source Editor.

Source Code Editor

InfoboxSourceCode

Working in source code of infoboxes

As described below, Source Editor suggests more functions of improving an usage of infoboxes. Here, you can apply a theme, a format of data's appearance, default values of parameters and use parser functions that can simplify defining parameters.

Note: don't use tables in infoboxes, even if you build it on HTML tags. The main singularity of portable infoboxes is their portable tags. Tables mostly get corrupted in mobile skin of FANDOM. A good alternative to tables is using horizontal groups (see more in «Group» section) or manipulating with row's attributes.
Note: don't use style and class attributes in <infobox> tag. They don't work. For this reason, the design is coded in CSS files.

Tags

The base

<infobox> is a required tag where you begin developing an infobox. An opening tag might contain certain design-related attributes (see more in «Changing the design theme») such as:

  • theme is an infobox theme, its title is taken from a wiki's CSS file;
  • theme-source is a parameter that affects a certain design theme;
  • layout is a parameter that affects the position of row's values. When it's stacked, values are placed on a next line;
  • accent-color-source is an attribute that contains a parameter that affects the background color in headers;
  • accent-color-text-source is an attribute that contains a parameter that affects the text color in headers;
  • accent-color-default defines the default background color in headers. Doesn't require accent-color-source;
  • accent-color-text-default defines the default text color in headers. Doesn't require accent-color-text-source.

Inside of <infobox>, all other tags are used: <title>, <image>, <header>, <navigation>, <data>, <group>.

Title

<title> is a tag that creates the main header with a title. It has got the only one, required source attribute. It defines a parameter that changes the title.

Note: even if you'll point this parameter in <default> or <format> tags but don't add source attribute, the main header won't appear. That's why it's important to point any valid parameter in this attribute.

You can use the following tags inside:

  • <format> affects the content of the main header;
  • <default> is a tag where you write a content that will show up if a parameter in source attribute doesn't have a value. Mostly it contains {{PAGENAME}}, so that the title doesn't disappear (additionally, it's often the same as an article name). If you've got format tag, you will need to copy its content and paste into default, so that the format will remain the same.
Image

<image> is a tag that creates an image element in the infobox. As well as a title, it has got source attribute with the same purpose.

Note: in source code of an article, putting an image requires writing its title and format type: for example, Example.png. It's a recommended way.
Note: if you want to replace an image with a complex structure of data that can't be made of a gallery (for example, a special template or a map), you can use a navigation (see more in «Navigation»).

Inside of this element, you can use the following tags: <caption>, <alt> and <default> which defines an image that will show up if its parameter isn't given a value. It can be useful in case when you need a default image with the text as «The image isn't accessible» or something like that.

Caption

<caption> is a tag of description under the image. It has got a source attribute with a parameter that affects this description. Besides, it supports the following tags:

  • <format> affects the appearance and content of a description;
  • <default> is used when you need the description to show up in any article, and if it's not defined, the content of this tag will take a place.
Note: the caption isn't supported by all other tags. Additionally, it disappears if image gets replaced by a gallery or a tabber. Even with a defined caption content.
Tooltip

<alt> is a text that shows up when you hover on an image. It contains source attribute and <default> tag. Note: if an image is replaced by a gallery, <alt> content gets replaced by titles of images.

Group

<group> is a tag that collects a bunch of other items. To separate a group, users mostly add <header> tag inside which doesn't have any attribute or tag and simply contains the header's content. <group> includes a lot of other attributes that define the appearance of the group:

  • collapse expands or collapses the group. Its values: open and closed. With this attribute defined, the section header receives an arrow that opens or closes the group. When the attribute value is open, the group is expanded and gets collapsed when the arrow is pressed. When the attribute value is closed, the group is collapsed and opens in the same manner;
  • layout defines the appearance of data, whether it shall be rows or columns. Its values: default and horizontal. Default value shouldn't be defined explicitly. When the horizontal value is given, the rows get converted into columns. Note:: when the layout is horizontal, you just need one self closing <data> tag supplied (see more in «Data»);
  • row-items defines the amount of columns in a row. When the layout is horizontal, this number defaults to the amount of <data> tags in the group. Note: usage of this attribute automatically defines the layout as horizontal, so you don't require the layout attribute.

Inside of a group, the following tags are supported: <data>, <header>, <image>, <title>, <navigation>.

Data

<data> is an element of a row with various information. It's used either inside or outside of a group. Supports the following attributes:

  • source is a required attribute that lets a row work properly. Its functionality is the same as other elements: it contains the template parameter that defines the content. Note: if you need to insert static information or links, use a natigation tag.
  • layout is used when the group has horizontal layout and this row needs to have a default layout. In this case, <data> should contain: layout="default";
  • span works within a layout="horizontal" group. For example, a row contains 3 «squares». Another row should contain two of them, and one «square» should be larger, i.e. be placed on 2/3 of the row. This data block should have the following code inside: span="2". Note: if there are two «squares», a data block with span="2" would fill the whole row. This feature is mostly replaced with navigation, but it's recommended to «play» with data's attributes.

The following tags are used:

  • <label> contains the title of a row. It's required in default groups and layout="default" rows;
  • <format> affects the appearance of content in this row. Here, you can use parser functions, wikitext with content, etc.;
  • <default> contains the content that's supposed to show up if the parameter in source isn't given a value.

<navigation> tag is described as an element of wikitext. It can be used either inside or outside of a group. In a navigation, you can paste a link to the template (like it's mostly done in English wikis), a map, another template, a complex structure or anything like that. In other words, here you can put anything you couldn't put into all other tags.

Note: as this tag doesn't require any attribute or a child element — therefore not having any parameter required — its content shows up in any way.

It's good when you put a link to the template in the navigation. However, what should you do if it's not a simple link but a complex template or a map that uses some defined parameters? You can create these parameters and parser functions that are described below.

Parser functions

These functions are helping improve the infobox depending on certain values of some parameters. The most used functions are availability of a parameter (#if), comparation of a parameter and its value (#ifeq) and comparation of various values of one parameter (#switch).

Availability of a parameter

Syntax: {{#if:The influential text | Code that shows up if the text is true | Code that shows up with an absent text}}

This condition seems to be pretty easy. It's the most frequent function in templates of FANDOM. Before portable infoboxes had appeared, everyone used to apply these functiom for every block of data: first they added a parameter, then the code of a row and the third section was empty. The syntax assumed that if a parameter is given a value (is true), the first code works, otherwise nothing shows up.

However, even after portable infoboxes had released, this function didn't disappear. Mainly, it gets added into a navigation, when it's not certain that some parts should always show up and when it depends on user's choice.

Imagine a situation that user can put absolutely any image into a navigation — really, any image they could ever want, using a Navigation parameter. But they don't have to do it if they don't want to. A difficult issue, right? The following code helps:

<navigation>
    {{#if:{{{Navigation|}}} | Your image! :) <br/> [[File:{{{Navigation|}}}]]|}}
</navigation>

Explanation of the code:

  • {{{Navigation|}}} is a parameter that defines the used code. After its title, before closing curved brackets, it's recommended to put a straight line. It works in all parser functions.
  • Next goes the code that will execute if user pasted a value to the base parameter. In this case, they can just put the file name, as the code is simplified for obvious usage of a file.
  • Then goes an empty block of code: if value isn't given, the function doesn't add anything, and this part remains the same.

When is this function also used? For example, if articles without an image are included in a special category. In this case, the third section of a function contains the link to the category.

Unfortunately, to apply this feature, we can't use <image> tag and paste the category link into a child <default> tag. That's why we're moving an image to navigation.

Before:
<image source="Image"/>
After:
<navigation>
  {{#if:{{{Image|}}} | {{{Image|}}} | [[Category:Pages without an image]]}}
</navigation>

Here, if an image is true, the code just pastes it, otherwise it pasted a category.

Translator's note: there's an easier way without moving an image to navigation tag: we leave this image tag and create this navigation:
<navigation>
  {{#if:{{{Image|}}} | | [[Category:Pages without an image]]}}
</navigation>

This code just pastes a category if image is absent on this page.

Comparation of a parameter

Syntax: {{#ifeq: The influential text | The compared value | Code that shows up if comparation is true | Code that shows up if comparation is false}}

The title of this function stands for «if equal», i.e. it checks the value of a parameter, not its availability. In this parser function, a parameter and its certain value are defined. If the parameter is given this value, the first code executes, otherwise the second code does.

It's not used as often as #if function, despite being pretty useful. For example, you've got the following code:

<data source="Occupation">
    <label>Occupation</label>
    <format>{{{Occupation}}} [[Category:Working population]]</format>
</data>

By default, if Occupation parameter is defined, the page will automatically get this category. Generally it's nice, however, imagine you're editing a documentation that definitely shouldn't have such a category. Then, instead of the category link, you should write the following code:

{{#ifeq:{{{Occupation|}}} | No | | [[Category:Working population]]}}

Explanation of the code:

  • {{{Occupation|}}} is the base parameter that we're comparing;
  • No is a value that this parameter should be given to invoke the empty code in the third section. You can set any value here;
  • The last, fourth section will work of the value of {{{Occupation|}}} parameter isn't equal to No. That's why you must repeat the value you've set up, to guarantee the accurate functionality.

There's a similar example, but vice versa. In this code, if you set the parameter value to Yes, the category will get added:

{{#ifeq:{{{Occupation|}}} | Yes | [[Category:Working population]] | }}

Switch

Syntax:
{{#switch: Influential text
| Value 1 = Code 1
| Value 2 = Code 2
| Value 3 | Value 4 = Code 3
...
| #default = Default code}}

This function resembles #ifeq, however the difference is amount of conditions: switches accept all other values as well. It's unnecessary to set a code for every value — you can add several values and the code for them, like it's shown in a syntax example above: Code 3 is used for Value 3 and Value 4.

If there are a few values, #ifeq is enough. Switches are helpful in case when you've got a lot of values. For example, if you want to use a parser function for «Gender» parameter, it's recommended to use #ifeq:

<data source="Gender">
    <label>Gender</label>
    <format>
        {{#ifeq:{{{Gender|}}} | F | [[File:Female.png]] | [[File:Male.png]]}}
    </format>
    <default>Unknown</default>
</data>

This code will paste the Venus symbol if the gender is defined as F (which simplifies the functionality of an infobox), otherwise it will be the Mars symbol.

However, all cases are different. For example, you're improving an infobox on a wiki with 300~ articles, therefore all the values for gender are different; or you don't want to set any restriction to your infobox. As said before, switches can paste the same code for several values. If this reason is enough to use #switch, the following code works:

<data source="Gender">
    <label>Gender</label>
    <format>{{#switch: {{{Пол|}}}
            | F | Female | Girl | Woman = [[File:Female.png]]
            | M | Male | Boy | Man = [[File:Male.png]]
            | #default = Unknown
    }}</format>
    <default>Unknown</default>
</data>

In this example, if any of first four values is used, it will paste the Venus symbol; if any of second four values is, the Mars symbol with be pasted; if another value is written, it will output the «Unknown» text. Note: despite of availability of #default value, if the parameter isn't given any value, this part of infobox won't show up. Therefore, if you need it to appear in any way, add the <default> tag with the same content.

Note: #default value is required! Otherwise it's not certain which code to execute when the value is different.

Other functions

Above are described the most used and suggested parser functions. The list of all other functions and their syntax can be found in MediaWiki documentation.

Wikitext

See more in a help page.

Wikitext is supported by all tags, excluding <image> and <alt>. It can design data in <format> and <default> tags. However, if this design is used in every row, it's recommended to move to CSS.

As explained above, all the parameters have the following form: {{{Parameter}}}. For example, if you need some text to be yellow-colored, you need to write:

<data source="Text">
    <label>Text</label>
    <format><span style="color: yellow;">{{{Text}}}</span></format>
</data>

If the title (by default, not showed without a <default> tag) contains the bold text:

<title source="Title">
    <format>Episode '''{{{Title}}}'''</format>
    <default>Episode '''{{PAGENAME}}'''</default>
</title>

Besides, when using an infobox on a page, you can use wikitext in any parameter, excluding the ones that define the image and the tooltip. The caption doesn't let to dye the text and change the font, i.e. <span> and <div> tags aren't supported.

You can use lists while defining the parameters of rows. However it's recommended to move text to a new line with <br/>. Note: if the wiki has used the lists in infoboxes a lot of times, and you want to improve them removing the dots, you can use list-style-type property in CSS.

After improving the infobox with additional tags, parser functions and some design, you can use it on articles (better to try it on your sandbox) to check how it works.

The result

There is an infobox that's using all the described functions. You can see it below. Here is the code:

<infobox>
    <title source="Title">
        <format>It's {{{Title}}}!</format>
        <default>It's {{PAGENAME}}!</default>
    </title>
    <image source="Image">
        <default>Wiki-wordmark.png</default>
        <caption source="Caption">
            <format>It's {{{Описание}}}</format>
            <default>It's a wiki logotype</default>
        </caption>
        <alt source="Tooltip">
            <default>See this text? :)</default>
        </alt>
    </image>
    <group layout="horizontal" row-items="3" collapse="open">
        <header>A horizontal group</header>
        <data source="Row1"/>
        <data source="Row2"/>
        <data source="Row3"/>
        <data source="Row4" span="2"/>
        <data source="Row5"/>
        <data source="Row6" layout="default">
            <label>Header</label>
            <format>{{{Row6}}} has passed</format>
        </data>
    </group>
    <group layout="horizontal" collapse="open">
        <header>Group without row-items</header>
        <data source="Row7">
            <label>Test</label>
        </data>
        <data source="Row8">
            <label>Test</label>
        </data>
    </group>
    <group collapse="closed">
        <header><span style="color: blue;">A hidden group</span></header>
        <data source="Test">
            <label>Surprise!</label>
        </data>
        <navigation><!--
        -->{{#if:{{{Nav|}}}<!--
        -->|{{{Nav}}}<br/>Here is a template link :) [[Template:InfoboxTest]]|}}<!--
        --></navigation>
    </group>
</infobox>

Note: you could notice arrows in the navigation; those are wikitext comments. They're added to ignore the «empty space between lines» in the code. When you move the code on a new line in <navigation>, <format> and <default> tags, always use this method, otherwise the content will get corrupted. Watch carefully at how comments are used in this example.

Usage

In Source Code

Code of usage in an article:

{{InfoboxTest
|Title = Infobox
|Row1  = Test 1
|Row2  = Test 2
|Row3  = Test 3
|Row4  = Test 4
|Row5  = Test 5
|Row6  = Test 6
|Row7  = Test 7
|Row8  = Test 8
|Test  = <span style="color: gray;">Hehe</span>
|Nav   = Hello!
}}

We've started off writing {{ИнфобоксТест: two curved brackets and the infobox name. Then, we've defined the values of parameters. They're separated by a straight line. In other words, it's used like any another template. Defining the value of Тест parameter, we've dyed it to grey.

Be sure to press any button you've even noticed on this infobox. This way, you'll approach to understand how <alt> tags works and how a collapsed group expands. Be sure to compare the source code and appearance.

In Visual Editor

InfoboxVisualEditor

It's pretty much easier to use Visual Editor, despite its restricted abilities in adding features. Almost all newbies and young users are using Visual Editor, and this section is dedicated to them.

At the beginning, you paste the infobox into your page — Insert > Infobox. In the list, you either find an infobox or type its title. At this moment, you notice a window with parameters. «Wow, do I just need to type the values, an image and that's all?» — sadly no, if you've got additional parameters, such as mentioned outside of source attribute, perhaps, in a parser function or somewhere else.

InfoboxSourceEditor

The path to source editor in VE

You fill all necessary parameters in the window, click on «Apply changes», and then move to source editor, if needed. In Visual Editor, it's placed at the tab above as «Source Editor». Then, you modify the code like in an example above.

However, you might dislike anything in the appearance. Too way simplified? Not fancy enough? Let's go to the next part — designing infoboxes with CSS.

Designing in CSS

If user knows Cascading Style Sheet, they can change the appearance of infoboxes using MediaWiki:Wikia.css (for Wikia skin), MediaWiki:Monobook.css (for monobook skin), MediaWiki:Common.css (for all skins). First you need to figure out what every class does. The source code of a page can definitely help you, but if it's your first time, you could take a look at the list below.

List of classes

We can tell every tag and its attributes affect the CSS of an infobox. Titles of classes are mostly in sync with tag names. You can right-click any element of infobox above, use «Inspect element code» and look up all the properties of every class.

Infobox

Infobox starts off <aside> tag. It contains four or five classes that are described below.

.portable-infobox is a base class of an infobox. By default, contains the following properties:

.portable-infobox {
    background-color: $infobox-background;
    clear: right;
    float: right;
    margin: 0 0 15px 15px;
    width: 270px;
}

$infobox-background is a color that got created by the following formula: 90% mixing the page color and the link color (if a wiki is dark, 85% mixing). This way, the infobox color is different for every wiki.

.pi-background affects the background color, but its alternative is background-color property in the main class. It's your choice whether to use.

If your wiki has got «Europa» theme enabled, .pi-europa is added to infoboxes, thus some properties get affected. These changes caused by enabling this theme are described below.

By default, an infobox has a theme called wikia, so that it contains .pi-theme-wikia class. You can also read about using themes in an appropriate section.

We're aware we can set layout="stacked" attribute in an infobox. If it's not added, it will receive .pi-layout-default class. If it is, this class with get replaced with .pi-layout-stacked. It simply changes the display of data:

.pi-layout-stacked .pi-data {
    display: block;
}
.pi-layout-stacked .pi-data-value {
    padding-left: $infobox-item-margin * 2;
}

In this code, value of $infobox-item-margin is equal to 5 pixels.

Base classes

All the following elements, such as title, image, headers, data rows, get the mutual .pi-item class. Many of them additionally have .pi-item-spacing class that contains only one property by default:

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

Which means that elements with this class by default have 5px padding from bottom and top and 10px padding from right and left sides.

Data elements have .pi-border-color class that defines the color of border between the rows. It has the only border-color property. Its value, as well as the infobox color, is individual for every wiki. By default, it's 10-15% brighter than the infobox color.

Font of values in data rows is affected by mutual .pi-font class that initially has no properties.

Title

Contains just three classes: .pi-item, .pi-item-spacing and .pi-title. The last class is individual for the main header of the infobox. Due to <h2> tag, it takes all the properies set for this tag, except for the bottom border and margins because of the following characteristics:

.portable-infobox .pi-header, .portable-infobox .pi-title {
    border: 0;
    margin: 0;
}
.portable-infobox .pi-title {
    font-size: 18px;
    line-height: 28px;
}
Note: if your wiki has got the CSS that styles header tags, be aware this code might affect infoboxes as well. The solution depends on the situation occurred.
Image

Starts off the <figure> tag with .pi-item, .pi-image classes. The last class simply places the content in the center: text-align: center;.

Note: there goes the image link. If you've added a tooltip, then this link contains the title attribute with the text of a tooltip.

Next goes the pi-image-thumbnail class that affects the appearance of an image in the infobox. Initially, it has no properties, thus is easy to modify.

The caption is built on <figcaption> tag with .pi-item-spacing, .pi-caption classes. The last one is styled the following way:

.pi-caption {
    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    -ms-hyphens: auto;
    hyphens: auto;
    color: $color-alternate-text;
    font-size: 12px;
    font-style: italic;
    text-align: left;
    word-wrap: break-word;
}

$color-alternate-text — цвет описания, который различен для каждой вики. Его получают смешиванием цвета страницы с чёрным цветом на 50%; если вики тёмная — c белым цветом.

Галерея

Если вы добавили галерею в инфобокс, то структура очень сильно поменяется:

  • Классы заменятся на другие (и даже добавятся ещё несколько);
  • Описание не будет отображаться;
  • Всплывающий текст при наведении на изображение заменяется названием вкладки, в которой оно находится.

Вся часть с галереей находится в теге <div> с классом .pi-image-collection. У него нет никаких свойств. Этот элемент состоит из нескольких частей: вкладки и каждое изображение по отдельности. За список вкладок отвечает класс .pi-image-collection-tabs в теге <ul>. У этого класса следующие свойства:

ul.pi-image-collection-tabs {
    list-style: none;
    margin: 0 -1px -1px 0;
    overflow: hidden;
    padding: 0;
    text-align: center;
}

Вкладка в теге <li> имеет классы .pi-tab-link и .pi-item-spacing. Если она на данный момент открыта, то добавляется класс .current. У этой части следующие свойства:

ul.pi-image-collection-tabs li {
    border: 1px solid $infobox-section-header-background;
    box-sizing: border-box;
    cursor: pointer;
    display: inline-block;
    margin: -1px -1px 0 0;
    max-width: 50%;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: bottom;
    white-space: nowrap;
}
ul.pi-image-collection-tabs li.current {
    background: $infobox-section-header-background;
    font-weight: bold;
}

У одного изображения в галерее есть класс .pi-image-collection-tab-content. Если изображение открыто, так же добавляется класс .current. Свойства следующие:

.pi-image-collection-tab-content {
    background-color: $infobox-background;
    display: none;
}
.pi-image-collection-tab-content.current {
    display: inherit;
}

Если вкладка открыта, то значение inherit перекрывает none, и изображение показывается. Закрытые вкладки же не отображаются.

Заголовок и навигация

Здесь вы узнаете про классы .pi-secondary-font и .pi-secondary-background. Они являются общими у заголовков групп и навигации, хотя за них отвечают разные классы.

Как и название, заголовок имеет тег <h2> с классами .pi-item, .pi-header, .pi-secondary-font, .pi-item-spacing и .pi-secondary-background. В случае наличия закрытых групп, добавляется тег .pi-collapse. Если группа закрыта, то pi-collapse-closed; если открыта — pi-collapse-open. При горизонтальном оформлении группы добавится тег .pi-horizontal-group. Если есть атрибут row-items, то вместо этого класса будет .pi-smart-group. Пояснение, зачем нужны некоторые классы:

.pi-header отвечает за заголовки групп. Некоторые его свойства вы могли заметить в разделе о названии. Все его стандартные свойства:

.portable-infobox .pi-header, .portable-infobox .pi-title {
    border: 0;
    margin: 0;
}

На самом деле, заголовок и навигация инфобокса схожи только в двух классах. Один из них — .pi-secondary-font — влияет на стиль текста в этих двух элементах. Другой — .pi-secondary-background, влияющий на цвет фона. Свойства их таковы:

.pi-secondary-background {
    background-color: $infobox-section-header-background;
}
.pi-secondary-font {
    font-size: 12px;
    font-weight: bold;
    line-height: 18px;
    margin-top: 0;
}

За навигацию отдельно отвечает класс .pi-navigation, не имеющий никаких свойств. Однако в самой навигации есть классы .pi-navigation, .pi-item-spacing, .pi-secondary-background и .pi-secondary-font.

Группа

Классы, описанные в этом разделе, работают при наличии отдельных атрибутов в группе.

.pi-collapse добавляет стрелочку в заголовок. Происходит это благодаря следующему коду:

.pi-collapse .pi-header:first-child {
    padding-right: 25px;
    position: relative;
}
.pi-collapse .pi-header:first-child:after {
    display: block;
    margin-top: -3px;
    position: absolute;
    right: 10px;
    top: 50%;
}
.pi-collapse .pi-header:first-child::after {
    border-color: #D5D4D4;
    border-style: solid;
    border-width: 2px 2px 0 0;
    content: '';
    display: inline-block;
    height: 5px;
    right: 0;
    position: relative;
    top: -1px;
    vertical-align: middle;
    width: 5px;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

.pi-collapse-closed добавляет лишь одно свойство: border-bottom: none, убирающее нижнюю рамку. Если закрыта горизонтальная группа, то добавляется код, скрывающий элементы внутри группы:

.pi-collapse-closed .pi-horizontal-group thead,
.pi-collapse-closed .pi-horizontal-group tbody {
    display: none;
}

.pi-horizontal-group вставляется при наличии layout="horizontal" в группе и отсутствии row-items. В такой группе вся строка поровну делится на количество тегов <data> внутри неё. Элемент внутри такой группы имеет класс .pi-horizontal-group-item. В горизонтальной группе действует такое оформление:

.pi-horizontal-group {
    border-spacing: 0;
    table-layout: fixed;
    text-align: center;
    width: 100%;
}
.pi-horizontal-group .pi-header {
    text-align: left;
}
.pi-horizontal-group .pi-horizontal-group-item {
    vertical-align: top;
}
.pi-horizontal-group .pi-horizontal-group-item:not(:first-child) {
    border-left-style: solid;
    border-left-width: 1px;
}
.pi-horizontal-group .pi-data-label {
    padding-bottom: 0;
}

Группы, имеющие атрибут row-items, называются «умными» — так их именуют даже в CSS-коде. Классы в этих группах точно такие же, просто слово horizontal заменено на smart. Значимые отличия в том, что такая группа использует не таблицы, как это делает горизонтальная группа, а тег <section>, как любая обычная группа. Поэтому делится строка с данными непосредственно в HTML, как вы можете заметить.

Также в этой группе добавляются два тега: .pi-smart-group-head, имеющий в себе названия параметров (то, что записывается в <label>), и .pi-smart-group-body со значениями этих параметров. Если вы не используете во всей строке тег <label>, то первый класс исчезнет. Для интереса можете посмотреть в исходном коде элемента.

Таким образом, умная группа имеет следующие свойства:

.pi-smart-group {
    border-bottom-style: solid;
    border-bottom-width: 1px;
    display: flex;
    flex-direction: column;
    text-align: center;
}
.pi-smart-group:last-child {
    border-bottom: 0;
}
.pi-smart-group .pi-smart-data-label {
    padding-bottom: 0;
}
.pi-smart-group .pi-smart-data-label, .pi-smart-group .pi-smart-data-value {
    box-sizing: border-box;
    flex-basis: auto;
    padding: $infobox-item-margin $infobox-item-margin * 2;
}
.pi-smart-group-body {
    display: flex;
}
.pi-smart-group-head {
    display: flex;
}

У обычной группы следующая структура: начинается она с тега <section> с классами .pi-item, .pi-group и .pi-border-color. Класс .pi-group имеет следующие свойства:

.pi-data, .pi-group {
    border-bottom-style: solid;
    border-bottom-width: 1px;
}
.pi-group > .pi-item:last-child {
    border-bottom: 0;
}

Затем идёт тег <div> с классами .pi-item, .pi-data, .pi-item-spacing и .pi-border-color. Среди нового здесь только pi-data, использующийся только в строке с обычных оформлением.

В этот <div> входят два элемента: <h3> с классами .pi-data-label и .pi-secondary-font и <div> с классами .pi-data-value и .pi-font.

Подробнее о классах: .pi-data — это класс для целой строки, .pi-data-label — класс заголовка параметра, а .pi-data-value — класс значения параметра. Стандартные свойства следующие:

.pi-data {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -ms-box-orient: horizontal;
    -webkit-box-orient: horizontal;
    -ms-flex-direction: row;
    -webkit-flex-direction: row;
    flex-direction: row;
    box-sizing: border-box;
    overflow: hidden;
    width: 100%;
}
.pi-data, .pi-group {
    border-bottom-style: solid;
    border-bottom-width: 1px;
}
.pi-data-label {
    -ms-flex-preferred-size: calc($infobox-width / 3);
    -webkit-flex-basis: calc($infobox-width / 3);
    -moz-flex-basis: calc($infobox-width / 3);
    flex-basis: calc($infobox-width / 3);
    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    -ms-hyphens: auto;
    hyphens: auto;
    overflow: hidden;
    word-wrap: break-word;
}
.portable-infobox .pi-data-label {
    margin-bottom: inherit;
    margin-top: 0;
}
.pi-data-value {
    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    -ms-hyphens: auto;
    hyphens: auto;
    font-size: 12px;
    line-height: 18px;
    padding-left: 0;
    word-wrap: break-word;
}
.pi-data-value:not(:first-child) {
    -ms-flex-preferred-size: calc($infobox-width * 2 / 3);
    -webkit-flex-basis: calc($infobox-width * 2 / 3);
    -moz-flex-basis: calc($infobox-width * 2 / 3);
    flex-basis: calc($infobox-width * 2 / 3);
    padding-left: 10px;
}

calc($infobox-width / 3) — одна треть строки; calc($infobox-width * 2 / 3) — две трети. В стандартном случае, заголовок параметра будет занимать 90 пикселей, а его значение — 180 пикселей.

На этом список классов с их свойствами заканчивается. Можно оформлять инфобокс своими классами, используя темы оформления, которые будут описаны ниже.

Changing the design theme

Template:ИнфобоксТема Их можно использовать, если вам хочется, чтобы инфобоксы имели разное оформление, ни в чём не схожие. Или, например, вы хотите иметь общую тему оформления, но множество тем с разной цветовой гаммой.

Например, прямо сейчас мы займёмся оформлением инфобокса из раздела «Использование». Тему назовём example. Нужно, чтобы была красивая рамка, другая ширина, фон-градиент, другой шрифт и т.д. Для начала мы оформляем основной класс инфобокса. Однако, имея дело с темой, за основу мы берём не .portable-infobox, а .pi-theme-example.

Пример темы можно посмотреть здесь, но инфобокс справа использует эту же тему. Написав тему, не забудьте указать её в коде инфобокса атрибутом theme, например: theme="example".

Вот небольшие объяснения некоторых моментов:

  • Почему мы записали .pi-secondary-background, но навигация прозрачная? — Это происходит из-за наличия .pi-navigation с прозрачным фоном.
  • Зачем нужны .pi-theme-example .pi-smart-data-value:not(:first-child), .pi-theme-example .pi-smart-data-label:not(:first-child)? — Для того, чтобы цвет рамки в «умных» группах тоже изменился.
  • Зачем первый тег в .pi-data .pi-data-label? — Вы знаем, что в других группах тоже может использоваться класс .pi-data-label. Целью было изменить ширину этого класса в обычной группе, за которую отвечает класс .pi-data. То же самое будет, если вам захочется изменить оформление .pi-data-value в обычной группе.
  • Зачем font-style: normal; в классе описания? — По умолчанию стилем описания является курсив.
  • Зачем записывать одинаковое свойство/значение несколько раз? — Вероятно, вы говорите про градиент и flex-basis, записанные пять раз. Это сделано с целью адаптации CSS для всех браузеров.

Тему мы написали. Но, допустим, нужно, чтобы при определённом значении какого-то параметра тема оформления менялась. Откройте закрытую группу в инфобоксе и увидите значение параметра «Тест» (название «Сюрприз»). В инфобоксе оно «Хехе». Нужно создать тему оформления для случая, если вместо этого значения стоит «Хихи». Она будет иметь другую цветовую гамму.

Вот код для инфобокса чуточку ниже:

.pi-theme-example.pi-theme-Хихи {
    border: 2px dotted #4C677A;
    border-radius: 0;
    background-image: -webkit-linear-gradient(top, rgba(21, 43, 59, 0.75) 0%, rgba(76, 103, 122, 0.75) 100%);
    background-image: -moz-linear-gradient(top, rgba(21, 43, 59, 0.75) 0%, rgba(76, 103, 122, 0.75) 100%);
    background-image: -ms-linear-gradient(top, rgba(21, 43, 59, 0.75) 0%, rgba(76, 103, 122, 0.75) 100%);
    background-image: -o-linear-gradient(top, rgba(21, 43, 59, 0.75) 0%, rgba(76, 103, 122, 0.75) 100%);
    background-image: linear-gradient(to top, rgba(21, 43, 59, 0.75) 0%, rgba(76, 103, 122, 0.75) 100%);
}
.pi-theme-example.pi-theme-Хихи .pi-title {
    border-top-right-radius: 0;
    border-top-left-radius: 0;
    background-color: #0A2336;
    border-top: 2px dotted #141B40;
}
.pi-theme-example.pi-theme-Хихи .pi-secondary-background {
    background-color: #0A2336;
}
.pi-theme-example.pi-theme-Хихи .pi-border-color,
.pi-theme-example.pi-theme-Хихи .pi-smart-data-value:not(:first-child),
.pi-theme-example.pi-theme-Хихи .pi-smart-data-label:not(:first-child) {
    border-color: #4C677A;
}
.pi-theme-example.pi-theme-Хихи .pi-navigation {
    background: transparent;
}

Template:ИнфобоксТема Важный момент о написании классов: если в под-теме вы хотите придать некоторым свойствам другие значения, пишите классы темы слитно, как выше: .pi-theme-example.pi-theme-Хихи. Например, если бы в теме «example» не было рамки, а в под-теме она добавлялась, то можно записать этот код следующим образом:

.pi-theme-example .pi-theme-Хихи {
    border: 1px solid white;
}

Мы указали другой цвет фон заголовков. Если мы не запишем, что навигация прозрачная, то она из-за общего класса возьмёт тот же самый цвет фона. Поэтому, пользуясь общими классами, при необходимости нужно конкретизировать, что делать с некоторыми элементами.

Примечание: можно использовать под-тему без основной темы, но тогда нужно будет вместо .pi-theme-example.pi-theme-Хихи записывать .pi-theme-Хихи.

Чтобы под-тема работала, не забудьте добавить атрибут theme-source с влияющим параметром (в данном случае — theme-source="Тест") и указать верное значение.

«Europa» theme for infoboxes

По умолчанию в функциях вики (страница WikiFeatures, доступная только администраторам) включена тема инфобоксов «Europa». Она сильно меняет некоторые части оформления, так как добавляет класс .pi-europa.

Работа с этой темой

К сожалению, если администратор подключает тему «Europa» на своей вики, ему помимо изменения CSS придётся заменить некоторые классы, иначе тема не будет работать.

Вот изначальный код:

.pi-theme-example.pi-theme-Хихи {
    border: 2px dotted #4C677A;
    border-radius: 0;
    background-image: -webkit-linear-gradient(top, rgba(21, 43, 59, 0.75) 0%, rgba(76, 103, 122, 0.75) 100%);
    background-image: -moz-linear-gradient(top, rgba(21, 43, 59, 0.75) 0%, rgba(76, 103, 122, 0.75) 100%);
    background-image: -ms-linear-gradient(top, rgba(21, 43, 59, 0.75) 0%, rgba(76, 103, 122, 0.75) 100%);
    background-image: -o-linear-gradient(top, rgba(21, 43, 59, 0.75) 0%, rgba(76, 103, 122, 0.75) 100%);
    background-image: linear-gradient(to top, rgba(21, 43, 59, 0.75) 0%, rgba(76, 103, 122, 0.75) 100%);
}
.portable-infobox .pi-data-label {
    margin-bottom: inherit;
    margin-top: 0;
}
.pi-data-value
    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    -ms-hyphens: auto;
    hyphens: auto;
    font-size: 12px;
    line-height: 18px;
    padding-left: 0;
    word-wrap: break-word;
}
.pi-theme-games {
    width: 300px;
}

Который при подключении темы «Europa» должен заменяться на этот:

.portable-infobox.pi-europa.pi-theme-example.pi-theme-Хихи {
    border: 2px dotted #4C677A;
    border-radius: 0;
    background-image: -webkit-linear-gradient(top, rgba(21, 43, 59, 0.75) 0%, rgba(76, 103, 122, 0.75) 100%);
    background-image: -moz-linear-gradient(top, rgba(21, 43, 59, 0.75) 0%, rgba(76, 103, 122, 0.75) 100%);
    background-image: -ms-linear-gradient(top, rgba(21, 43, 59, 0.75) 0%, rgba(76, 103, 122, 0.75) 100%);
    background-image: -o-linear-gradient(top, rgba(21, 43, 59, 0.75) 0%, rgba(76, 103, 122, 0.75) 100%);
    background-image: linear-gradient(to top, rgba(21, 43, 59, 0.75) 0%, rgba(76, 103, 122, 0.75) 100%);
}
.portable-infobox.pi-europa .pi-data-label {
    margin-bottom: inherit;
    margin-top: 0;
}
.portable-infobox.pi-europa .pi-data-value
    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    -ms-hyphens: auto;
    hyphens: auto;
    font-size: 12px;
    line-height: 18px;
    padding-left: 0;
    word-wrap: break-word;
}
.portable-infobox.pi-europa .pi-theme-games {
    width: 300px;
}

В начале всегда должен стоять класс .portable-infobox.pi-europa. Хотя именно из-за этого многие рекомендуют использовать обычную тему инфобоксов.