Центральна спільнота
Advertisement
Центральна спільнота

Для створення унікального стилю інфобоксів необхідно використовувати 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-location .pi-background {
    background-color: #CF3D0C;
}

Параметр theme[]

Цей параметр задає користувальницький стиль для усього інфобоксу. Щоб задати свій стиль інфобоксу (наприклад, назвемо стиль lake), розмістить на сторінці Спеціальна:CSS і на сторінці інфобоксу наступний код:

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

Параметр 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].

Advertisement