Page History

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/finna2/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. 

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).

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):

<? $this->headTitle('xxx'); $this->content()->setHeading('xxx'); ?>

<h2>Otsikko</h2>

<p>Tekstiä</p>

<img src="<?=$this->imageSrc('tiedostonimi.jpg')?>">

<a href="<?=$this->fileSrc('tiedostonimi.jpg')?>">

<?=$this->translate('XXX');?>

<a href="https://finna.fi">Finna</a>

<a href="<?=$this->url('<toiminto>');?>">Linkki</a>

<a href="<?=$this->url('search-home')?>">Etusivulle</a> 

<?=$this->url('content-page', ['page'=>'help'])?>

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

<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 

 <?=$this->feed('<nimi>'); ?>

<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>

<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>

Esimerkkejä hyödyllisistä CSS-muotoiluista:

fa-*

<a href="..." title="..."><i class="fa fa-search"></i> Esimerkkihaku</a>

.fa-barcode:before {
    content: "\f209";
}

infobox

<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 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:

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:

templates/search/home/home-left.phtml

templates/search/home/home-right.phtml

templates/search/home/home-2.phtml

templates/search/home/home-3.phtml

templates/search/home/home-4.phtml

templates/search/home/home-5.phtml

templates/search/home/home-10.phtml

templates/footer.phtml

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).

Anchor
additions additions

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.

general-post-body.phtml

general-post-head.phtml

header-navibar.phtml

search-post-facets.phtml

record-post-metadata.phtml

record-post-toolbar.phtml

record-post-recommendations.phtml

login-pre.phtml

login-post.phtml

helpBegin.phtml

helpEnd.phtml

online-payment.phtml

checkedout-pre-list.phtml

checkedout-post-list.phtml

holds-pre-list.phtml

holds-post-list.phtml

storageretrievalrequests-pre-list.phtml

storageretrievalrequests-post-list.phtml

illrequests-pre-list.phtml

illrequests-post-list.phtml

fines-pre-list.phtml

fines-post-list.phtml

online-payment.phtml

solr-advanced-post.phtml

organisation-page-start.phtml

organisation-page-end.phtml

header-navibar.phtml

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.

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

@brand-primary

@brand-secondary

@brand-third

@brand-fourth

@link-color

@action-link-color

@header-text-color

@header-background-color

@footer-background

@finna-search-background

@home-1-background

@home-2-background

jne

@infobox-background

@infobox-text-color

@filters-background-color

@filters-text-color

@finna-feedback-background

@finna-feedback-color

Esimerkkejä värimuutoksista

@brand-primary (väri: #ff5c57):

@brand-primary (väri: #5e81ac), @link-color (väri: #d08770):

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)

.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.