Kannettavien tietolaatikoiden teema on helposti paikallisten ylläpitjäien muokattavissa käyttämällä wikian yhteisön CSS:ää.
Ilman mukautuksia, kannettavan tietolaatikon teema ottaa oppia vaikutteita teemansuunnittelijan asetuksista, erityisesti artikkelin taustaväristä ja linkkien väristä.
Tietolaatikon teemat[]
Tietolaatikon oletusteemaa on helposti ylikirjoitettavissa yhteisön paikallisen CSS:n kautta, attribuuttien theme ja theme-source käyttäminen infobox-tunnisteen sisällä helpottaa tiettyihin luokkia käyttäiviin tietolaatikkomallineisiin kohdistumista.
- Attributtia theme käytetään määrittämään mukautettu CSS-luokka tietolaatikkomallineelle.
- Attribuutti theme-source sallii sinun vaihtaa CSS-luokan mallineparametrin kautta.
Attribuutin "theme" käyttö[]
Esimerkiksi, theme="delta" lisää tietolaatikon HTML-kodiin luokan nimeltä pi-theme-delta, jota voidaan mukauttaa CSS:n avulla:
| Mallinekoodi |
<infobox theme="delta">
...
</infobox>
|
|---|---|
| Käytettävä CSS |
.portable-infobox.pi-theme-delta {
...
}
|
Esimerkiksi, alla olevaa koodia voi sen jälkeen käyttää muuttamaan toissijaisen taustavärin punaiseksi:
.portable-infobox.pi-theme-delta .pi-secondary-background {
background-color: #CF3D0C;
}
Attribuutin "theme-source" käyttö[]
Esimerkiksi, theme-source="location" tarkoittaa, että kun sijainti (location) on määritelty artikkelin tietolaatikossa, se käyttää arvoaan luokkana.
Esimerkiksi:
| Mallinekoodi |
<infobox theme-source="location">
...
</infobox>
|
|---|---|
| Koodi artikkelissa |
{{Example infobox
|location = africa
}}
|
| Käytettävä CSS |
.portable-infobox.pi-theme-africa {
...
}
|
Jos haluat kohdistaa tietyt elementit kyseisen tietolaatikon sisällä, sinun olisi tehtävä jotain tällaista:
.portable-infobox.pi-theme-africa .pi-secondary-background {
//custom styles
}
Edistyneet huomautukset teemoista[]
- Jos sekä theme että theme-source ovat käytössä, attribuutti theme on oletuksellinen (silloin attribuuttia theme-source ei määritellä).
- Välilyönnit arvoissa theme ja theme-source muutetaan väliviivoiksi (
-), tarkoittaen, että vain yksi luokka voidaan lisätä. - Jos teemaa ei ole määritelty, .pi-theme-wikia on käytössä sen sijasta.
Pääluokat[]
Nämä luokat auttavat sinua päivittämää tiettyjen tunnisteiden tyylin:
- Otsikko
.pi-title- Ylätunniste
.pi-header- Navigaatio
.pi-navigation- Ryhmät
.pi-group- Tietotunniste
.pi-data- Tietoarvo
.pi-data-value- Tietonimike
.pi-data-label- Kuva
.pi-image- Kuvatunnisteet
.pi-image-collection-tabs
Auttajaluokat[]
Kannettavat tietolaatikot sisältävät valikoiman suunnittelukohtaisia auttajaluokkia auttamaan sinua helposti päivittämään yleisen tyylimuotoilun:
.pi-background- yleinen tietolaatikon tausta
.pi-secondary-background- otsikko ja navigointitaustat
.pi-font- tietoarvon fontin tyyli
.pi-secondary-font- otsikko, kuvateksti ja navigointifonttityylit
.pi-item-spacing- täytteet jokaisen tietolaatikon elementin ympärillä
.pi-border-color- tietolaatikon elementin rajausvärit
Huomautus: tämä ei ole kattava lista kaikista luokista - lisää on lueteltuna sivulla Ohje:Tietolaatikot/Tunnisteet.
Näyteitä koodinpätkistä[]
Tietolaatikon leveyden muuttaminen:
.portable-infobox {
width: 300px;
}
TIetolaatikon taustavärin muuttaminen:
.portable-infobox.pi-background {
background-color: #ff0000;
}
Tietolaatikon otsikoiden ja navigointitaustojen muuttaminen:
.portable-infobox .pi-secondary-background {
background-color: #00ff00;
}
Tietolaatikon elementtien rajausvärin muuttaminen:
.portable-infobox .pi-border-color {
border-color: #00ff00;
}
Tietolaatikon elementtien täytteiden muuttaminen:
.portable-infobox .pi-item-spacing {
padding: 10px 20px;
}
¨Tietolaatikon tietoarvon fonttikoon muuttaminen:
.portable-infobox .pi-font {
font-size: 16px;
}
TIetolaatikon otsikoiden, etikettien ja navigointiarvojen fonttikoon muuttaminen:
.portable-infobox .pi-secondary-font {
font-size: 18px;
}
Tietolaatikon pääotsikon fonttikoon muuttaminen:
.portable-infobox .pi-title {
font-size: 24px;
}
Kentän palstaleveyden muuttaminen:
.portable-infobox .pi-data-label {
flex-basis: 165px;
}
Valitse palstan mukautetuksi teemaksi "oblivion", ja säädä sitten kuvatekstin fonttikokoa:
.portable-infobox.pi-theme-oblivion .pi-caption {
font-size: 16px;
}
Muuta tunnisteiden taustaväri kuvien avulla
.pi-image-collection-tabs li {
background-color: green;
}
Edistyneille[]
Normaalisti, jos sinun tarvitsee muuttaa tietyn teeman tyyliä, sinun olisi kirjoitettava jotain tällaista:
.portable-infobox.pi-theme-name .pi-secondary-background {
background-color:#334;
}
Kuitenkin, kun CSS-luokka on samassa elementissä kuin toinen ja sinun tarvitsee valita molemmat, älä jätä luokkien väliin ainuttakaan välilyöntiä. Esimerkiksi, .pi-background on samassa <aside>-elementissä kuin teema (.pi-theme-name) ja yleinen kannettava tietolaatikkoluokka (.portable-infobox), joten CSS-koodi, joka muutta taustan tälle teemalle, olisi:
.portable-infobox.pi-theme-name.pi-background {
background-color:#334;
}