0 Kč s DPH

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

Tým inPage
info(zav)inpage.cz

Přidat komentář