Ohje:Tietolaatikot/CSS

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