Модульный инфобокс

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

*Основная статья: Мануал по Модулькам на Эскадре*
*Для применения css кода к инфобоксам, используйте **PortableCSSPad***

## Горизонтальная группа с row

Тест 1
Тест 2
Тест 3

Тест 4
Тест 5

## Скрытая группа серым текстом

### Строка10

Тест 10

**Возможные параметры:**

```
<infobox theme="Char" theme-source="Стиль" layout="stacked">

<group row-items="3" collapse="open">

<data source="Строка4" span="2"/>

<data source="Строка6" layout="default">

```

Также ниже приведённая часть добавляет к инфобоксу футер с быстрыми ссылками на шаблон. Для его работы нужно добавить в Common.css / Wikia.css следующую строку

```
@import "http://dev.wikia.com/index.php?title=FontAwesome/code.css&action=raw&ctype=text/css";

```

```
<navigation><div align="right">[[Шаблон:Модульный инфобокс|<span class="fa fa-search" title="Просмотр шаблона" style="font-size: 12px; color: white"></span>]] [{{fullurl:Шаблон:Модульный инфобокс|action=edit}} <span class="fa fa-cog" title="Редактирование шаблона" style="font-size: 12px; color: white"></span>]</div></navigation>

```

### Использование

Для вставки шаблона в статью, используйте код ниже:

```
{{Модульный инфобокс

}}

```

### Кол шаблона

```
<infobox theme="" theme-source="" layout="">
 <title source="Название">
 <format>Это {{{Название}}}!</format>
 <default>Это {{PAGENAME}}!</default>
 </title>
 <image source="Изображение">
 <default>Wiki-wordmark.png</default>
 <caption source="Описание">
 <format>Это {{{Описание}}}</format>
 <default>Это логотип вики</default>
 </caption>
 <alt source="Всплывающий">
 <default>Это всё ещё логотип вики</default>
 </alt>
 </image>
 <data source="Строка01"><label>Строка01</label></data>
 <data source="Строка02"><label>Строка02</label></data>
 <data source="Строка03"><label>Строка03</label></data>
 <data source="Строка04"><label>Строка04</label></data>
 <group row-items="3" collapse="open">
 <header>Горизонтальная группа с row</header>
 <data source="Строка1"/>
 <data source="Строка2"/>
 <data source="Строка3"/>
 <data source="Строка4" span="2"/>
 <data source="Строка5"/>
 <data source="Строка6" layout="default">
 <label>Строка без row</label><format>{{{Строка6}}} пройден</format>
 </data>
 </group>
 <group layout="horizontal">
 <header>Навигация</header>
 <data source="Строка1\_1"/>
 <data source="Строка2\_2"/>
 </group>
 <group collapse="closed">
 <header><span style="color: gray;">Скрытая группа серым текстом</span></header>
 <data source="Тест"><label>Хола</label></data>
 </group>
 <group>
 <data source="Строка7"><label>Строка7</label></data>
 <data source="Строка8"><label>Строка8</label></data>
 <data source="Строка9"><label>Строка9</label></data>
 <data source="Строка10"><label>Строка10</label></data>
 </group>
 <navigation><div align="right">[[Шаблон:Модульный инфобокс|<span class="fa fa-search" title="Просмотр шаблона" style="font-size: 12px; color: white"></span>]]&nbsp;[{{fullurl:Шаблон:Модульный инфобокс|action=edit}} <span class="fa fa-cog" title="Редактирование шаблона" style="font-size: 12px; color: white"></span>]</div></navigation>
</infobox>

```

### CSS

```
/\* Основные параметры для всего инфобокса \*/
.portable-infobox {
 border: 2px solid gray;ц
 box-shadow: 0 0 15px rgb(200, 247, 254);
 border-radius: 10px;
 padding: 3px; /\* отступы внутри\*/
 margin: 15px 5px 0px 15px; /\* отступы вокруг \*/
 background: transparent; /\* прозрачный фон \*/
}
/\* Рамка изображения \*/
.pi-image {
 border: 1px solid gray;
 margin-top: 2px;
 margin-bottom: 2px;
}
/\* Само изображение \*/
.pi-image-thumbnail {
 width: 100%;
 height: auto;
}
/\* Основной заголовок \*/
.portable-infobox .pi-title {
 text-align: center;
 padding: 5px;
 background: #012e56;
 color: #fff;
 font-size: 20px;
 border-radius: 8px 8px 0 0; /\* выборочное скругление \*/
 text-shadow: 0 0 10px black;
}
/\* Второстепенные заголовки + navigation \*/
.portable-infobox .pi-secondary-background {
 text-align: center;
 background: #839db3;
 padding: 25px;
 color: #000;
 font-size: 12px;
 text-shadow: 0 0 10px white;
 margin-top: 2px;
 margin-bottom: 2px;
}
.portable-infobox .pi-group .pi-header {
 padding: 5px;
}
/\* Обнуление всех отступов \*/
.portable-infobox .pi-item-spacing {
 padding: 0px;
 /\* или \*/
 padding-left: 0px;
 padding-right: 0px;
 padding-top: 0px;
 padding-bottom: 0px;
}
/\* Заголовки строк \*/
.pi-data-label {
 flex-basis: 120px;
 padding: 4px 0px 4px 10px;
 background: #3f5266;
}
/\* ":" ко всем label \*/
.pi-data-label:after {
 content: ':';
}
/\* Содержание строк \*/
.pi-data-value {
 background: #34343e;
 padding: 4px 0px 4px 10px;
}
/\* navigation отдельно \*/
.portable-infobox .pi-navigation {
 background: #012e56;
 border-radius: 0 0 8px 8px;
 text-shadow: 0 0 10px black;
 padding: 4px;
 margin-bottom: 0px;
}

/\* ----- выпиливание нижнего и изменение левого бордера ----- \*/
.portable-infobox .pi-border-color {
 border: none;
}
.portable-infobox .pi-data:not(:last-of-type) {
 border-bottom: 1px solid gray;
}
/\* --- smart-group --- \*/
.portable-infobox .pi-smart-group {
 border-bottom: 1px solid gray;
}
.portable-infobox .pi-smart-group .pi-smart-data-value:not(:first-child) {
 border-left: 1px solid gray;
}
/\* --- horizontal-group --- \*/
.portable-infobox .pi-horizontal-group .pi-horizontal-group-item:not(:first-child) {
 border-left: 1px solid gray;
}

```

## Медиа

#### Использование

Для вставки шаблона в статью, используйте код ниже:

```
{{Персонаж

}}

```

#### Код шаблона

```
<infobox>
 <title source="Имя">
 <format>Это {{{Имя}}}!</format>
 <default>Это {{PAGENAME}}!</default>
 </title>
 <image source="Изображение">
 <default>Wiki-wordmark.png</default>
 <caption source="Описание">
 <format>Это {{{Описание}}}</format>
 <default>Это логотип вики</default>
 </caption>
 <alt source="Всплывающий">
 <default>Это всё ещё логотип вики</default>
 </alt>
 </image>
 <data source="Кандзи"><label>Кандзи</label></data>
 <data source="Ромадзи"><label>Ромадзи</label></data>
 <data source="Прозвище"><label>Прозвище</label></data>
 <group collapse="closed">
 <header>Профиль</header>
 <data source="Рождение"><label>Дата рождения</label></data>
 <data source="Возраст"><label>Возраст</label></data>
 <data source="Пол"><label>Пол</label></data>
 <data source="Национальность"><label>Национальность</label></data>
 <data source="Волосы"><label>Цвет волос</label></data>
 <data source="Глаза"><label>Цвет глаз</label></data>
 <data source="Рост"><label>Рост</label></data>
 <data source="Вес"><label>Вес</label></data>
 </group>
 <group collapse="closed">
 <header>Прочее</header>
 <data source="Отношения"><label>Отношения</label></data>
 <data source="Смерть"><label>Дата смерти</label></data>
 </group>
 <group>
 <header>Медиа</header>
 <data source="Манга"><label>Манга</label></data>
 <data source="Аниме"><label>Аниме</label></data>
 <data source="Игра"><label>Игра</label></data>
 <data source="Фильм"><label>Фильм</label></data>
 <data source="Сэйю"><label>Сэйю</label></data>
 </group>
 <navigation><div align="right" class="names">[[Шаблон:Персонаж|<span class="fa fa-search" title="Просмотр шаблона" style="font-size: 12px; color: white"></span>]]&nbsp;[{{fullurl:Шаблон:Персонаж|action=edit}} <span class="fa fa-cog" title="Редактирование шаблона" style="font-size: 12px; color: white"></span>]</div></navigation>
</infobox>

```

Возможен вариант с автоподстановкой уже залитых изображений для персонажей с определённым названием файла `Файл:имя_перс_нарус Манга/Аниме.jpg/png`.

```
 </image>

```

## Информация об эпизоде

#### Использование

Для вставки шаблона в статью, используйте код ниже:

```
{{Эпизод

}}

```

#### Код шаблона

```
<infobox>
 <title source="Название">
 <format>Это {{{Название}}}!</format>
 <default>Это {{PAGENAME}}!</default>
 </title>
 <image source="Изображение">
 <default>Wiki-wordmark.png</default>
 <caption source="Описание">
 <format>Это {{{Описание}}}</format>
 <default>Это логотип вики</default>
 </caption>
 <alt source="Всплывающий">
 <default>Это всё ещё логотип вики</default>
 </alt>
 </image>
 <group>
 <header>Информация об эпизоде</header>
 <data source="Кандзи"><label>Кандзи</label></data>
 <data source="Ромадзи"><label>Ромадзи</label></data>
 <data source="Премьера"><label>Премьера</label></data>
 <data source="Главы"><label>Главы манги</label></data>
 <group layout="horizontal">
 <data source="OP"><label>Опенинг:</label></data>
 <data source="ED"><label>Эндинг:</label></data>
 </group>
 </group>
 <group layout="horizontal">
 <header>Хронология</header>
 </group>
 <navigation><div align="right" class="names">[[Шаблон:Эпизод|<span class="fa fa-search" title="Просмотр шаблона" style="font-size: 12px; color: white"></span>]]&nbsp;[{{fullurl:Шаблон:Эпизод|action=edit}} <span class="fa fa-cog" title="Редактирование шаблона" style="font-size: 12px; color: white"></span>]</div></navigation>
</infobox>

```

Возможен вариант с автоподстановкой уже залитых изображений для эпизодов/глав с определённым названием файла `Файл:Episode №.jpg/png`. Также при условии, что сами страницы эпизодов будут называться соответствующе `Эпизод №`.

```
 <image source="Картинка">
 <alt source="Подпись"><default>{{PAGENAME}}</default></alt>
 </image>

```

Также возможен вариант с автонавигацией. Также при условии, что сами страницы эпизодов будут называться соответствующе `Эпизод №`.

```

```