Hakulinkit

Hakulinkit, kuten tarkennettu haku ja e-julkaisut sijoittuvat etusivun hakupalkin alle.

Linkeillä on omat luokat ja niitä on mahdollista tyylitellä LESS- tai CSS-tyylien avulla:

• .btn-primo, eli artikkelihaku
• .btn-advanced, eli tarkennettu haku
• .btn-link, joka vaikuttaa kaikkiin linkkeihin hakupalkin vieressä

Suositellut keinot linkkien näkyvyyden parantamiseksi

Suositeltuja linkin taustavärejä ovat sellaiset, jotka erottuvat kontrastinsa puolesta taustastaan. Organisaatiot voivat ottaa huomioon oman graafisen ilmeensä ja hyödyntää siinä määriteltyjä värejä. Neutraaleista väreistä esimerkiksi valkoinen taustaväri ja musta teksti erottuvat useimmiten hyvin esimerkiksi tummahkoa tai kirjavaa taustaa vasten. Myös saavutettavuus tulisi huomioida. Linkin tekstin tulee erottua linkin taustaväristä, ja linkin taustavärin tulee olla riittävän erottuva taustakuvaa/taustaväriä vasten. Vinkki: Wave on hyvä ja ilmainen työkalu riittävän kontrastin tarkistamiseen: https://webaim.org/resources/contrastchecker/.

Esimerkki 1:

Asetetaan kaikkien linkkien taustaväriksi valkoinen ja tekstin väriksi musta. Lisätään linkin kokoa myös hieman säätämällä padding-arvoja (Huom! Näitä kannattaa kokeilla parhaan lopputuloksen saamiseksi). Lisätään seuraava tyylimääritys custom.less tiedostoon:

.searchbox .searchbox-home .btn.btn-link {
   background: #ffffff;
   color: #2b2b2b;
   padding: 3px 8px;
}

Esimerkki 2:

Asetetaan Tarkennetun haun linkin taustaväriksi oman näkymän pääväri, eli @brand-primary. Lisätään myös linkille reunamääritys, eli border. Lisätään seuraava tyylimääritys custom.less tiedostoon:

.searchbox .searchbox-home .btn.btn-link.btn-advanced { 
    background: @brand-primary;
    border: 1px solid @brand-primary;
}