Супольнасці Wikia
Advertisement
Супольнасці Wikia

Для стварэння унікальнага стылю інфобоксов неабходна выкарыстоўваць CSS, доступ да якога можна атрымаць праз старонку Адмысловае:CSS.

Агульны стыль[]

Стыль для ўсяго інфобокса можна задаць, выкарыстоўваючы параметры тэму і/або theme-source. Яны размяшчаюцца ў верхнім тэгу <infobox>.

Параметр theme[]

Гэты параметр задае карыстацкі стыль для інфобокса. Па змаўчанні ен задае стыль "Wikia", які адпавядае кветкам вашай вікі, настроеным праз Канструктар тым.

Каб задаць свой стыль інфобокса размесціце на старонцы Адмысловае:CSS наступны код:

.pi-theme-mystyle {
// параметры стылю 
}

Напрыклад, каб афарбаваць інфобокс ў чырвоны колер, выкарыстоўвайце код:

.pi-theme-mystyle {
background-color: #CF3D0C;
}

Затым вам трэба прапісаць у кодзе інфобокса назву свайго стылю з параметрам theme:

<infobox theme="mystyle">
// змесціва інфобокса
</infobox>

Параметр theme-source[]

Гэты параметр дазваляе задаць стыль шаблону ў залежнасці ад зменнай у канкрэтнай радку. Напрыклад, калі вы хочаце, каб колер інфобокса мяняўся ад статусу персанажа, размесціце ў CSS наступны код:

.pi-theme-мертвы {
background-color: #CF3D0C;
}

Затым у кодзе інфобокса прапісваем параметр theme-source з указаннем зменнай, ад якой будзе залежаць стыль інфобокса:

<infobox theme-source="статус">
// змесціва інфобокса
 <data source="статус"><label>Статус персанажа</label></data>
</infobox>

У выніку, інфобокс афарбуецца да чырвоны, калі вы ў тэксце артыкула пакажыце наступнае:

{{Пэрсанаж
|статус = мертвы
}}

Дапаможныя стылі[]

Гэтыя стылі можна выкарыстоўваць, каб памяняць адзін або некалькі элементаў інфобокса без заданні агульнага стылю:

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

Стылі, якія адносяцца да кожнага тэгу модульных інфобоксов, можна паглядзець на старонцы Даведка:Інфабокс/тэгі. Націсніце кнопку "разгарнуць" каля патрэбнага вам тэга, і вы ўбачыце HTML код са спісам стыляў.

Простыя прыклады[]

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

Код Апісанне
.portable-infobox {
width: 300px;
}
Задае шырыню інфобокса роўнай 300рх
.pi-background {
background-color: #ff0000;
}
Змяняе фонавы колер інфобокса
.pi-secondary-background {
background-color: #00ff00;
}
Змяняе колер загалоўкаў ўнутры інфобокса
.portable-infobox {
 border-color: #00ff00;
}
Змяняе колер рамкі інфобокса
.pi-item-spacing {
padding-top: 10px;
padding-right: 20px;
padding-bottom: 10px;
padding-left: 20px;
}
Дадае водступы унутраным элементам інфобокса
.pi-font {
font-size: 16px;
}
Змяняе памер шрыфта інфобокса
.pi-secondary-font {
font-size: 18px;
}
Змяняе памер шрыфта ўнутраных загалоўкаў і радкоў інфобокса
.pi-title {
font-size: 24px;
}
Змяняе памер шрыфта загалоўка за ўсе інфобокса
.pi-theme-mystyle .pi-secondary-background {
background-color:#334;
}
Змяняе колер загалоўкаў, калі зададзены стыль theme="mystyle"
.pi-theme-mystyle .pi-caption {
font-size: 16px;
}
Змяняе шрыфт апісання малюнка, калі зададзены стыль theme="mystyle"
.pi-image-thumbnail {
width: 100%;
height: 100%;
}
Выява будзе займаць усе адведзенае яму прастору

Яшчэ прыклады[]

На некаторых вікіпраектах модульныя інфабокс ўжо працуюць. Вы можаце выкарыстоўваць CSS з гэтых вікіпраектаў у якасці асновы для ўласных інфобоксов:

Катэгорыя:Даведка

Advertisement