Page History
...
LESS-tyylitiedostojen lisäksi voit sijoittaa omat CSS-määrittelyt teeman tiedostoon css/custom.css. CSS-tiedostoissa et voi kuitenkaan käyttää LESS-määrityksiä.
Etusivun hakupalkin tekstien sijoittaminen laatikon sisään
Etusivun hakuosion tekstien sisältöä ja tyylejä muokataan luomalla tiedosto: introductiontext.phtml halutun näkymän polkuun: themes/custom/templates/search/.
Tässä esimerkkitapauksessa luomme alla olevaa kuvaa vastaavan laatikon.
Muokkaa tiedoston themes/custom/templates/search/introductiontext.phtml sisältö seuraavanlaiseksi:
| Code Block | ||||||
|---|---|---|---|---|---|---|
| ||||||
<!-- START OF finna - search/introductiontext.phtml -->
<div class="introduction-text">
<h1 class="introductionText">
<?=$this->transEsc('site_header_slogan');?>
</h1>
</div>
<!-- END OF finna - search/introductiontext.phtml --> |
| Info |
|---|
| Muista myös asettaa käännösteksti site_header_slogan -käännösavaimelle hallintaliittymän käännöksien kautta. |
Lisää tiedostoon themes/custom/less/custom.less seuraavat tyylimäärittelyt:
| Code Block | ||||
|---|---|---|---|---|
| ||||
.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;
:before {
content:"";
position:absolute;
bottom:-12px;
margin:auto;
left:0;
border-width:0 0 12px 12px;
border-style:solid;
border-color:transparent @brand-primary;
}
}
.introduction h1 {
text-shadow: none;
}
|
Sivulla näkyvän elementin muokkaaminen
...
