Finna2-teeman käyttöönotto edellyttää html/css-koodauksen perustaitoja, sekä Finnan hallintaliittymän tuntemusta. Ennen uuden teeman käyttöönottoa teemaa pitää testata Finnan testiympäristössä ja tehdä tarvittavat muutokset teemaan. 

Esimerkki Finna2-teeman pohjalle rakennetusta näkymästä: https://www.finna.fi

Suositeltava tapa ottaa uusi Finna2-teema käyttöön, on kopioida nykyinen näkymä uudeksi näkymäksi. Tällöin  voidaan vertailla vanhan ja uuden Finna-teeman välillä.

Ennen näkymän julkaisua muista vaihtaa nykyisen näkymän Piwik-tunnus uuteen näkymään. Asetus löytyy tiedostosta: local/config/vufind/config.ini. Kopioi site_id -arvo uuden näkymän vastaavaan config.ini tiedostoon. Arvo löytyy kohdasta [Piwik].

Näkymän kopiointi

  • Kirjaudu Finnan hallintaliittymään 

  • Luo uusi näkymä tekemällä kopio nykyisestä käytössä olevasta näkymästä, joka perustuu aiempaan teemaan. (Hallintaliittymän aloitusnäkymä → Luo uusi)

Finna2-teeman aktivointi

Finna2-teema aktivoidaan tiedostohallinnan kautta muokkaamalla tiedostoja themes/custom/theme.config.php ja themes/custom/less/finna.less

  •  Tiedostosta themes/custom/theme.config.php vaihdetaan kohta:

    'extends' => 'finna' → 'extends' => 'finna2'

    Lopputulos näyttää tällaiselta:

    <?php
    return array(
        'extends' => 'finna2',
        'css' => array(
            'custom.css',
            'settings.css'
        ),
        'js' => array(
        )
    );
  • Tiedostosta themes/custom/less/finna.less vaihdetaan kohta:

    @import "../../finna/less/finna.less"; → @import "../../finna2/less/finna.less";

    Lopputulos näyttää tällaiselta:

    @import "../../finna2/less/finna.less";
    @import "variables.less";
    @import "custom.less";

Teeman aktivoinnin jälkeen tehtävät muutokset

  • Uuden teeman yläpalkki on tehty oletuksena valkoiseksi. Yläpalkin taustaväri on mahdollista vaihtaa less-muuttujalla (@header-background-color). Aiemmassa teemassa logoa käytettiin tummalla pohjalla, useimmissa
    tilanteissa logo pitää vaihtaa. 
  • Logo vaihdetaan "Ulkoasu"-välilehdeltä ja valitsemalla Lisää uusi logokuva...  Logo skaalautuu yläpalkin korkeuden mukaan automaattisesti.  Logo kannattaa testata useammalla päätelaitteella ennen näkymän julkaisua (tietokoneen näyttö, mobiili jne.). Logossa kannattaa käyttää png-tiedostomuotoa (suositus: enimmäisleveys 200px ja  korkeus: 40px). Logossa on mahdollista käyttää myös tarkempaa pikselitiheyttä, jolloin logon koko voi olla esimerkiksi 400px*80px. Mikäli logon oletuskorkeutta halutaan kasvattaa, pitää muutos tehdä @navbar-logo-height less-muuttujaan (korkeus suositus 35-50px).
  • Taustaväri kannattaa asettaa hallintaliittymästä valkoikseksi
  • Jotta näkymä toimisi oikein, pitää osa less-muuttujista käydä läpi. Less-muuttujat sijaitsevat tiedostossa: themes/custom/less/variables.less.
    • Uudet ja merkittävät less-muuttujat (sinisellä merkityt ovat uusia):
      • @header-background-color (ylävalikon taustaväri) 
      • @header-text-color (ylävalikon tekstinväri)
      • @finna-browsebar-background (selaa palkin taustaväri)
      • @finna-browsebar-link-color(selaa palkin linkin)
      • @finna-browsebar-highlight-background (selaa palkin korotuksen taustaväri)
      • @finna-search-background (hakupalkin taustaväri)
      • @finna-search-link-color (hakupalkin linkin väri)
      • @filters-background-color (hakurajaimen taustaväri)
      • @filters-text-color (hakurajaimen tekstinväri)
      • @action-link-color (toiminto linkin väri)
      • @finna-feedback-background (palautepainikkeen taustaväri)
      • @finna-feedback-color (palautepainikkeen tekstinväri)
      • @link-color (linkin väri)

 

 

Uudet less-muuttujat eivät tule automaattisesti näkyviin variables.less tiedostoon, mikäli teema on kopioitu vanhasta teemasta. Mikäli haluat muuttaa uusia less-muuttujia, pitää ne lisätä kopioidun näkymän variables.less tiedostoon.

Näkymän kopioinnin jälkeen taustakuva pitää jossakin tapauksissa asettaa uudestaan hallintaliittymästä (Lisää uusi taustakuva...). 



 

 

 

  • No labels