Näkymän räätälöinti tehdään pääosin tiedostonhallinnan kautta muokkaamalla näkymän asetustiedostoja ja teemaa. Teema on Finnassa se kerros, jonka perusteella tuotetaan näkymän selaimelle näytettäväksi annettava sisältö. Tässä dokumentissa kerrotaan räätälöinnin perusasiat.

Katso myös tiedostonhallinnan kautta tehtyjen muokkausten ylläpito.

Konfiguraatiotiedostot

Näkymän asetukset löytyvät hakemistosta /local/config/vufind. Hallintaliittymä kirjoittaa näihin ja näitä voi myös muokata tiedostonhallinnan kautta. Asetustiedostoja kannattaa muokata tiedostonhallinnassa vain jos haluttua muutosta ei voi tehdä hallintaliittymän graafisen puolen kautta (esimerkiksi RSS-syötteiden ja ylävalikon asetukset).

vufind-hakemiston tiedostot perivät Finnan yleiset asetukset, jotka sijaitsevat saman nimisissä tiedostoissa hakemistossa /local/config/finna. Asetustiedostossa voi yliajaa joko kokonaisen osion tai vain osion tietyn parametrin. Osiot, jotka yliajetaan kokonaisuudessaan määritellään Parent_Config-osion override_full_sections kohdassa. 

Esimerkiksi /local/config/vufind/config.inin tiedostossa määritellään osiot Languages, AlphaBrowse_Types ja SearchTabs yliajettaviksi kokonaan:

[Parent_Config]
relative_path = "../finna/config.ini"
override_full_sections = "Languages,AlphaBrowse_Types,SearchTabs"

Sen sijaan saman tiedoston Site-osioon voi lisätä uuden asetuksen yliajamatta koko osiota.

Esimerkki: lisätään Site-osion systemMessages taulukkoon uusi ilmoitus. Tarkempi ohje systemMessages-viestien lisäämisestä täällä.

[Site]
...
systemMessages[] = "Kirjastojärjestelmässä huoltotöitä maanantaina 1.1. klo 10-11."

Yleensä jos osiosta halutaan poistaa valintoja, osio täytyy yliajaa kokonaan.

Esimerkki: määritellään tarkennetun haun lomakkeen halutut kentät osiossa Advanced_Searches. Lisätään yliajettavan osion nimi kohtaan override_full_sections.

[Parent_Config]
relative_path = "../finna/searches.ini"
override_full_sections = "Views,Autocomplete_Sections,Advanced_Searches"


[Advanced_Searches]
AllFields           = adv_search_all
Title               = adv_search_title
JournalTitle        = adv_search_journaltitle
Author              = adv_search_author
Subject             = adv_search_subject

Väliaikaistiedostot

Finna kirjoittaa väliaikaistiedostoja local/cache-hakemistoon tai sen alihakemistoihin. Näitä tiedostoja (esim. hakemistosta löytyviä kuvia tai rss-syötteitä) ei voi käyttää omiin tarkoituksiin, koska cache-hakemistojen sisältö voidaan poistaa milloin tahansa, eikä sitä julkaista näkymän julkaisutoimintoa käytettäessä.

Yleisperiaatteita teeman tiedostojen muokkaamisessa

Kunkin näkymän hakemisto on organisaation mukaan nimetyssä juurihakemistossa. Esimerkiksi Kansalliskirjaston näkymä "testi" on hakemistossa /kansalliskirjasto/testi. Teemahakemisto (vastedes <teemat>) on näkymän alihakemisto themes.

Näkymät käyttävät custom-teemaa, jonka tiedostot sijaitsevat hakemistossa /themes/custom. custom-teema perii Finna-teeman. Näkymän sisällön räätälöinti tehdään yliajamalla Finna-teeman tiedostoja tai lisäämällä additions-sivupohjia. On suositeltavaa käyttää additions-sivupohjia teeman alkuperäisten tiedostojen muokkauksen sijaan, koska silloin ei tarvitse huolehtia itse teeman alkuperäisiin tiedostoihin tehtävien muutosten ja korjausten kopioinnista omiin ylikirjoitettuihin tiedostoihin. Additions-sivupohjia on kuitenkin vain tietyissä yleisesti käytetyissä kohdissa, ja niillä voi tehdä vain lisäyksiä sivuille.

Esimerkiksi jos halutaan räätälöidä tiedostoa /themes/finna/templates/footer.phtml, tästä tiedostosta tehdään paikallinen versio /themes/custom/templates/footer.phtml. Helpoiten tämä onnistuu etsimällä haluttu tiedosto Finna-teeman alta ja valitsemalla "Ylikirjoita tiedosto", jolloin tiedosto kopioidaan custom-teeman alle oikeaan hakemistorakenteeseen ja avataan muokattavaksi tiedostoeditoriin. 

Samannimisen tiedoston voi tehdä myös kokonaan alusta aloittaen tyhjästä tiedostosta. 

Custom-teeman paikallinen tiedosto korvaa Finna-teeman vastaavan tiedoston kokonaisuudessaan. Paikallisessa tiedostossa on siis yleensä oltava kaikki oletustiedostossa olevat elementit (jos niitä ei nimenomaan haluta poistaa), vaikka muokkaukset koskisivat vain osaa niistä.

Sivupohjat

Teema on Finnassa se kerros, jonka perusteella tuotetaan näkymän selaimelle näytettäväksi annettava sisältö. Teema rakentuu sivupohjien (template, tiedostopääte .phtml) ympärille. Tyypillisesti sivupohjan perusteella tuotetaan HTML-sisältöä, joka annetaan selaimelle näkymän käyttäjän nähtäväksi.

Useimmissa sivupohjissa on jo sisältöä jota voi muokata. Tämän lisäksi /themes/custom/templates/content/Additions alla on sivupohjia, jotka on tarkoitettu sisällön lisäämiseen muutamiin sellaisiin paikkoihin, joissa sitä ei oletuksena ole (ks. Additions-sivupohjat alla).

Kannattaa pääsääntöisesti muokata mahdollisimman spesifiä sivupohjaa. Esimerkiksi /themes/finna/templates/layout/layout.phtml-sivupohja tekee paljon asioita, jotka ovat olennaisia näkymän toiminnalle ja joihin tulee keskitetystä ylläpidosta usein muutoksia päivitysten yhteydessä. Tämä tarkoittaa, että jos näkymä käyttää muokattua layout.phtml-tiedostoa, päivityksen yhteydessä on yleensä tehtävä paljon muutoksia käsin. Parempi ratkaisu on jättää layout.phtml keskitettyyn ylläpitoon ja tutkia voisiko haluamansa muutokset tehdä syvemmälle tiedostorakenteeseen, sivupohjiin jotka eivät muutu jatkuvasti.

Ulkoasumuutokset kannattaa pyrkiä toteuttamaan tyylitiedostoilla. Näin pidetään ohjelmalogiikka erillään ulkoasusta.

Toisista sivupohjista on erilliset versiot eri kieliversioille. Näissä tapauksissa sivupohjan nimen perässä on kielikoodi ennen tiedostopäätettä, esimerkiksi home-1_fi.phtml. Mikäli nimessä ei ole kielikoodia, samaa tiedostoa käytetään kaikissa kieliversioissa. Jos käytät kieliversiokohtaisia sivupohjia, muista lisätä sivupohja näkymän jokaiselle kielelle.

Voit myös tehdä yhden sivupohjan (ilman kielipäätettä) ja käyttää sivupohjassa translate-komentoa tai ehtolauseita. Translate-komennon käännökset määritellään Kielikäännökset-välilehdellä.

Esimerkki 1

Tulostetaan 'Need Help?' niminen kielikäännös: 

<h5><strong><?=$this->translate('Need Help?')?></strong></h5>

Esimerkki 2

Kieliriippuvaista sisältöä ehtolauseilla:

<? if ($this->layout()->userLang === "fi"): ?>
    <p>Tämä teksti näkyy vain suomenkielisessä versiossa</p>
<? endif; ?>
 
<p>Näkyy kaikilla kielillä</p>
 
<? if ($this->layout()->userLang === "sv"): ?>
    <p>Tämä teksti näkyy vain ruotsinkielisessä versiossa</p>
<? endif; ?>


Sivupohjiin voi syöttää HTML-koodia normaalisti. Lisäksi sivupohjissa on käytössä apuvälineitä yleisesti käytetyille toiminnoille.

Esimerkkejä (lisää löytyy Finna-teeman sivupohjista):

ToimintoSivupohjaan sijoitettava koodi
Sivun otsikon asettaminen.
<? $this->headTitle('xxx'); $this->content()->setHeading('xxx'); ?>
Otsikko.
<h2>Otsikko</h2>
Tekstikappale.
<p>Tekstiä</p>
Kuvan lisääminen sivulle. Kuva tallennetaan hakemistoon /themes/custom/images
<img src="<?=$this->imageSrc('tiedostonimi.jpg')?>">
Tiedoston linkitys sivulle. Tiedosto tallennetaan hakemistoon /themes/custom/files
<a href="<?=$this->fileSrc('tiedostonimi.jpg')?>">
Käännös tekstille XXX käyttäjän valitsemalla kielellä. Mikäli jokaista kieliversiota varten on oma sivuns, tätä ei tarvitse käyttää.
<?=$this->translate('XXX');?>
Ulkoinen linkki.
<a href="https://finna.fi">Finna</a>

Linkki näkymän toimintoon.

Esimerkkejä toiminnoista (kaikki toiminnot listataan tiedostoissa /module/VuFind/config/module.config.php ja /module/Finna/config/module.config.php):

  • home (etusivu)
  • myresearch-home (Oma tili)
  • myresearch-checkedout (Oma tili > Lainat)
  • search-results (hakutulos)
<a href="<?=$this->url('<toiminto>');?>">Linkki</a>
<a href="<?=$this->url('search-home')?>">Etusivulle</a> 

Linkki sisältösivulle (/Content/xx).

Esimerkiksi ohjesivulle linkitetään seuraavasti:

<?=$this->url('content-page', ['page'=>'help'])?>
<a href="<?=$this->url('content-page',  ['page' => 'xx'])?>">Linkki</a>

Linkitys tiettyyn kohtaan sivulla.

Esimerkiksi ohje-sivun kohtaan Tarkennettu haku:

<a href="<?=$this->url('content-page',  ['page' => 'help'])?>#advancedsearch">Tarkennetun haun ohje</a>
<a href="<?=$this->url('<toiminto>');?>#ankkuri">
<?=$this->url('content-page',  ['page' => '<sivu>'])?>#ankkuri 
RSS-komponentin lisääminen sivulle. Komponentin asetukset määritellään Muut asetukset -välilehdellä.
 <?=$this->feed('<nimi>'); ?>
Käytetyimmät hakusanat.

Kopioi sivupohjaan (löytyy myös sivupohjasta /themes/finna/templates/search/home/home-4.phtml):

<h3><?=$this->transEsc('most_popular_searches_heading')?></h3>
<div class="piwik-popular-searches col-sm-6">
  <span class="load-indicator hidden"><i class="fa fa-spinner fa-spin"></i> <?=$this->transEsc('Loading')?>...</span>
  <span class="load-failed hidden"> <?=$this->transEsc('An error occurred during execution; please try again later.')?></span>
</div>
Etusivun Haulla löydät -linkit

Hakulinkki, joka tekee tiettyyn aineistotyyppiin rajatun haun:

<a class="iconlabel format-1journalarticle" href="Search/Results?type=AllFields&amp;filter%5B%5D=~format%3A%220%2FJournal%2F%22"><?=$this->transEsc("format_Journal_plural")?></a>

Etusivun linkit löytyvät sivupohjasta: /templates/search/home/home-right_fi.phtml

Esimerkkejä hyödyllisistä CSS-muotoiluista:

CSS-luokka Esimerkki
fa-*

Ikonit. Sivupohjassa voi käyttää tiedostossa /themes/finna/less/bootstrap/finna/finnaicons.less määriteltyjä Font Awesome -kirjaston iconeja (fa-* luokat).

<a href="..." title="..."><i class="fa fa-search"></i> Esimerkkihaku</a>
Jos tarvitset käyttöösi ikonin, jota ei ole käytetty Finnassa, voit etsiä halutun ikonin hex-arvon ja lisätä tämän tiedostoon /themes/custom/less/custom.less tiedostoon:
.fa-barcode:before {
    content: "\f209";
}
infobox
Info-laatikko
<div class="infobox">
    <h2>Luokan infobox tyylit voi määritellä  variables.less -tiedostossa</h2>
    <ul>
      <li>@infobox-background = laatikon taustaväri</li>
      <li>@infobox-border = laatikon reunat</li>
      <li>@infobox-text-color = laatikon tekstin oletusväri</li>
      <li>@infobox-box-shadow = laatikon varjostus</li>
    </ul>
  </div>
list-bullets
UL-lista, jossa elementtien edessä "pallo"
<ul class="list-bullets">
  <li>Elementti 1</li>
  <li>Elementti 2</li>
</ul>

Bootstrap CSS-kehys

Finnan ulkoasu ja elementtien asettelu perustuu Bootstrap CSS-kehykseen. Tämän avulla sivupohjan sisältö jaetaan ruudukkopohjaan käyttämällä Bootstrapin CSS-luokkia.

Ruudukkopohja perustuu riveihin, joista jokainen voi sisältää maksimissaan 12 palstaa. Palstojen leveydet määritellään CSS-luokilla, jotka ovat muotoa: col-<päätelaite>-<leveys-palstoina>. Määrittelyt on mahdollista tehdä erikseen kolmelle eri päätelaitteelle:

Päätelaitteen tunnus PäätelaiteKäytetään kun päätelaitteen ruudun leveys on
xsxtra-smallPuhelinalle 481 px
smsmallPuhelin/Tabletti481-768 px
mdmediumTabletti/PC769-1200 px
lglargePCyli 1200 px

Kapeamman päätelaitteen määrittelyitä käytetään myös leveämmissä päätelaitteissa, jos muita määrittelyitä ei ole tehty. 

Esimerkki 1:

Lisätään sivulle neljä riviä (row-luokat):

  • Ensimmäinen rivi jaetaan kahdeksaan yhtä leveään palstaan.
  • Toinen rivi jaetaan kahteen palstaan, joista ensimmäisen leveys on 2/3 sivun leveydestä.
  • Kolmas rivi jaetaan kolmeen yhtä leveään palstaan.
  • Neljäs rivi jaetaan kahteen yhtä leveään palstaan.

Kuvan lähde: http://getbootstrap.com/css/

<div class="row">
  <div class="col-md-1">1/12</div>
  <div class="col-md-1">1/12</div>
  <div class="col-md-1">1/12</div>
  <div class="col-md-1">1/12</div>
  <div class="col-md-1">1/12</div>
  <div class="col-md-1">1/12</div>
  <div class="col-md-1">1/12</div>
  <div class="col-md-1">1/12</div>
  <div class="col-md-1">1/12</div>
  <div class="col-md-1">1/12</div>
  <div class="col-md-1">1/12</div>
  <div class="col-md-1">1/12</div>
</div>
<div class="row">
  <div class="col-md-8">2/3</div>
  <div class="col-md-4">1/3</div>
</div>
<div class="row">
  <div class="col-md-4">1/3</div>
  <div class="col-md-4">1/3</div>
  <div class="col-md-4">1/3</div>
</div>
<div class="row">
  <div class="col-md-6">1/2</div>
  <div class="col-md-6">1/2</div>
</div>

Jokaisen rivin sisällä olevien palstojen col-määrittelyiden leveyksien summan tulee olla 12. Esimerkiksi ensimmäisella rivillä on 12 kpl col-md-1 määrittelyä ja toisella rivilla määritelyt col-md-8 ja col-md-4

Koska esimerkissä palstojen leveydet on määritelty ainoastaan md-luokilla, näytetään palstat allekkain tätä kapeammilla ruuduilla (xs ja sm -päätelaitteissa).

Palstoitus voidaan skaalata käyttäjän päätelaitteen mukaan käyttämällä useampia col-määrittelyjä.

Esimerkki 2a:

Lisätään rivin sisälle neljä palstaa.

  • Kapeimmalla päätelaitteella käytetään col-xs-6 määrittelyjä, jolloin kaksi palstaa esitetään rinnakkain ja loput kaksi palstaa näiden alla.
  • Leveämmillä päätelaitteilla käytetään col-md-3 määrittelyjä, jolloin kaikki neljä palstaa esitetään rinnakkain. 
<div class="row">
    <div class="col-md-3 col-xs-6">1. palsta</div>
    <div class="col-md-3">2. palsta</div>
    <div class="col-md-3 col-xs-6">3. palsta</div>
    <div class="col-md-3">4. palsta</div>
</div>


Esimerkki 2b:

Lisätään rivin sisälle neljä palstaa.

  • Kapeimmalla päätelaitteella käytetään col-xs-6 määrittelyjä, jolloin kaksi ensimmäistä palstaa esitetään rinnakkain ja loput kaksi palstaa näiden alla päällekäin.
  • Leveämmillä päätelaitteilla käytetään col-md-3 määrittelyjä, jolloin kaikki neljä palstaa esitetään rinnakkain. 
<div class="row">
    <div class="col-md-3 col-xs-6">1. palsta</div>
    <div class="col-md-3 col-xs-6">2. palsta</div>
    <div class="col-md-3">3. palsta</div>
    <div class="col-md-3">4. palsta</div>
</div>


Esimerkki 3:

Lisätään rivin sisälle kolme palstaa.

  • Kapeimmalla päätelaitteella käytetään col-xs-6 määrittelyjä, jolloin kaksi ensimmäistä palstaa esitetään rinnakkain omana rivinään ja kolmas palsta näiden alla.
  • Leveämmillä päätelaitteilla käytetään col-sm-* määrittelyjä, jolloin kaikki kolme palstaa esitetään rinnakkain.
<div class="row">
    <div class="col-sm-7">
      <div class="row">
          <div class="col-xs-6">1. palsta</div>
          <div class="col-xs-6">2. palsta</div>
      </div>
    </div>
    <div class="col-sm-5">3. palsta</div>
</div>

 

Ruudukkopohjan skaalautuvuus (eli toimivuus eri näytön leveyksillä) kannattaa testata joko oikealla mobiililaitteella, mobiiliemulaattorilla tai yksinkertaisesti vaihtamalla selainikkunan leveyttä.

Lisää esimerkkejä palstojen määrittelyistä.

Noin tunnin kestävä opetusvideo Bootstrapin perusominaisuuksista (kohdasta 9:50 eteenpäin noin viisi minuuttia palstoituksesta ja responsiivisuudesta):

 

Etusivu

Etusivun sisältö on jaettu järjestyksessä ylhäältä alaspäin seuraaviin sivupohjiin:

Sivupohja 
templates/search/home/home-left.phtml
Hakupalkin alla vasemmalla. Tilaa tekstille.
templates/search/home/home-right.phtml
Haulla löydät -linkit, hakupalkin alla oikealla. Hakulinkit tekevät tiettyyn aineistotyyppiin rajatun haun. Voit poistaa linkit, joiden aineistotyypeillä ei löydy hakutuloksia näkymän aineistojen joukosta.
templates/search/home/home-2.phtml
Infolaatikot, kaksi vaakamuotoista kuvakarusellia.
templates/search/home/home-3.phtml
Uutislistaus ja pystymallinen kuvakaruselli
templates/search/home/home-4.phtml
Suosituimmat hakusanat.
templates/search/home/home-5.phtml

...

templates/search/home/home-10.phtml
Näytetään jos tiedoston on olemassa.
templates/footer.phtml
Sivun alareunan linkit.

RSS-syötteet näytetään infolaatikoiden alla (karuselli) ja home-3-phtml:n alla (uutislistaus, pystykaruselli), mikäli nämä ovat käytössä.

Tarpeettomista etusivun sivupohjista voi luoda tyhjät tiedostot custom-teeman alle milloin niitä ei näytetä.

Hakuohje

Näkymän hakuohje löytyy sivulta /content/help. Huomioi, että sivun alkuun ja loppuun voi lisätä omaa sisältöä muokkaamatta sivupohjaa (ks. Additions-sivupohjat: helpBegin, helpEnd).

Additions-sivupohjat

Additions-sivupohjat (custom-teeman hakemistossa templates/content/Additions) ovat yksinkertainen tapa sijoittaa omaa sisältöä käyttöliittymään tiettyihin paikkoihin. Sivupohjat voi tehdä kaikille kielille yhteisesti (esim. header-navibar.phtml) tai kielikohtaisesti lisäämällä tiedoston nimeen _kielikoodi (esim. header-navibar_fi.phtml). Yleisesti käytetyt kielikoodit ovat fi, sv ja en-gb. Allaolevassa listassa on tiedostojen nimet ilman kielikoodia.

Sivupohja 
general-post-body.phtml
HTML:n body-elementin lopussa.
general-post-head.phtml
HTML:n head-elementin lopussa. Tänne voi lisätä esimerkiksi hyödyllisiksi katsomiaan meta-elementtejä
header-navibar.phtml
Yläreunan navigointipalkin oikeassa reunassa. Tähän voi sijoittaa esimerkiksi logon tai linkin ulkoiselle sivustolle.
search-post-facets.phtml
Hakutulossivulla, fasettien jälkeen.
record-post-metadata.phtml
Tietuesivulla, tietuekenttien jälkeen.
record-post-toolbar.phtml
Tietuesivulla, tietuekuvan toimintojen alapuolella.
record-post-recommendations.phtml
Tietuesivulla, samankaltaisten teosten jälkeen.
login-pre.phtml
Kirjautumissivun alussa.
login-post.phtml
Kirjautumissivun lopussa.
helpBegin.phtml
Hakuohje-sivun alussa.
helpEnd.phtml
Hakuohje-sivun lopussa.
online-payment.phtml
Verkkomaksulomakkeella.
checkedout-pre-list.phtml
Asiakkaan lainalistan yläpuolella (myös silloin, kun lainoja ei ole).
checkedout-post-list.phtml
Asiakkaan lainalistan alapuolella.
holds-pre-list.phtml
Asiakkaan varauslistan yläpuolella (myös silloin, kun varauksia ei ole).
holds-post-list.phtml
Asiakkaan varauslistan alapuolella.
storageretrievalrequests-pre-list.phtml
Asiakkaan varastonoutopyyntölistan yläpuolella (myös silloin, kun pyyntöjä ei ole).
storageretrievalrequests-post-list.phtml
Asiakkaan varastonoutopyyntölistan alapuolella.
illrequests-pre-list.phtml
Asiakkaan kaukolainalistan yläpuolella (myös silloin, kun kaukolainoja ei ole).
illrequests-post-list.phtml
Asiakkaan kaukolainalistan alapuolella.
fines-pre-list.phtml
Asiakkaan maksulistan yläpuolella (myös silloin, kun maksuja ei ole).
fines-post-list.phtml
Asiakkaan maksulistan alapuolella.
online-payment.phtml
Maksut-välilehdellä, kun verkkomaksaminen on päällä.
solr-advanced-post.phtml
Tarkennetun haun lomake.
organisation-page-start.phtml
Organisaatiosivun alussa.
organisation-page-end.phtml
Organisaatiosivun lopussa.
header-navibar.phtml
Ylävalikossa, varsinaisten valikkojen jälkeen.

Sisältösivut

Tavallista tekstisisältöä (esim. hakuohjeita) sisältävät sivupohjat ovat teeman templates/content-alihakemistossa nimellä sivunnimi.phtml.

Kieliversiot voidaan sijoittaa samaan sivupohjaan (käyttämällä translate-komentoa) tai luomalla jokaista kieliversiota varten oma sivupohja, joka nimetään sivunnimi_<kielikoodi>.phtml, esimerkiksi sivunnimi_fi.phtml (kielikoodit: fi = suomi, sv = ruotsi, en-gb = englanti). 

Uuden sisältösivun luominen

Jos halutaan luoda esimerkiksi suomenkielinen sivu "Yleistä tietoa", se luodaan /themes/custom/templates/Content-hakemistoon ja nimetään (pienellä alkukirjaimella) halutulla tavalla, esimerkiksi generalinformation_fi.phtml. Tämän jälkeen sivu näkyy sivuston suomenkielisessä versiossa osoitteessa <sivuston url>/Content/generalinformation

Sisältösivulle voi sijoittaa vapaasti omaa HTML-sisältöä ja muotoiluja. Esimerkki:

<? $this->headTitle($this->translate('Oma sivu')); $this->content()->setHeading($this->translate('Oma sivu'));  ?>

<div class="row">
    <div class="col-md-12">
        <h1>Otsikko</h1>
		<h2>Otsikko</h2>
		<h3>Otsikko</h3>
		<h4>Otsikko</h4>
        <p>Sisältötekstiä. <strong>Lihavoitu teksti</strong></p>
		<ul>
			<li>lista 1</li>
			<li>lista 1</li>
			<li>lista 1</li>
			<li>lista 1</li>
		</ul>
    </div>
</div>

<div class="row">
    <div class="col-md-6">
        <h2>Palsta 1</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore e</p>
    </div>
    <div class="col-md-6">
        <h2>Palsta 2</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore e</p>
    </div>
</div>

<div class="row">
    <div class="col-md-4">
        <h2>Palsta 1</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore e</p>
    </div>
    <div class="col-md-4">
        <h2>Palsta 2</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore e</p>
    </div>
    <div class="col-md-4">
        <h2>Palsta 3</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore e</p>
    </div>
</div>

Ensimmäisellä rivillä asetetaan sivun otsikko näkymään selaimen otsikkopalkissa ja sisältösivun otsikkopalkissa. Tässä "Oma sivu" on käännösavain, jonka kielikäännökset syötetään muiden käännösten tapaan.

SIvun sisältö on jaettu kolmeen riviin ja rivien sisältö palstoitettu Bootstrap CSS-kehyksen määrittelyillä. Ensimmäisen sisällä on esimerkkejä tekstin muotoilusta.

Uuden sivun voi myös muokata olemassa olevan sisältösivun pohjalta. Yksipalstaisen sivun malliksi käy /themes/finna/templates/content/about_fi.phtml.

Sivun sisäinen navigaatio

Sisältösivulle voi helposti lisätä sivun sisäisen navigaation:

<div class="row">
   <div class="col-sm-3 sidebar">
     <div class="content-navigation-menu">
     </div>
   </div>
   <div class="col-sm-9">
     <div id="esim1" class="content-section">
        <h2>Sivun ensimmäinen osa</h2>     
        <p>Lorem ipsum</p>
      </div>
     <div id="esim2" class="content-section">
        <h2>Sivun toinen osa</h2>  
        <p>Lorem ipsum</p>
      </div>
   </div>
</div>

Sivun osiot lisätään div-elementteihin, joissa on CSS-luokka "content-section" ja id-attribuutti. Navigointivalikko sijoitetaan automaattisesti div-elementtiin, jossa on CSS-luokka "content-navigation-menu". Esimerkissa valikko näytetään sivun vasemmassa reunassa, mutta sjoittelua voi vapaasti muuttaa.

Mallin voi myös kopioida Ohje-sivulta: /themes/finna/templates/content/help_fi.phtml.

Sivun alareunan linkit

Sivun alareunan linkit ja muu sisältö luetaan tiedostosta /themes/custom/templates/footer.phtml. Sivupohjaan voi lisätä omia linkkejä ja kuvia. Sivuston ulkopuolelle viittaavia osoitteita ei voi kieliversioida tekstien tapaan, vaan ne täytyy huomioida esimerkiksi koodilla:

<? if ($this->layout()->userLang === "fi"): ?>
  <a href="http://www.jokudomain.fi/ target="_blank">Linkki</a>
<? endif; ?>
<? if ($this->layout()->userLang === "sv"): ?>
  <a href="http://www.jokudomain.fi/sv" target="_blank">Länk</a>
<? endif; ?>
<? if ($this->layout()->userLang === "en-gb"): ?>
  <a href="http://www.jokudomain.fi/en" target="_blank">Link</a>
<? endif; ?>

Koodin tarkistaminen

Tehdyt koodimuutokset ja muokkaukset kannattaa tarkistaa sopivalla aputyökalulla, jolloin yhteensopivuus eri selaimien, käyttöjärjestelmien ja laitteiden välillä olisi paras mahdollinen ja joukkoon eksyneet virheet löytää helpommin. Osa selaimista osaa ohittaa joitain koodivirheitä, mutta käyttäytymistä on vaikea ennustaa, joten kannattaa pyrkiä rakenteellisesti mahdollisimman virheettömään ja käytössä olevan HTML5-standardin mukaiseen lopputulokseen.

Hyvä apuväline on esim. verkosta löytyvä  https://validator.w3.org. Oman sivuston osoite annetaan Validate by URI -kohdan osoitekenttään (Address) ja valitaan Check. Tuloksena sivulle aukeaa raportti, jossa kerrotaan onko koodin rakenne kunnossa vai sisältääkö se mahdollisesti huomautettavaa/korjattavaa (esimerkkinä Finna.fi:n testinäkymän raporttisivu).

Oman näkymän toiminnallisten ja ulkonäöllisten ongelmien selvittäminen kannattaa aloittaa koodin tarkastuksella! Vaikka ongelma ei vielä mahdollisten virheiden korjauksella selviäisikään, on se kuitenkin askel oikeaan suuntaan ja auttaa karsimaan kyseisen ongelman syitä.

 

Kohdekenttärajaimet / hakutyypit

Hakukentässä olevilla rajaimilla voi tehdä monia asioita, mm. kohdistaa haun tiettyyn kenttään. Näillä rajaimilla voi käyttää kaikkia searchspecs.yaml-asetuksissa saatavilla olevia parametreja. Käytössä olevat rajaimet konfiguroidaan asetutiedoston searchbox.ini osiossa [CombinedHandlers].

Tyylitiedostot

Selaimen näytettäväksi annettava HTML-sisältö tuotetaan sivupohjilla. HTML-sisältö voidaan kuitenkin näyttää käyttäjälle eri tavoin: tekstien fontteja, värejä, marginaaleja ja muita ulkoasullisia asioita voidaan muuttaa CSS-tyylitiedostojen avulla.

Näkymän ulkoasua voi muokata joko käyttämällä Less-esikäsittelijää tai kirjoittamalla suoraan CSS-määrittelyjä. Tehdessäsi tyylitiedostoihin esimerkiksi leveyteen, korkeuteen tai marginaaleihin liittyviä muutoksia, ota huomioon niiden mahdolliset vaikutukset eri päätelaitteilla.

Hallintaliittymä tarkastaa Less-tiedoston tallentamisen yhteydessä ja ilmoittaa mahdollisista syntaksivirheistä:

Virheellistä tiedostoa ei käsitellä, eivätkä sen muokkaukset tule näkyville käyttöliittymään.

CSS -määrityksiin tarvittavat elementtien luokat ja id:t löytyvät sivun lähdekoodista tai Firebug -lisäosan avulla Firefox -selaimessa.

variables.less

Näkymän muokkausta helpottavat muuttujat, joihin on kerätty Finna-teeman useasti toistuvat määrittelyt (värit, fontit, jne) löytyvät tiedostosta /themes/custom/less/variables.less. Määrittelya muokkaamalla vaikutus näkyy kaikkialla käyttöliittymässä missä muuttujaa käytetään.

Tiedoston muuttujat on jaoteltu toiminnoittain osioihin (väriteema, typografia, napit jne). Oletuksena tiedoston muuttujat ovat kommentoituna, milloin muuttujan arvo luetaan Finna-teemasta. Muuttuja otetaan käyttöön poistamalla kommentointi (kauttaviivat rivin alusta) ja tallentamalla tiedosto.

Värit määritellään RGB-arvoina:

  • #RRGGBB eli RR:punainen, GG:vihreä, BB:sininen hex-arvot väliltä 00-ff (0-255)
    • Esimerkkejä: 
      • #000000 = musta
      • #ffffff = valkoinen
      • #ff0000 = punainen
      • #00ff00 = vihreä
      • #0000ff = sininen
  • rgb(R, G, B, A), eli R:punainen, G:vihreä, B:sininen, A:läpinäkyvyys, arvot väliltä 0.0-1.0
    • Esimerkkejä:
      • rgb(1,0,0,1) = punainen
      • rgb(0,1,0,1) = sininen
      • rgb(0,0,1,1) = vihreä

Tärkeimmät värimuuttujat

Muuttujan nimiSeliteMuuttujan nimi
@brand-primary
@brand-secondary
@brand-third
@brand-fourth
Neljä brändiväriä, jotka määrittelevät väriteeman useimmat elementit. Yhteensopivien värien selvittämiseen on saatavilla apuvälineitä, esimerkiksi coolors.co tai color.adobe.com.
@facet-background
Fasettien taustaväri
@header-background-color
Navigointivalikon tausta
@footer-background
Sivun alareunan linkkien tausta
@background-start-color
@background-end-color

Taustakuvan luikuvärjäys.

Liukuvärjäyksen voi jättää pois määrittelemällä molemmat värit läpinäkyviksi:

@background-start-color: rgba(1,1,1,0);

@background-end-color: rgba(1,1,1,0);

@home-1-background
@home-2-background
jne

Etusivun sivupohjan vaakarivien taustavärit

 
 Info-laatikoiden väri
@link-color
Linkkien väri

 

Esimerkkejä värimuutoksista

@brand-primary:

 

@brand-secondary:

 

@brand-third:

 

@brand-fourth:

custom.less

Omat ulkoasumäärittelyt sijoitetaan tiedostoon /themes/custom/less/custom.less. Less-tiedostot tukevat myös CSS-määrittelyjä, eli tiedostoihin voi kirjoittaa myös tavallista CSS:ää.

Esimerkki 1:

Asetetaan taustakuva-alueen korkeudeksi 380 pikseliä

(Huom! Taustakuvan ja logon korkeudesta sekä mahdollisista tunnus- tai tervehdyslauseista hakulaatikon yläpuolella riippuen sopivaa arvoa voi joutua kokeillen hakemaan)

.searchLayout {
	height: 380px;
}


UI-uudistus:

.searchContent {
	height: 380px
}

 

tai jopa suositellumpi tapa, jossa säädetään hakulaatikon padding-arvoja (10em ei tässä korreloi enää 380px-arvon kanssa ja em-arvot voi säätää haluamikseen):

.template-dir-search.template-name-home .search-form-container {
	padding-top: 10em;
	padding-bottom: 10em;
}

Jälkimmäisen etuna ylä- ja alalaidan arvot voivat poiketa toisistaan ja hakulaatikon pystysuuntaista sijaintia on mahdollista näin ollen myös säätää.

 

Esimerkki 2:

Muutetaan otsikkofontin kokoa ja toisen otsikon väriä etusivun sivupohjissa home-1 ja home-2

.home-1 h2 {
	font-size: 18px;
}
 
.home-2 h2 {
	color: #d3d3d3;
	font-size: 18px;
}

Esimerkki 3:

Pienennetään taustakuvan skaalausta mobiililaitteilla normaalisti käytössä olevasta arvosta 350% arvoon 230%

/* mobile only (portrait & landscape) */
@media (max-width: @screen-sm-min) {
    body {
        background-size: 230% auto;
    }
} 

Esimerkki 4:

Siirretään taustakuvaa mobiililaitteiden pystynäytöillä vasemmalle sekä vaakanäytöillä vasemmalle & ylös.

/* mobile portrait only */
@media (max-width: @screen-xs-max) {
    body {
        background-position: -750px 0;
    }
} 
/* mobile landscape only */
@media (min-width: @screen-xs-max) and (max-width: @screen-sm-min) {
    body {
        background-position: -1250px 100px;
    }
}

Arvot annetaan järjestyksessä x-akseli y-akseli. Kuva liikkuu siis negatiivisilla arvoilla vasemmalle ja alas, positiivisilla arvoilla oikealle ja ylös.

Taustakuvan asemointi eri ruudunleveyksillä halutunlaiseksi saattaa joskus vaatia em. arvojen muokkauksen lisäksi koko kuvan rajaamisen uudelleen sen mittasuhteiden muuttamiseksi (eli käytännössä kuvan korkeuden kasvattamiseksi) ratkaisemaan tapauksia, joissa taustakuvan alta näkyy tietyillä ruudun leveyksillä yksiväristä taustaa skaalaus- ja sijaintiarvojen muutoksista huolimatta. Ratkaisua voi mainittujen tapojen lisäksi hakea myös yo. esimerkki 1:n tapaan. 

Esimerkki 5:

Määritellään taustakuvalle kiinteä koko ja sijainti vasempaan yläkulmaan. Näillä asetuksilla taustakuva pysyy samankokoisena kaikilla ruudunleveyksillä.

body {
    background-position: left top;
    background-repeat: no-repeat;
    background-size: 265px 265px;
}

 

Lisäesimerkkejä päätelaitemäärityksistä:

(kts. Ruudunleveydet eri päätelaitteille)

/* mobile and tablet */
@media (max-width: @screen-sm-max) {
    ...
}
 
/* large desktop */
@media (min-width: @screen-lg-min) {
    ...
}

 

Lisäesimerkki LESS-määrityksistä:

Verkossa saatavilla olevaan aineistoon viittaavat linkit tietuesivulla on korostettu kehyksellä finna.fi-sivustolla esim. https://finna.fi/Record/vaski.3453874. Asiakasorganisaatioiden omissa näkymissä vastaavan korostuksen voi tehdä lisäämällä custom.less-tiedostoon ao. määrityksen (toimii vain custom.less-tiedostossa, ei custom.css-tiedostossa, toisin kuin edelliset esimerkit, joita voi käyttää molemmissa)

// available online links in Record view
.template-dir-record {
    & .recordURLs {
        & a { 
            display: inline-block;
            line-height: 1.5em;
            margin-bottom: 2px;
            margin-top: 2px;
            margin-right: 3px;
            margin-left: 1px;
            padding: 2px 8px 2px 20px;
            word-break: break-all;
            border-style: solid;
            border-radius: 10px;
            border-width: 1px;
            & i {
                font-size: 1em;
                margin-left: -14px;
                transition: transform .2s ease-in-out;
            }
        }
        // remove 1px padding used without border to avoid truncate cutoff
        & .truncate-field.truncate-done, & .resolver {
            padding-left: 0;
        }
    }
}

Halutessaan korostusta voi muokata esim. nappulamaisemmaksi muotoon arvoilla:

(eli korvataan "& a {"- ja "& i {"-rivien väliset arvot ao. arvoilla)

display: inline-block;
line-height: 1.5em;
background: @link-color;
margin-bottom: 2px;
margin-top: 2px;
margin-right: 3px;
padding: 3px 8px 3px 20px;
word-break: break-all;
color: #fff;
border-radius: 10px;

CSS-tyylitiedostot

LESS-tyylitiedostojen lisäksi omat CSS-määrittelyt voi sijoittaa teeman tiedostoon css/custom.css, kunhan ei käytä niiden joukossa sekaisin myös LESS-määrityksiä.

 

JavaScript

Selaimen näytettäväksi annettava HTML-sisältö tuotetaan sivupohjilla. Osa Finnan toiminnallisuudesta on selainpohjaista ja toteutetaan selaimessa ajettavalla JavaScript (tiedostopääte .js) -koodilla, joka ladataan sivupohjista. JavaScript-muokkausten tekeminen ei siis välttämättä edellytä muutoksia sivupohjiin.

Omaa toiminnallisuutta voi lisätä teeman tiedostoon js/custom.js. Tiedoston metodia finnaCustomInit kutsutaan automaattisesti sivun latauksen yhteydessä. Voit luonnollisesti luoda myös uusia funktioita ja kutsua niitä finnaCustomInit()-funktiosta.

Konfiguraatiotiedostot

Näkymän käyttämät asetustiedostot sijaitsevat hakemistossa /local/config/vufind.

Usein tiedosto perii määrittelyt hakemiston /local/config/finna asetustiedostosta. Perintä määritellään kohdassa Parent_Config > relative_path. Perinnän voi estää osioittain listaamalla nämä osiot kohdassa Parent_Config > override_full_sections.  

Esimerkki: /local/config/vufind/config.ini perii Finnan config.inin määrittely lukuunottamatta osioita Languages,AlphaBrowse_Types,SearchTabs:

[Parent_Config]
relative_path = "../finna/config.ini"
override_full_sections = "Languages,AlphaBrowse_Types,SearchTabs"
 
...paikalliset määrittelyt...

 

 

  • No labels