Úprava motivu stránek - šablona SIRIUS

20. 3. 2013

Pozadí webové prezentace může být tvořeno buď obrázkem, barvou, barevným přechodem a nebo také kombinací obrázku a barvy. My si ukážeme první dva nejzákladnější a to barvu a obrázek.

Změna velikosti motivu

Příklad platí pro libovolnou šablonu i barvu, my jsme si vybrali červenou. Změnu velikosti využijete zejména pokud máte obrázek dané velikosti a nechcete jej nijak měnit. Nebo jen budete chtít věnovat motivu méně prostoru.

Přidejte do vlastního stylu následující zápis, kde hodnota tučně představuje výšku motivu - výchozí výška motivu SIRIUS je 390px:

.theme {height: 200px;}

Výška může být zadána více způsoby, které jsou popsány v CSS základech, nicméně zadání v pixelech je nejvhodnější.

Změna obrázku motivu

Obrázek motivu můžete samozřejmě měnit i v centru administrace. My si ale ukážeme, jak dosáhnout stejného výsledku v CSS. V příkladu máme již zmenšenou výšku motivu na 200px.

Zvolil jsem si obrázek, kterým chci motiv dlaždicovitě vyplnit s názvem pozadi-ukazka.png a nahrál jsem jej do administrace běžným způsobem:

#header-theme {background: url("/obrazek/3/pozadi-ukazka-png/");}

Vyhledávací pole

Určitě jste si během úprav všimli, je to vidět i na našich obrázcích, že vyhledávací pole zůstává na místě a překrývá obsah stránek.

Následující zápis posune vyhledávací pole zpět nad menu:

.search_box {top: 120px;}

Zkuste experimentovat a vyzkoušejte i jiné zapisy, které jsou popsány v CSS základech.