Для создания уникального стиля инфобоксов необходимо использовать CSS, доступ к которому можно получить через страницу MediaWiki:Fandomdesktop.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), разместите на странице MediaWiki:Fandomdesktop.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
Вспомогательные классы для 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-data-label {
min-width: 150px;
}
|
Задаёт ширину ячеек для названий полей равной 150рх |
.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 {
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].