Ohje:Omat tyylit/CSS

Wikipediasta
Siirry navigaatioon Siirry hakuun


Tältä sivulta löydät käyttäjien lisäämiä, omaan tyylitiedostoon lisättäviä lyhyitä CSS-koodeja.

Näin lisäät oman koodisi

[muokkaa | muokkaa wikitekstiä]

Tee alasivu muodossa Ohje:Omat tyylit/CSS/koodi jossa kohdan koodi tilalla on tyylikoodisi lyhyt, kuvaava nimi. Seuraavaksi lisää luodun alasivun alkuun seuraavat tiedot:

=== Koodi nimi ===
{| class="prettytable"
|-
! Lisätty:
| ~~~~~
|-
! Kuvaus:
| Lyhyt kuvaus kuinka koodi toimii
|-
! Tekijä:
| [[Käyttäjä:Käyttäjänimi|]] ([[Keskustelu käyttäjästä:Käyttäjänimi|keskustelu]])
|-
! Testattu ulkoasuilla:
| MonoBook / Perus / Kölnin sininen / Chick / Simple / Nostalgia / Oma tyylisivu
|-
! Testattu selaimilla:
| IE x.x / Firefox x.x / Opera x.x / Safari x.x / Muu selain x.x
|}

Esimerkki:

Artikkelin merkkimäärän muutos

[muokkaa | muokkaa wikitekstiä]
Lisätty: 18. helmikuuta 2007 kello 11.06 (UTC)
Kuvaus: Tämän koodin avulla voit piilottaa tai muuttaa ulkoasua tuoreissa muutoksissa näkyvien merkkimäärän muutoksissa.
Tekijä: Käyttäjänimi (keskustelu)
Testattu ulkoasuilla: MonoBook
Testattu selaimilla: IE >= 5.0, Firefox 2

Tämän alapuolelle lisää koodisi <pre>...</pre> -tagien väliin. Lopuksi tallenna koodi ja lisää tallentamasi alasivu alla olevaan luetteloon muodossa {{/Koodin nimi}} aakkosellisen järjestyksen mukaiselle paikalle.

Artikkelin merkkimäärän muutos

[muokkaa | muokkaa wikitekstiä]
Lisätty: 18. helmikuuta 2007 kello 11.22 (UTC)
Kuvaus: Tämän tyylilisäyksen avulla voit muokata artikkelin merkkimäärän muutoksen esitysasua.
Tekijä: Agony (keskustelu)
Testattu ulkoasuilla: MonoBook
Testattu selaimilla: IE >= 5.0, Firefox 2, Opera 9.x
/* Muutoksen koko pienemmäksi. Jos haluat, voit piilottaa muutokset
   lisäämällä attribuutin display: none; */
.mw-plusminus-pos {
    font-size: 0.8em;
    color: #052;
}

.mw-plusminus-null {
    font-size: 0.8em;
}

.mw-plusminus-neg {
    font-size: 0.8em;
    color: #520;
}

Kielilinkin korostaminen

[muokkaa | muokkaa wikitekstiä]
Lisätty: 10. huhtikuuta 2008 kello 22.27 (UTC)
Kuvaus: Koodilla voi korostaa haluamiaan kielilinkkejä. Mallikoodissa lihavoidaan en-linkki ja asetetaan sille harmaa tausta.
Tekijä:
Testattu ulkoasuilla: MonoBook
Testattu selaimilla: Opera 9.27
#p-lang .interwiki-en { font-weight: bold; background-color:#c0c0c0}

Kielilinkkilistan suositeltua artikkelia kuvaava tähti

[muokkaa | muokkaa wikitekstiä]
Lisätty: 18. helmikuuta 2007 kello 18.27 (UTC)
Kuvaus: Koodin avulla voit korvata kielilinkkilistassa näkyvän suositeltua artikkelia kuvaavan tähden vaihtoehtoisella kuvalla.
Tekijä:
Testattu ulkoasuilla: MonoBook
Testattu selaimilla: Firefox 2, Opera 9

Korvaa oletuksena näkyvä tähti haluamallasi kuvalla muokkaamalla sen sijaintiosoitetta (URL). Huomaathan että kuvan täytyy olla hyvin pieni.

li.FA {
list-style-image:
url("http://upload.wikimedia.org/wikipedia/en/6/60/LinkFA-star.png");
}

Merkintöjen korostus

[muokkaa | muokkaa wikitekstiä]
Lisätty: 16. joulukuuta 2009 kello 22.36 (EET)
Kuvaus: Korostaa väärinkäyttösuodattimen merkinnät esimerkiksi tuoreissa muutoksissa. Esimerkissä muutetaan merkintöjen väri punaiseksi ja lisäksi kiroilu-merkinnän koko kaksinkertaiseksi.
Tekijä: A333 (keskustelu)
Testattu ulkoasuilla: MonoBook
Testattu selaimilla: Epiphany 2.22.3
span.mw-tag-marker {color:red;}
span.mw-tag-marker-kiroilu {font-size:200%;}
Lisätty: 28. huhtikuuta 2007 kello 15.53 (UTC)
Kuvaus: Tällä koodilla voit kytkeä pelkistetyn muodon vanhasta versiosta näkyviin.
Tekijä: Agony (keskustelu)
Testattu ulkoasuilla: Oma tyylisivu
Testattu selaimilla: Opera 9.x
#vanhaversio-varoitus {
    display: none;
}

#vanhaversio-pelkistetty {
    display: block !important;
}