Lähes kaikki on muokattavissa css-tyylitiedosta käsin. Jokaiselle kieliversiolle on oma tyylitiedostonsa:

• www_v_fin/metalib.css
• www_v_eng/metalib.css
• www_v_swe/metalib.css

Eri selainversioille ei ole enää omia tyylitiedostoja. Firefox-selaimen Web Developer -lisäosa on oivallinen apukeino css:n muokkaamiseen ja testaukseen. Sen avulla voi mm. 􀁸 Nähdä mistä tyyli-osista sivu koostuu (Tools > Web Developer > CSS > View Style Information / Ctrl-Shift-Y). Kun tämän jälkeen liikuttaa hiirtä sivun eri tekstien ym. muotoiltujen osien päällä näkyy selaimen yläosassa miten se sijaitsee html-rakenteessa ja mitkä tyylit sitä koskevat.

Muokata css-tiedostoa ja nähdä suoraan miten muutokset vaikuttavat sivun ulkoasuun. (> Web Developer > CSS > Edit CSS / Ctrl-Shift-E) Muokkauksen jälkeen css-tiedoston voi joko tallentaa ja viedä uudestaan palvelimelle, tai viedä vain jonkin tietyn kohdan palvelimen css-tidostoon "copy-pastettamalla".

Pari yleistä asiaa CSS -muotoilusta tyylitiedoston lukemisen helpottamiseksi.

Risuaita vai piste alussa? - Jos tyyli koskee id -tunnisteella identifioitua tagia, esim. <div id="meta_search">, alkaa se risuaidalla "#". Jos kyseessä on taas määritys, joka ilmaistaan class-atribuutissa, esim. <span class="jotain">, alkaa tyyli pisteellä "." Jos kyseessä on html -tagin tyylin määrittely, ei eteen tule mitään. Yksi tyylimäärittely-osio alkaa "valitsimella" (id, luokka tai html) ja niputetaan aaltosulkeilla. Se voi koostua useasta muotoilumäärittelystä, jotka ovat muotoa ominaisuus: arvo. Nämä määrittelyt erotetaan osion sisällä toisistaan puolipisteellä. Esim. #header a määrittää id="header" -alueen sisällä olevien linkkien väriksi harmaan ja tekstin muuten muotoilemattomaksi. (Tämä vaikuttaa tässä tapauksessa mm. siihen, miltä kieli-versioiden linkit näyttävät) Kommentit merkitään kautta-viivalla ja tähdellä: /* kommentti */

Yleiset asetukset
CSS:ssä monet määritykset "periytyvät" alemmille tasoille, toisin sanoen esim. bodytagin sisällä sijaitsevan span-tagin sisällä käytetään samaa fonttia kuin body-tagissa on määritelty, ellei span:ssa määritellä jotain muuta. Näin ollen esim. koko käyttöliittymän fontin kokoa voi muuttaa yksinkertaisesti muuttamalla tyylitiedostosta body-tagin määrityksiä:

Koska alemmillakin tasoilla fontin koko on määritelty suhteellisesti (esim. 70%), muuttuu fontti kaikkialla yhtä asetusta säätämällä.

Yläpalkki:

Yläpalkin taustavärin muuttaminen taustakuvaksi:

#header -kohdassa voi pelkän taustavärin (background-color: #3F6480) vaihtaa taustakuvaksi kirjoittamalla sen lisäksi tai tilalle: backgroundimage: url(../icon_lng/xxxx.gif), missä lng korvataan halutun kieliversion kansionimellä. Jos kaikissa kieliversioissa on sama taustakuva, voi url olla jokaisen kieliversion
tyylitiedostossa sama.

Jos taustakuvaa ei haluta näyttää koko palkin leveydeltä, voi sen estää lisäämällä: background-repeat: no-repeat erotettuna puolipisteellä ts. background-image: url(../icon_fin/yla_tausta.gif); background-repeat: no-repeat;... Taustakuvan toistuvuus voidaan myös sitoa joko y-, tai x-akselille: repeat-y tai repeat-x. Näistä jälkimmäinen voisi olla näppärä vaihtoehto silloin kun halutaan varmistaa, että taustakuva toistuu sivusuunnassa joustavasti, mutta pystysuunnassa vain kerran. Vastaavasti background-position arvolla voidaan vaikuttaa toistumattoman taustakuvan sijoitteluun. Arvoina voivat olla joko left|right|center ja/tai top|bottom|center. Arvot voidaan myös ilmaista tarkempina suhteina, prosentteina siten, että sijainti x-akselilla merkitään ensin ja sen jälkeen y-akselilla. esim. background-position: center center; on sama kuin background-position: 50% 50%; ja background-position: right top; on sama kuin background-position: 100% 0%;

Yläpalkin ja valikon välissä olevan tilan muuttaminen Voi vaihtaa #header -kohdassa: border-top: dddddd 2px solid; border-bottom: #dddddd 2px solid; margin-bottom: 4px Palkin korkeus muutetaan sekä #header, että #header div -valitsimissa (height:48px)

Yläpalkissa olevan kuvan sijainti määritellään #header img -valitsimessa. Kun logo-kuvan haluaa vaihtaa, pitää icon_lng (fin,eng,swe) kansioon kuvan v-Header2.gif tilalle tallentaa oma kuva samalla nimellä. Jos oma logo on eri nimellä, pitää banner-1 -tiedostossa vaihtaa kuvan nimi: <img src="&icon_path_&lng/vaihdettu_kuva.gif" alt="//Metalib Logo">

Valikko

• Tyyli (esim. väri), jota käytetään kun hiirellä mennään valikkotekstin päälle sijaitsee valitsimessa #navigation li a:hover
• Tyyli, jota käytetään parhaillaan aktiivisessa valikon kohdassa sijaitsee valitsimessa:#navigation ul li.NavSelect a
• Moduulien poistaminen käytöstä:Mikä tahansa käyttöliittymän moduuli voidaan piilottaa muokkaamalla tyylitiedostoa.Jokaiselle moduulille on määrittely tyylitiedostossa:
  • Pikahaku: #navigationQS

• • Aineistonvalinta: #navigationFD

• • Lehtivalinta: #navigationEJ

• • Monihaku: #navigationMS

• • omaNELLI: #navigationMy
• Toiminnon piilottamiseksi on määrittelyssä muutettava display-asetukseksi "none".
• Kotisivulta linkit voi piilottaa vastaavasti seuraavia määrittelyjä muokkaamalla:
  • Kotisivu: #homeH

• • Pikahaku: #homeQS

• • Aineistonvalinta: #homeFD

• • Lehtivalinta: #homeEJ

• • Monihaku: #homeMS

• • Portaalin vaihto: #homeCP

• • Sisäänkirjautuminen: #homeLI
• Esim. pikahaun piilottamiseksi on tehtävä tummennetut muutokset:
  

Pikahaku on sikäli erikoistapaus, että se on monessa tilanteessa oletustoiminto. Jos se poistetaan käytöstä, täytyy pikahakusivulta tehdä uudelleenohjaus toimintoon, joka sen sijaan halutaan oletusarvoiseksi. Esim. uudelleenohjaus monihakuun voidaan tehdä lisäämällä tummennettu rivi quick-1-head -tiedostoon:

Kirjautumisen piilottaminen Jos kirjautuminen ei ole käytössä, voidaan kirjautumislinkki piilottaa käyttöliittymästä muokkaamalla tyylitiedostosta tyyliä #actionIconsLogin. display-asetukseen tulee tällöin laittaa "none":

Sivut, joissa käsitellään aihetta "CSS tyylitiedostot"