ФЭНДОМ


Для создания уникального стиля инфобоксов необходимо использовать CSS, доступ к которому можно получить через страницу Служебная:CSS.

Без CSS инфобоксы вашей вики будут окрашены в цвета вики, выбранные через Конструктор тем.

Общий стиль

Стиль для всего инфобокса можно задать, используя параметры type, theme и theme-source. Они размещаются в верхнем теге <infobox>.

Параметр type

Параметр type задаёт логический тип инфобокса и может также использоваться в CSS. Например, задав type="character", можно будет в CSS прописывать стиль для инфобокса как type-character:

Код инфобокса
<infobox type="character">
  ...
</infobox>
Код CSS
.portable-infobox.type-character {
   ...
}

Например, этот код позволит окрасить инфобокс для персонажей в красный цвет:

.portable-infobox.type-character .pi-background {
    background-color: #CF3D0C;
}

Параметр theme

Этот параметр задаёт пользовательский стиль для всего инфобокса. Чтобы задать свой стиль инфобокса (например, назовём стиль water), разместите на странице Служебная:CSS и на странице инфобокса следующий код:

Код инфобокса
<infobox theme="water">
  ...
</infobox>
Код CSS
.portable-infobox.pi-theme-water {
   ...
}

Параметр theme-source

Этот параметр позволяет задать стиль шаблона в зависимости от переменной в конкретной строке. Например, если вы хотите, чтобы цвет инфобокса менялся от статуса персонажа, разместите в CSS и на странице инфобокса следующий код:

Код инфобокса
<infobox theme-source="статус">
  // содержимое инфобокса
 <data source="статус"><label>Статус персонажа</label></data>
</infobox>
Код CSS
.portable-infobox.pi-theme-мёртв {
    background-color: red;
}

В результате, инфобокс окрасится в красный, когда вы в тексте статьи укажете следующее:

{{Персонаж
 |статус = мёртв
}}

Основные классы для CSS

Эти классы используются в CSS для тегов инфобокса:

Title
.pi-title
Header
.pi-header
Navigation
.pi-navigation
Groups
.pi-group
Data tag
.pi-data
Data Value
.pi-data-value
Data Label
.pi-data-label
Image
.pi-image
Image Tabs
.pi-image-collection-tabs

Вспомогательные классы для CSS

Эти стили можно использовать, чтобы поменять один или несколько элементов инфобокса без задания общего стиля:

.pi-background
меняет фоновый цвет
.pi-secondary-background
меняет фоновый цвет заголовков
.pi-font
меняет основной шрифт
.pi-secondary-font
меняет шрифт заголовков и строк
.pi-item-spacing
создаёт отступы вокруг всех элементов инфобокса
.pi-border-color
изменяет цвет линий в инфобоксе

Стили, которые относятся к каждому тегу модульных инфобоксов, можно посмотреть на странице Справка:Инфобоксы/теги. Нажмите «развернуть» возле нужного вам тега, и вы увидите HTML-код со списком стилей.

Простые примеры

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

Код Описание
.portable-infobox {
   width: 300px;
}
Задаёт ширину инфобокса равной 300рх
.portable-infobox.pi-background {
   background-color: #ff0000;
}
Изменяет фоновый цвет инфобокса
.portable-infobox .pi-secondary-background {
   background-color: #00ff00;
}
Изменяет цвет заголовков внутри инфобокса
.portable-infobox .pi-border-color {
   border-color: #00ff00;
}
Изменяет цвет рамки инфобокса
.portable-infobox .pi-item-spacing {
   padding: 10px 20px;
}
Добавляет отступы внутренним элементам инфобокса
.portable-infobox .pi-font {
    font-size: 16px;
}
Изменяет размер шрифта инфобокса
.portable-infobox .pi-secondary-font {
    font-size: 18px;
}
Изменяет размер шрифта внутренних заголовков и строк инфобокса
.portable-infobox .pi-title {
    font-size: 24px;
}
Изменяет размер шрифта заголовка инфобокса
.portable-infobox.pi-theme-mystyle .pi-secondary-background {
   background-color:#334;
}
Изменяет цвет заголовков, если задан стиль theme="mystyle"
.portable-infobox.pi-theme-mystyle .pi-caption {
   font-size: 16px;
}
Изменяет шрифт описания изображения, если задан стиль theme="mystyle"
.portable-infobox.pi-image-thumbnail {
   width: 100%;
   height: 100%;
}
Изображение будет занимать всё отведённое ему пространство
.portable-infobox.pi-image-collection-tab-content {
    background-color: transparent;
}
Прозрачный цвет (или любой другой) за картинкой в инфобоксе

Расширенные параметры

Все элементы инфобокса имеют атрибут source, который работает в HTML с параметром data-attribute, таким как data-source="ATK". Это позволяет прописать его в CSS или JS как .pi-item[data-source=ATK], чтобы задать ему определённый стиль. В комбинации с type это даёт возможность отказаться от выбора стиля типа nth-of-type и открывает дополнительные возможности для стилизации инфобоксов.

Эти параметры позволяют указывать любые элементы инфобокса, вне зависимости от того, принимают ли они входящий параметр или нет, включая атрибуты для <title>, <group>, <data>, <header>, <image> и <navigation>. Как и в случае data-source, можно использовать <data name="bar">, чтобы указать конкретный элемент инфобокса .pi-item[data-item-name=bar].

Материалы сообщества доступны в соответствии с условиями лицензии CC-BY-SA , если не указано иное.