Tällä sivustolla on käytettävissä joitakin erityisiä muotoiluja, jotka saa käyttöön, kun kirjoittaa esimerkiksi tekstikappale- tai kuva-lohkolle tietyn ”CSS-lisäluokan” (teknisemmin sanottuna class-attribuutin).
Tämän sivun lopussa on kuva, josta näkee mihin ne kirjoitetaan.
Painike käynnissä olevia melontakilpailuja varten
Tällaisella etusivulle laitettavalla painikkeella (ilman tarvetta CSS-lisäluokalle) voi ohjata melontakilpailuiden lähtölistoihin, tuloksiin ja muuhun kisainfoon. Ei pidä hämmentyä siitä, että painiketta tehdessä se väyttää vielä mustalta!
sivuhuomautus – sivun lyhyemmän osoitteen ilmoittamiseen
Se näyttää tältä: vihuri.info/liity
Toistaiseksi vain kolmella sivulla (Meloja 1 -kurssit, liity jäseneksi ja lasten ja nuorten melontakoulut) on käytössä tämä muotoilu, jolla sivun lyhyemmän pikalinkin saa ilmoitettua heti sivun alussa, sen oikeassa yläreunassa. Tuo laatikko poistuu näkyvistä, kun sivua katsotaan kapeassa ikkunassa eli puhelimella.
huom0 ja huom1 ja huom2 – tekstikappaleen korostaminen punaisella värillä
Tekstikappale voidaan merkitä CSS-lisäluokalla huom1 tai huom2 ja sitten se näyttää tältä:
Tämä on huomautus! Tarkemmin sanottuna ”tason 0” huomautus. Käytetty CSS-lisäluokka on huom0. Outo numero (nolla) johtuu siitä, että tämä on luotu sen jälkeen kun tasot 1 ja 2 olivat jo olemassa.
Tämä on huomautus! Tarkemmin sanottuna ”tason 1” huomautus. Käytetty CSS-lisäluokka on huom1 .Tässä on varmuuden vuoksi niin paljon tekstiä, jotta se menee useammalle riville. Tässä on myös jokin linkki, jotta nähdään sellaisenkin väri.
Tämä on toinen huomautus! Tarkemmin sanottuna ”tason 2” huomautus. Käytetty CSS-lisäluokka on huom2 .Tässä on varmuuden vuoksi niin paljon tekstiä, jotta se menee useammalle riville. Tässä on myös jokin linkki, jotta nähdään sellaisenkin väri.
varjostettu – varjo valkoiselle kuvalle
Jos kuvan tausta on valkoinen, ja kuvan reunat halutaan jostain ihmeen syystä näkyviin, kuvalle voi asettaa hennon varjon CSS-lisäluokalla varjostettu .
Yleensä näyttää paljon paremmalta ilman, koska sivujen taustaväri on valkoinen. Tämä tehtiin melojalogon esittelyä varten sivun seura aivan lopussa.
Varjostus on paikallaan ruutukaappauksissa, kuten tämä sivun lopussa.
harva – pitkien luetteloiden väljentäminen lukemisen helpottamiseksi
Pitkän ja paljon tekstiä sisältävän luettelon lukeminen helpottuu, kun luettelolle antaa CSS-lisäluokan harva. Sitä varten pitää ensin aktivoida koko luettelo (ei vain yksi luettelon kohta).
Tämän myötä jokaisen luettelokohdan alle jää hieman ylimääräistä tyhjää tilaa. Tämä on käytössä mm. Kajakkipaikkasivulla.
ennen-listaa – johdantokappale kiinni luetteloon
Jos luettelon edelle halutaan johdantokappale, eikä sen ja luettelon väliin haluta tyhjää tilaa, johdantokappaleelle voi antaa CSS-lisäluokan ennen-listaa.
Se näyttää tältä
- yksi
- kaksi
- ja niin edelleen
CSS-lisäluokkien käyttöönotto
CSS-lisäluokkia pääsee lisäämään aktiiviselle lohkolle käyttöliittymän oikean reunan valinnoista, Lohko-välilehden ”Edistyneet ominaisuudet” -kohdassa, joka pitää ensin avata näkyviin.
Sivua on päivitetty viimeksi 6.5.2025.
