FANDOM


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 teematMuokkaa

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öMuokkaa

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öMuokkaa

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 teemoistaMuokkaa

  • 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ääluokatMuokkaa

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

AuttajaluokatMuokkaa

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äMuokkaa

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;
}

EdistyneilleMuokkaa

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;
}
Community content is available under CC-BY-SA unless otherwise noted.