ФЭНДОМ


Для создания уникального стиля инфобоксов необходимо использовать 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 , если не указано иное.

Fandom may earn an affiliate commission on sales made from links on this page.

Stream the best stories.

Fandom may earn an affiliate commission on sales made from links on this page.

Get Disney+