Motiv na všech stránkách v šabloně KYRA

Chybí vám v šabloně KYRA motiv na ostatních stránkách? V tomto návodě si ukážeme, jak zobrazit motiv na všech stránkách a jak upravit zobrazení textu motivu s pomocí vlastních CSS stylů.

Motiv na všech stránkách

V základu má Kyra motiv jen na úvodní stránce. Není to však definitivní řešení a s pomocí vlastních CSS stylů lze motiv zobrazit i na ostatních stránkách. Vložte připravený styl do Vlastních CSS stylů v sekci Vzhled a případně upravte výšku motivu, která je nyní nastavena na 200px vlastností height: 200px. Obrázek se v bloku částečně ořízne a vlastností backgroun-position jej můžete vertikálně pozicovat v procentech. Kdy 0% je zarovnání k hornímu okraji a 100% k dolnímu okraji.

/*zobrazení motivu i na ostatních stránkách*/
#motive {
display: block;
background-size:cover;
background-position:center 50%; /*pozice obrazku*/
height:200px; /*výška motivu*/
}

Úprava textu motivu

Zobrazením motivu na všech stránkách se ukáže i text motivu. Na vás je pak volba zda jej necháte zobrazený a jen jej upravíte, anebo jej pro ostatní stránky skryjete.

Skrytí textu motivu na ostatních stránkách

/*skryje motto na ostatních stránkách*/
body:not(#index) #motto { 
   display:none 
}

Zobrazení textu motivu 

/*kód pro vystředění motta*/
#motive .container {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 0;
    height: 100%;
}
/*mírné odsazení shora */
body:not(#index) #motto {
  margin-top:40px;
}

Úprava velikosti písma textu motivu

/*úprava velikosti písma nadpisu*/
body:not(#index) #motto #motto-title {
    font-size: 2em;
}
/*úprava velikosti písma textu*/
body:not(#index) #motto #motto-text {
    font-size: 1em;
}

Motiv si také můžete nastavit pro každou stránku jiný. K tomu využijete jiný náš návod a to Nastavení motivu pro každou stránku.