Muokataan sivua Ohje:Tietolaatikot/CSS

'''[[Ohje:Tietolaatikot|Kannettavien tietolaatikoiden]]''' teema on helposti paikallisten ylläpitjäien muokattavissa käyttämällä wikian '''[[Ohje:Yhteisön_CSS_ja_JavaScript#CSS|yhteisön CSS:ää]]'''.

Ilman mukautuksia, kannettavan tietolaatikon teema ottaa oppia vaikutteita [[Ohje:Teemansuunnittelija|teemansuunnittelijan asetuksista]], erityisesti artikkelin taustaväristä ja linkkien väristä.

==Tietolaatikon teemat==
Tietolaatikon oletusteemaa on helposti ylikirjoitettavissa [[Ohje:Yhteisön CSS ja JavaScript|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.

<div style="margin-top:2em;"> </div>
===Attribuutin "theme" käyttö===
Esimerkiksi, '''theme="delta"''' lisää tietolaatikon HTML-kodiin luokan nimeltä '''pi-theme-delta''', jota voidaan mukauttaa CSS:n avulla:

{| class="article-table" style="width:100%;"
|-
! Mallinekoodi
|
<syntaxhighlight lang="xml" style="margin:1em 0 1em 1em;">
<infobox theme="delta">
  ...
</infobox>
</syntaxhighlight>
|-
! Käytettävä CSS
|
<syntaxhighlight lang="css" style="margin:1em 0 1em 1em;">
.portable-infobox.pi-theme-delta {
   ...
}</syntaxhighlight>
|}

Esimerkiksi, alla olevaa koodia voi sen jälkeen käyttää muuttamaan toissijaisen taustavärin punaiseksi:

<syntaxhighlight lang="css" style="margin:1em 0 1em 1em;">
.portable-infobox.pi-theme-delta .pi-secondary-background {
    background-color: #CF3D0C;
}
</syntaxhighlight>

<div style="margin-top:2em;"> </div>
===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:

{| class="article-table" style="width:100%;"
|-
! Mallinekoodi
|
<syntaxhighlight lang="xml" style="margin:1em 0 1em 1em;">
<infobox theme-source="location">
   ...
</infobox>
</syntaxhighlight>
|-
! Koodi artikkelissa
|
<syntaxhighlight lang="xml" style="margin:1em 0 1em 1em;">
{{Example infobox
 |location = africa
}}</syntaxhighlight>
|-
! Käytettävä CSS
|
<syntaxhighlight lang="css" style="margin:1em 0 1em 1em;">
.portable-infobox.pi-theme-africa {
   ...
}
</syntaxhighlight>
|}

Jos haluat kohdistaa tietyt elementit kyseisen tietolaatikon sisällä, sinun olisi tehtävä jotain tällaista:

<syntaxhighlight lang="css" style="margin:1em 0 1em 1em;">
.portable-infobox.pi-theme-africa .pi-secondary-background {
   //custom styles
}
</syntaxhighlight>

===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 (<code>-</code>), 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
:<code>.pi-title</code>
;Ylätunniste
:<code>.pi-header</code>
;Navigaatio
:<code>.pi-navigation</code>
;Ryhmät
:<code>.pi-group</code>
;Tietotunniste
:<code>.pi-data</code>
;Tietoarvo
:<code>.pi-data-value</code>
;Tietonimike
:<code>.pi-data-label</code>
;Kuva
:<code>.pi-image</code>
;Kuvatunnisteet
:<code>.pi-image-collection-tabs</code>

==Auttajaluokat==
Kannettavat tietolaatikot sisältävät valikoiman suunnittelukohtaisia auttajaluokkia auttamaan sinua helposti päivittämään yleisen tyylimuotoilun:
;<code>.pi-background</code>
: yleinen tietolaatikon tausta
;<code>.pi-secondary-background</code>
: otsikko ja navigointitaustat
;<code>.pi-font</code>
: tietoarvon fontin tyyli
;<code>.pi-secondary-font</code>
: otsikko, kuvateksti ja navigointifonttityylit
;<code>.pi-item-spacing</code>
: täytteet jokaisen tietolaatikon elementin ympärillä
;<code>.pi-border-color</code>
: 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:
<syntaxhighlight lang="css" style="margin:1em 0 1em 1em;">
.portable-infobox {
   width: 300px;
}
</syntaxhighlight>

TIetolaatikon taustavärin muuttaminen:
<syntaxhighlight lang="css" style="margin:1em 0 1em 1em;">
.portable-infobox.pi-background {
   background-color: #ff0000;
}
</syntaxhighlight>

Tietolaatikon otsikoiden ja navigointitaustojen muuttaminen:
<syntaxhighlight lang="css" style="margin:1em 0 1em 1em;">
.portable-infobox .pi-secondary-background {
   background-color: #00ff00;
}
</syntaxhighlight>

Tietolaatikon elementtien rajausvärin muuttaminen:
<syntaxhighlight lang="css" style="margin:1em 0 1em 1em;">
.portable-infobox .pi-border-color {
   border-color: #00ff00;
}
</syntaxhighlight>

Tietolaatikon elementtien täytteiden muuttaminen:
<syntaxhighlight lang="css" style="margin:1em 0 1em 1em;">
.portable-infobox .pi-item-spacing {
   padding: 10px 20px;
}
</syntaxhighlight>

¨Tietolaatikon tietoarvon fonttikoon muuttaminen:
<syntaxhighlight lang="css" style="margin:1em 0 1em 1em;">
.portable-infobox .pi-font {
   font-size: 16px;
}
</syntaxhighlight>

TIetolaatikon otsikoiden, etikettien ja navigointiarvojen fonttikoon muuttaminen:
<syntaxhighlight lang="css" style="margin:1em 0 1em 1em;">
.portable-infobox .pi-secondary-font {
   font-size: 18px;
}
</syntaxhighlight>

Tietolaatikon pääotsikon fonttikoon muuttaminen:
<syntaxhighlight lang="css" style="margin:1em 0 1em 1em;">
.portable-infobox .pi-title {
   font-size: 24px;
}
</syntaxhighlight>

Kentän palstaleveyden muuttaminen:
<syntaxhighlight lang="css" style="margin:1em 0 1em 1em;">
.portable-infobox .pi-data-label {
   flex-basis: 165px;
}
</syntaxhighlight>

Valitse palstan mukautetuksi teemaksi "oblivion", ja säädä sitten kuvatekstin fonttikokoa:
<syntaxhighlight lang="css" style="margin:1em 0 1em 1em;">
.portable-infobox.pi-theme-oblivion .pi-caption {
   font-size: 16px;
}
</syntaxhighlight>

<div style="margin-top:2em;"> </div>

Muuta tunnisteiden taustaväri kuvien avulla
<syntaxhighlight lang="css" style="margin:1em 0 1em 1em;">
.pi-image-collection-tabs li {
  background-color: green;
}</syntaxhighlight>

<div style="margin-top:2em;"> </div>
===Edistyneille===
Normaalisti, jos sinun tarvitsee muuttaa tietyn teeman tyyliä, sinun olisi kirjoitettava jotain tällaista:
<syntaxhighlight lang="css" style="margin:1em 0 1em 1em;">
.portable-infobox.pi-theme-name .pi-secondary-background {
   background-color:#334;
}
</syntaxhighlight>

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, <code>.pi-background</code> on samassa <code>&lt;aside></code>-elementissä kuin teema (<code>.pi-theme-name</code>) ja yleinen kannettava tietolaatikkoluokka (<code>.portable-infobox</code>), joten CSS-koodi, joka muutta taustan tälle teemalle, olisi:
<syntaxhighlight lang="css" style="margin:1em 0 1em 1em;">
.portable-infobox.pi-theme-name.pi-background {
   background-color:#334;
}
</syntaxhighlight>

[[be:Даведка:Інфабоксы/CSS]]
[[de:Hilfe:Infoboxen/CSS]]
[[en:Help:Infoboxes/CSS]]
[[es:Ayuda:Infoboxes/CSS]]
[[fr:Aide:Infoboxes/CSS]]
[[it:Aiuto:Infobox/CSS]]
[[ja:ヘルプ:インフォボックス/CSS]]
[[pl:Pomoc:Infoboksy/CSS]]
[[pt:Ajuda:Infoboxes/CSS]]
[[ru:Справка:Инфобоксы/CSS]]
[[uk:Довідка:Інфобокси/CSS]]
[[vi:Trợ giúp:Hộp thông tin/CSS]]
[[zh:Help:訊息框/CSS]]

[[Luokka:Muokkaaminen]]
[[Luokka:Ohje]]