Etusivun hakuosiota voi helposti uudessa teemassa lähteä muokkaamaan luomalla tiedosto: introductiontext.phtml halutun näkymän polkuun: themes/custom/templates/search.

Tässä esimerkkitapauksessa luomme alla olevaa kuvaa vastaavan laatikon.

Kuva1

 

Aloitetaan muokkaamalla juuri luodun introductiontext.phtml sisältöä vastaavanlaiseksi:

Kuva2

Valmis kopioitava koodi:

introductiontext.phtml
<!-- START OF finna - search/introductiontext.phtml -->
<div class="introduction-text">
    <h3 class="introductionText">
        <?=$this->translate('site_header_slogan');?>
    </h3>
</div>
<!-- END OF finna - search/introductiontext.phtml -->

Muista myös asettaa käännösteksti site_header_slogan -käännösavaimelle hallintaliittymän käännöksien kautta. Voit halutessasi käyttää myös jotain muutakin käännösavainta.

Tämän jälkeen voidaan siirtyä muokkaamaan tyylimuutoksia custom.less tiedostoon, joka löytyy polusta: themes/custom/less/custom.less. Näin voidaan käyttää less-muuttujia väreissä helposti.

 

Tähänkin koodi löytyy alapuolelta suoraan. Muista muokata värit background-colorista ja border-radiusta muuttamalla voit vaihtaa kulmien pyöreyttä, margin-bottom ja top taas lisäävät tyhjää tilaa kentän ympärillä. Alin rivi on puhekuplan nuoli, siihen myös kannattaa vaihtaa rivin lopusta border-color:transparent perään haluttu värikoodi, allaolevassa on käytetty brand-primaryä.

 

Viimeisinä kahtena kohtana listassa on .template-dir-search.template-name-home .search-form-container  ja .template-dir-search.template-name-home .searchContent 

Joista ensimmäisen määritykset muuttavat hakualueen kokoa. Jolloin myös taustakuvalle varattu alue suurenee. Kannattaa lisätä kummatkin padding-top ja bottom jolloin saa tasaisesti ylös ja alas lisättyä saman verran aluetta.

Toisessa taas määritellään taustakuvasta näytettävä kohta background-position avulla. Toiminnon käyttöä on avattu hyvin sivulla: https://www.w3schools.com/cssref/playit.asp?filename=playcss_background-position 

Custom.less
.introduction-text{
    background-color: @brand-primary;
    position: relative;
    display: inline-block;
    max-width: 450px;
    padding: 1.5em;
    border-radius: 20px 25px 40px 0px;
    margin-bottom: 1em;
    margin-top: 2em;
}

.introduction h3{
    text-shadow: none;
}

.introduction-text :before{content:"";position:absolute;bottom:-12px;margin:auto;left:0;border-width:0 0 12px 12px;border-style:solid;border-color:transparent @brand-primary;}
 
.template-dir-search.template-name-home .search-form-container {
    padding-top: 7em;
    padding-bottom: 7em;
}

.template-dir-search.template-name-home .searchContent {
    background-position: center center;
}

Ylläolevat kohdat kopioimalla ja tallentamalla saadaan ensimäisen kuvan näköinen tervetuloa teksti.

Kuva muutoksista hakupalkin kanssa.

 

  • No labels